Menggunakan jendela kotak kerja

Satu modul Workbox yang belum banyak dibahas dalam dokumentasi ini adalah workbox-window, yang merupakan kumpulan modul yang dimaksudkan untuk dijalankan di window. Tujuan dari modul ini adalah:

• Untuk menyederhanakan pendaftaran dan update pekerja layanan dengan membantu developer mengidentifikasi momen penting dalam siklus proses pekerja layanan, sehingga mempermudah respons pada momen tersebut.
• Untuk mencegah developer membuat kesalahan umum, seperti mendaftarkan pekerja layanan di cakupan yang salah.
• Untuk menyederhanakan pengiriman pesan antara window dan cakupan pekerja layanan.

Mengimpor dan menggunakan workbox-window

Ekspor yang paling sering Anda gunakan dari workbox-window adalah class Workbox, yang dapat Anda impor di Node, atau dari CDN di halaman web.

Membuat paket lokal

Jika toolchain Anda menyertakan bundler seperti webpack atau Rollup, Anda dapat memaketkan workbox-window secara lokal.

Pertama, instal workbox-window sebagai dependensi produksi aplikasi Anda:

npm install workbox-window --save

Kemudian, di JavaScript aplikasi, Anda dapat melakukan import class Workbox dari workbox-window:

<script type="module">
import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}
</script>

Meskipun workbox-window cukup kecil, Anda dapat memisahkannya dari logika aplikasi inti situs Anda menggunakan import dinamis, yang dapat mengurangi ukuran paket utama halaman Anda:

<script type="module">
if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}
</script>

Menggunakan CDN

Meskipun bukan pendekatan yang direkomendasikan, cara yang lebih mudah untuk menggunakan workbox-window adalah dengan mengimpornya dari CDN:

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

Anda akan melihat bahwa elemen <script> dalam contoh di atas menggunakan atribut type="module". Hal ini diperlukan jika Anda ingin menggunakan pernyataan import statis di browser tanpa langkah build. Semua browser utama yang mendukung pekerja layanan juga mendukung modul JavaScript, sehingga Anda dapat menayangkan kode ini ke browser mana pun, karena browser lama akan mengabaikan elemen <script> dengan nilai atribut type "module".

Mendaftarkan pekerja layanan

Mendaftarkan pekerja layanan dengan workbox-window dilakukan dengan metode register class Workbox seperti berikut:

import {Workbox} from 'workbox-window';

const wb = new Workbox('/sw.js');
wb.register();

Tampaknya hal ini sama dengan mendaftarkan pekerja layanan sendiri menggunakan navigator.serviceWorker.register. Namun, Workbox.register akan menunggu hingga peristiwa window load sebelum mendaftarkan pekerja layanan. Hal ini diinginkan dalam situasi yang melibatkan pra-caching sehingga pertentangan bandwidth yang dapat menunda startup halaman dapat dihindari.

Berkomunikasi antara window dan cakupan pekerja layanan

Pekerja layanan memiliki cakupannya sendiri yang terpisah dari window, dan hanya memiliki akses ke sebagian API yang tersedia di window. Namun, komunikasi antara window dan pekerja layanan masih dapat dilakukan. workbox-window memungkinkan komunikasi yang lebih mudah antara dua cakupan dengan metode messageSW modul workbox-window.

Kotak kerja menggunakan format khusus untuk pesan adalah objek dengan properti berikut:

• type adalah string unik wajib yang mengidentifikasi pesan. Formatnya harus dalam huruf besar dengan garis bawah yang memisahkan kata (misalnya, CACHE_URLS).
• meta adalah string opsional yang mewakili nama paket Workbox yang mengirim pesan, dan biasanya dihilangkan.
• payload adalah parameter opsional yang mewakili data yang ingin Anda kirim. Jenis datanya dapat berupa apa saja.

Berikut adalah contoh cara kerja messageSW, dimulai dengan kode di pekerja layanan Anda:

// sw.js
const SW_VERSION = '1.0.0';

self.addEventListener('message', (event) => {
  if (event.data.type === 'GET_VERSION') {
    event.ports[0].postMessage(SW_VERSION);
  }
});

Kemudian kode berikut di halaman web Anda:

const wb = new Workbox('/sw.js');
wb.register();

const swVersion = await wb.messageSW({type: 'GET_VERSION'});
console.log('Service Worker version:', swVersion);

Ada banyak kasus saat komunikasi antara pekerja layanan dan window dapat berguna, seperti memberi tahu pengguna saat update pekerja layanan tersedia. Resep tersebut bergantung pada metode bantuan khusus untuk self.skipWaiting yang disebut messageSkipWaiting, yang mengirimkan pesan dengan nilai type SKIP_WAITING.