Workbox

Mempertahankan pekerja layanan dan logika penyimpanan cache bisa menjadi tantangan seiring pertumbuhan PWA Anda. Workbox, adalah sekumpulan library open source untuk membantu melakukannya. Workbox mengenkapsulasi API tingkat rendah, seperti Service Worker API dan Cache Storage API, serta menampilkan antarmuka yang lebih cocok untuk developer.

Beberapa tugas yang dapat dilakukannya adalah mencocokkan strategi caching dengan jalur (atau pola pemilihan rute), menangani streaming, dan menggunakan fitur seperti sinkronisasi latar belakang dengan penggantian yang tepat.

Workbox dapat membantu Anda mengelola kebutuhan penyimpanan dalam cache dan penayangan aset. Library ini juga merupakan library yang paling banyak digunakan bagi pekerja layanan; digunakan oleh 54% situs seluler dan digunakan di banyak alat build dan CLI, termasuk Angular CLI, Create-React-App, dan Vue CLI. Terdapat juga plugin untuk sebagian besar library dan framework lainnya, seperti Next.js.

54%

Situs seluler dengan pekerja layanan menggunakan library Workbox

Modul Workbox

Workbox menyertakan beberapa library—yang disebut modul secara internal—masing-masing berfokus pada aspek yang berbeda dalam mengelola aset dan perilaku pekerja layanan.

Modul Workbox berfungsi dalam berbagai konteks, seperti:

  • Dalam konteks pekerja layanan: Anda mengimpor modul yang dibutuhkan dan menggunakannya dari file pekerja layanan, misalnya untuk membantu mengelola penyimpanan dalam cache dan menyalurkan file dengan strategi yang berbeda.
  • Dalam konteks window utama: membantu mendaftarkan pekerja layanan dan berkomunikasi dengannya
  • Sebagai bagian dari sistem build: misalnya, webpack, untuk tujuan seperti membuat manifes aset, atau bahkan menghasilkan seluruh pekerja layanan.

Beberapa modul populer adalah:

  • workbox-routing: Saat pekerja layanan melakukan intersepsi permintaan, modul ini akan mengarahkan permintaan tersebut ke berbagai fungsi yang memberikan respons; ini merupakan implementasi pengendali peristiwa fetch seperti yang disebutkan di bab Penayangan.
  • strategi kotak kerja: Kumpulan strategi caching runtime yang menangani respons terhadap permintaan, seperti cache terlebih dahulu dan sudah tidak berlaku saat divalidasi ulang; ini adalah implementasi dari berbagai strategi yang disebutkan dalam bab Penayangan.
  • workbox-precaching: Ini adalah implementasi file cache dalam pengendali peristiwa install dari pekerja layanan (juga dikenal sebagai precaching), seperti yang disebutkan di bab Caching. Dengan modul ini, Anda dapat dengan mudah melakukan precache kumpulan file dan mengelola update aset tersebut secara efisien. Kita akan membahas cara memperbarui aset di Bab Pembaruan.
  • workbox-expiration: Ini adalah plugin yang digunakan dengan strategi caching untuk menghapus permintaan yang di-cache berdasarkan jumlah item dalam cache atau berdasarkan usia permintaan yang di-cache. Cara ini membantu mengelola cache Anda dan menetapkan batas waktu serta jumlah item dalam setiap cache.
  • workbox-window: Serangkaian modul yang dimaksudkan untuk berjalan dalam konteks jendela, yaitu, di dalam halaman web PWA Anda. Anda bisa menyederhanakan proses pendaftaran dan pembaruan pekerja layanan serta memungkinkan komunikasi yang lebih mudah antara kode yang berjalan dalam konteks pekerja layanan dan konteks jendela.

Menggunakan Workbox

Workbox menyediakan berbagai cara untuk mengintegrasikan ke PWA Anda. Anda dapat memilih yang paling sesuai dengan arsitektur aplikasi Anda:

  • Workbox CLI: Utilitas command line yang menghasilkan pekerja layanan lengkap, memasukkan manifes pra-cache, atau menyalin file Workbox yang diperlukan.
  • Workbox Build: Modul npm yang menghasilkan pekerja layanan lengkap, memasukkan manifes precache, dan menyalin file Workbox. Hal ini dimaksudkan untuk diintegrasikan dengan proses build Anda sendiri.
  • workbox-sw: Cara memuat paket service worker Workbox dari CDN yang tidak menggunakan proses build.

Workbox CLI menyediakan wizard yang akan memandu Anda dalam membuat pekerja layanan. Untuk menjalankan wizard, ketik perintah berikut pada command line:

npx workbox-cli wizard

Cara kerja CLI Workbox di terminal

Menyimpan ke cache dan inferensi dengan Workbox

Penggunaan umum Workbox adalah menggunakan modul perutean dan strategi bersama-sama untuk meng-cache dan menyalurkan file.

Modul workbox-strategies menyediakan strategi siap pakai untuk penyimpanan data ke dalam cache yang dibahas di bab Aset dan data serta Penayangan.

Modul workbox-routing membantu mengurutkan permintaan yang masuk ke pekerja layanan Anda dan mencocokkannya dengan fungsi atau strategi caching untuk mendapatkan respons atas permintaan tersebut.

Setelah mencocokkan rute ke strategi, Workbox juga menawarkan kemampuan untuk memfilter respons mana yang akan ditambahkan ke cache dengan plugin workbox-cacheable-response. Dengan plugin ini, Anda dapat, misalnya, meng-cache respons yang ditampilkan tanpa error.

Contoh kode berikut menggunakan strategi cache terlebih dahulu (melalui modul CacheFirst) untuk meng-cache dan menayangkan navigasi halaman.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const pageStrategy = new CacheFirst({
  // Put all cached files in a cache named 'pages'
  cacheName: 'pages',
  plugins: [
    // Only requests that return with a 200 status are cached
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

Plugin ini memungkinkan Anda memanfaatkan siklus proses cache dan resolusi permintaan Workbox. Di sini, CacheableResponsePlugin hanya digunakan untuk meng-cache permintaan yang menghasilkan status 200, sehingga mencegah permintaan yang buruk disimpan ke dalam cache.

Setelah strategi dibuat, kini saatnya mendaftarkan rute untuk menggunakannya. Contoh berikut memanggil registerRoute(), yang meneruskan objek Request ke callback-nya. Jika request.mode adalah "navigate", kode tersebut akan menggunakan strategi CacheFirst (di sini disebut pageStrategy) yang ditentukan dalam contoh kode sebelumnya.

// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
  pageStrategy );

Baca dokumentasi Workbox untuk mengetahui contoh dan praktik terbaik lainnya.

Penggantian offline

Modul workbox-routing juga memiliki setCatchHandler() yang diekspor, yang memberikan penanganan jika rute menampilkan error. Anda dapat menggunakannya untuk menyiapkan penggantian offline guna memberi tahu pengguna bahwa rute yang mereka minta saat ini tidak tersedia.

Di sini, kombinasi Workbox dan Cache Storage API menyediakan penggantian offline menggunakan strategi khusus cache. Pertama, selama siklus proses penginstalan pekerja layanan, cache offline-fallbacks dibuka, dan array penggantian offline ditambahkan ke cache.

import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});

Kemudian, pada setCatchHandler(), tujuan permintaan yang memunculkan error akan ditentukan, dan cache offline-fallbacks dibuka. Jika tujuannya adalah dokumen, konten penggantian offline akan ditampilkan ke pengguna. Jika tujuan tidak ada, atau tujuan bukan dokumen (seperti gambar atau stylesheet), respons error akan ditampilkan. Anda dapat memperluas pola ini tidak hanya untuk dokumen tetapi juga untuk gambar, video, font, dan apa pun yang ingin Anda sediakan sebagai penggantian offline.

// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
  const destination = options.request.destination;
  const cache = await self.caches.open('offline-fallbacks');
  if (destination === 'document') {
    return (await cache.match('/offline.html')) || Response.error();
  }
  return Response.error();
});

Resep

Beberapa pola pemilihan rute dan cache, seperti navigasi NetworkFirst dan penggantian offline, cukup umum untuk dienkapsulasi ke dalam urutan langkah yang dapat digunakan kembali. Centang workbox-recipes karena dapat membantu jika menyediakan solusi yang sesuai dengan arsitektur Anda. Fungsi ini biasanya tersedia sebagai satu baris kode yang perlu Anda tambahkan ke kode pekerja layanan.

Menyimpan ke cache dan memperbarui aset

Menyimpan aset ke dalam cache juga memerlukan pembaruan. Workbox membantu Anda memperbarui aset dengan cara apa pun yang Anda putuskan. Anda dapat terus mengupdatenya jika ada perubahan di server, atau menunggu hingga Anda memiliki versi baru aplikasi. Anda dapat mempelajari lebih lanjut cara mengupdate di bab Update.

Bermain dengan Workbox

Anda dapat langsung bermain dengan Workbox menggunakan codelab berikut:

Referensi