Mengintegrasikan PWA ke dalam UI berbagi bawaan dengan Workbox

Cara membuat PWA Anda muncul di samping aplikasi khusus platform di UI berbagi tingkat sistem

Jeff Posnick

Joe Medley

Sam Richard

Web Share Target API memungkinkan Anda menampilkan Progressive Web App di sheet berbagi tingkat sistem pengguna setelah diinstal. Meskipun berfungsi dengan baik jika Anda memiliki server yang tersedia untuk menerima permintaan, akan jauh lebih sulit untuk bekerja jika tidak memilikinya.

Dalam artikel ini, kita akan menggunakan Workbox, sekumpulan library JavaScript untuk menambahkan dukungan offline ke aplikasi web, untuk membuat URL target berbagi yang sepenuhnya ada di dalam pekerja layanan Anda. Hal ini memungkinkan situs statis dan aplikasi web satu halaman berfungsi sebagai target berbagi tanpa endpoint server khusus.

Pemilih target berbagi tingkat sistem dengan PWA terinstal yang disebut Share Target Test sebagai opsi.

Di halaman yang sama

Jika Anda tidak terbiasa dengan cara kerja Web Share Target, Menerima data bersama dengan Web Share Target API memberikan pengantar yang lebih mendalam. Berikut ringkasan singkatnya.

Ada dua bagian untuk menerapkan fungsi target berbagi web. Pertama-tama, update manifes aplikasi web untuk menunjukkan bahwa Anda ingin aplikasi menjadi target berbagi saat diinstal. Contoh berikut mengarahkan berbagi ke URL /share melalui permintaan POST. Format ini dienkode sebagai formulir multibagian, dengan judul disebut name, teks disebut description, dan gambar JPEG disebut photos.

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Pekerja layanan membagikan target dengan Workbox

Meskipun biasanya ditangani oleh endpoint server, trik rapi yang dapat Anda lakukan untuk target berbagi adalah dengan mendaftarkan rute langsung di pekerja layanan guna menangani permintaan. Tindakan ini akan memungkinkan aplikasi Anda menjadi target berbagi tanpa backend.

Lakukan hal ini di Workbox dengan mendaftarkan rute yang ditangani oleh pekerja layanan. Mulai dengan mengimpor registerRoute dari 'workbox-routing'. Perhatikan bahwa ini terdaftar untuk rute /share, yang sama dengan yang tercantum dalam contoh manifes aplikasi web. Respons akan memanggil shareTargetHandler().

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

Fungsi shareTargetHandler() bersifat asinkron dan mengambil peristiwa, menunggu data formulir, lalu mengambil file media dari peristiwa tersebut.

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

Kemudian Anda dapat melakukan apa pun yang Anda inginkan dengan file-file ini. Anda bisa menyimpannya dalam cache. Anda dapat mengirimnya ke suatu tempat dengan permintaan pengambilan. Anda bahkan dapat menggunakan opsi manifes lainnya, seperti menayangkan halaman dengan beberapa parameter kueri untuk item bersama lainnya atau menyimpan data dan pointer ke media di Cache Storage API atau IndexedDB.

Anda dapat mencobanya di aplikasi contoh Fugu Journal dan melihat implementasi pekerja layanannya di kode sumbernya.

Satu hal umum yang dapat Anda lakukan adalah menyimpan resource bersama hingga koneksi jaringan yang lebih baik tersedia. Workbox juga mendukung sinkronisasi latar belakang berkala.

Kesimpulan

Share Target API adalah cara sederhana untuk mengintegrasikan Progressive Web App Anda secara mendalam ke dalam perangkat pengguna, sehingga setara dengan aplikasi khusus platform untuk tugas penting berbagi konten antar-aplikasi. Namun, untuk menerima permintaan tersebut, biasanya diperlukan server yang tersedia. Dengan memanfaatkan Workbox untuk membuat rute target berbagi langsung di pekerja layanan, aplikasi Anda terbebas dari batasan ini, sehingga memungkinkan Share Target berfungsi untuk aplikasi saat offline dan tanpa backend.

Foto oleh Elaine Casap di Unsplash