Bagikan melalui

Mengintegrasikan Progressive Web Apps dengan Windows Share

  • Artikel

Artikel ini menjelaskan cara mengintegrasikan Aplikasi Web Progresif (PWA) dengan fitur Windows Share . Fitur ini memungkinkan pengguna berbagi konten dari satu aplikasi Windows ke aplikasi Windows lainnya. PWA mendaftar sebagai Target Berbagi untuk menerima dan menangani file bersama dalam aplikasi.

Apa itu Target Berbagi?

Share Target adalah fitur yang diperkenalkan di Windows 8, dan memungkinkan aplikasi untuk menerima data dari aplikasi lain. Bagikan Target berfungsi seperti Clipboard tetapi dengan konten dinamis.

Berbagi konten dari PWA Anda

Untuk berbagi konten, PWA menghasilkan konten (seperti teks, tautan, atau file) dan menyerahkan konten bersama ke sistem operasi. Sistem operasi memungkinkan pengguna memutuskan aplikasi mana yang ingin mereka gunakan untuk menerima konten tersebut. PWAs dapat menggunakan API Web Share untuk memicu menampilkan Lembar Berbagi di Windows. API Web Share didukung di Microsoft Edge dan browser berbasis Chromium lainnya.

Lihat Berbagi konten dalam dokumentasi Microsoft Edge untuk contoh lengkap cara berbagi konten dari PWA.

Menerima file bersama di PWA Anda

Untuk menerima konten, PWA bertindak sebagai target konten. PWA harus terdaftar dengan sistem operasi sebagai target berbagi konten.

Anggota share_target harus berisi informasi yang diperlukan agar sistem meneruskan konten bersama ke aplikasi Anda. Pertimbangkan contoh konfigurasi manifes share_target berikut:

"share_target": {
  "action": "./share_target_path/?custom_param=foo",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "mapped_files",
        "accept": ["image/jpeg"]
      }
    ]
  }
},

Saat aplikasi Anda dipilih oleh pengguna sebagai target untuk konten bersama, PWA diluncurkan. Permintaan GET HTTP dibuat ke URL yang ditentukan oleh action properti . Data bersama diteruskan sebagai titleparameter kueri , , textdan url . Permintaan berikut dibuat: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

Contoh berikut mengilustrasikan cara mendaftarkan pekerja layanan terlingkup:

navigator.serviceWorker.register('scoped-service-worker.js',
                { scope: "./share_target_path/" })

Pekerja layanan menangani data berbagi sesuai keinginan, lalu memenuhi permintaan, atau dapat mengalihkan permintaan kembali dari jalur kustom. Contoh berikut mengilustrasikan cara mengalihkan permintaan kembali dari jalur kustom:

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        // Read the shared data here, then
        // Redirect back out of the share_target_path to the actual site
        return Response.redirect(event.request.url.replace("share_target_path/", ""));
    })());
    return;
});

Lihat Contoh menerima konten bersama di dokumentasi Microsoft Edge untuk informasi selengkapnya.

Pertimbangan performa

Jika handler pengambilan ditambahkan hanya untuk dukungan berbagi, potensi masalah latensi dapat muncul saat permintaan terganggu oleh pekerja layanan. Untuk mengatasi masalah ini, pertimbangkan untuk mengatur share_target sebagai sub-jalur pseudo dan mendaftarkan pekerja layanan yang secara khusus tercakup ke jalur tersebut. Pendekatan ini memungkinkan penggunaan handler pengambilan untuk target berbagi tanpa mendaftarkan handler pengambilan yang sama untuk panggilan lain.

Contoh aplikasi PWA

Aplikasi sampel printer logo PWA di GitHub menunjukkan cara mengintegrasikan PWA dengan Lembar Berbagi Windows. Aplikasi ini memungkinkan pengguna untuk mencetak logo PWA ke printer. Aplikasi ini menggunakan Lembar Berbagi Windows untuk berbagi logo dengan aplikasi lain.

Lihat juga