Mengintegrasikan PWA ke dalam UI berbagi bawaan dengan Workbox

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

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

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

Ponsel Android dengan fitur 'Bagikan melalui' panel samping terbuka.
Alat pilih target berbagi tingkat sistem dengan PWA terinstal bernama Share Target Test sebagai opsi.

Pada halaman yang sama

Jika Anda tidak terbiasa dengan cara kerja Target Berbagi Web, Menerima data yang dibagikan dengan fitur Web Share API Target memberikan pengantar yang mendalam. Berikut ini sekilas tinjauan singkat.

Ada dua bagian dalam menerapkan fungsi target berbagi web. Pertama, update manifes aplikasi web untuk menunjukkan bahwa Anda ingin aplikasi tersebut dibagikan target saat diinstal. Contoh berikut mengarahkan berbagi ke URL /share melalui permintaan POST. Format ini dienkode sebagai bentuk multibagian, dengan judul yang dipanggil 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"]
      }
    ]
  }
}

Target berbagi pekerja layanan dengan Workbox

Meskipun biasanya ditangani oleh titik akhir server, trik rapi yang dapat Anda lakukan untuk berbagi target adalah mendaftarkan rute langsung di pekerja layanan Anda untuk menangani permintaan. Dengan cara ini, aplikasi Anda akan 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 instance tersebut terdaftar untuk Rute /share, sama dengan yang tercantum dalam contoh manifes aplikasi web. Di beberapa respons tersebut akan memanggil shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

Fungsi shareTargetHandler() asinkron dan menerima peristiwa, menunggu data formulir, kemudian mengambil file medianya.

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, mungkin menyajikan laman dengan beberapa parameter kueri untuk item yang dibagikan atau menyimpan data dan pointer ke media dalam Cache Storage API atau IndexedDB.

Anda dapat mencobanya di aplikasi contoh Fugu Jurnal dan melihat pekerja layanannya implementasi dalam sumber dari kode Anda.

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

Kesimpulan

Share Target API adalah cara sederhana untuk mengintegrasikan Progressive Web secara mendalam Aplikasi ke perangkat pengguna, menjadikannya setara dengan aplikasi khusus platform untuk tugas penting dalam berbagi konten antar-aplikasi. Tetapi melakukan hal ini biasanya memerlukan server yang tersedia untuk menerima permintaan. Dengan memanfaatkan {i>Workbox<i} untuk membuat rute target langsung di pekerja layanan, aplikasi Anda bebas dari hal ini batasan, memungkinkan Target Berbagi berfungsi untuk aplikasi saat offline dan tanpa backend.

Foto oleh Elaine Casap di Unsplash