Menggunakan jendela kotak kerja

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

• Untuk menyederhanakan pendaftaran dan update pekerja layanan dengan membantu developer mengidentifikasi momen penting dalam siklus proses pekerja layanan, sehingga memudahkan developer merespons pada saat-saat tersebut.
• Untuk mencegah developer melakukan kesalahan umum, seperti mendaftarkan pekerja layanan dalam 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 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 membaginya dari logika aplikasi inti situs 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 memperhatikan bahwa elemen <script> dalam contoh di atas menggunakan atribut type="module". 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, jadi tidak masalah untuk menayangkan kode ini ke browser apa 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();

Sepertinya hal ini sama dengan mendaftarkan sendiri pekerja layanan menggunakan navigator.serviceWorker.register. Namun, Workbox.register akan menangani proses menunggu hingga peristiwa window load sebelum mendaftarkan pekerja layanan. Ini diinginkan dalam situasi ketika precaching terlibat sehingga pertentangan bandwidth yang dapat menunda startup halaman dapat dihindari.

Berkomunikasi antara window dan cakupan pekerja layanan

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

Workbox menggunakan format tertentu agar pesan merupakan objek dengan properti berikut:

• type adalah string unik yang diperlukan yang mengidentifikasi pesan. Format harus dalam huruf besar dengan garis bawah yang memisahkan kata-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. Data ini dapat berupa jenis data apa pun.

Berikut adalah contoh cara kerja messageSW, dimulai dengan kode dalam 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 instance yang bisa menjadi kegunaan komunikasi antara pekerja layanan dan window, 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.