Mengintegrasikan PWA ke dalam UI berbagi bawaan dengan Workbox

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

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 membuatnya berfungsi jika Anda tidak memilikinya.

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

Ponsel Android dengan panel samping 'Bagikan melalui' terbuka.
Pemilih target berbagi tingkat sistem dengan PWA terinstal yang disebut Share Target Test sebagai opsi.

Di halaman yang sama

Jika Anda tidak memahami cara kerja Target Berbagi Web, Menerima data yang dibagikan dengan Web Share Target API akan memberi Anda pengantar mendalam. Berikut adalah ringkasan singkatnya.

Ada dua bagian dalam menerapkan fungsi target pangsa web. Pertama, 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 yang disebut name, teks yang disebut description, dan gambar JPEG yang 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 berbagi target dengan Workbox

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

Anda melakukannya di Workbox dengan mendaftarkan rute yang ditangani oleh pekerja layanan Anda. Mulai dengan mengimpor registerRoute dari 'workbox-routing'. Perhatikan bahwa class ini terdaftar untuk rute /share, yang sama dengan yang tercantum dalam contoh manifes aplikasi web. Sebagai respons, kode ini 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 darinya.

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 ini. Anda dapat menyimpannya dalam cache. Anda dapat mengirimkannya ke suatu tempat dengan permintaan pengambilan. Anda bahkan dapat menggunakan opsi manifes lainnya, mungkin menayangkan halaman dengan beberapa parameter kueri untuk item lain yang dibagikan atau menyimpan data dan pointer ke media di Cache Storage API atau IndexedDB.

Anda dapat mencobanya di aplikasi contoh Fugu Journal dan melihat penerapan pekerja layanannya dalam kode sumber.

Salah satu hal umum yang dapat Anda lakukan adalah menahan 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 Aplikasi Web Progressive Anda secara mendalam ke perangkat pengguna, sehingga setara dengan aplikasi khusus platform untuk tugas penting berbagi konten antar-aplikasi. Namun, tindakan ini biasanya memerlukan server yang tersedia untuk menerima permintaan. Dengan memanfaatkan Workbox untuk membuat rute target share langsung di pekerja layanan, aplikasi Anda bebas dari batasan ini, sehingga Target Berbagi dapat berfungsi untuk aplikasi saat offline dan tanpa backend.

Foto oleh Elaine Casap di Unsplash