Workbox: toolkit pekerja layanan tingkat tinggi Anda

Jeff Posnick

Dua API memainkan peran penting dalam membuat aplikasi web yang andal: Service Worker dan Cache Storage. Namun, menggunakannya secara efektif—tanpa menimbulkan bug halus atau mengalami kasus ekstrem—mungkin menjadi tantangan. Misalnya, error dalam kode pekerja layanan Anda dapat menyebabkan masalah penyimpanan dalam cache; pengguna mungkin melihat konten yang sudah tidak berlaku atau link yang rusak.

Workbox adalah toolkit pekerja layanan tingkat tinggi yang dibuat di atas API Service Worker dan Cache Storage. Library ini menyediakan kumpulan library siap produksi untuk menambahkan dukungan offline ke aplikasi web. Toolkit ini disusun menjadi dua koleksi: alat yang membantu mengelola kode yang berjalan di dalam pekerja layanan, dan alat yang terintegrasi dengan proses build Anda.

Kode runtime

Ini adalah kode yang berjalan di dalam skrip pekerja layanan Anda dan mengontrol cara kode tersebut mencegat permintaan keluar dan berinteraksi dengan Cache Storage API. Workbox memiliki sepuluh modul library atau lebih, yang masing-masing menangani berbagai kasus penggunaan khusus. Modul terpenting menentukan apakah pekerja layanan akan merespons (dikenal sebagai pemetaan), dan bagaimana pekerja layanan akan merespons (dikenal sebagai strategi penyimpanan dalam cache).

Membuat integrasi

Workbox menawarkan alat command line, modul Node.js, dan plugin webpack yang memberikan cara alternatif untuk mencapai dua hal:

  • Buat skrip pekerja layanan berdasarkan serangkaian opsi konfigurasi. Service worker yang dihasilkan menggunakan library runtime Workbox "di balik layar" untuk menerapkan strategi penyimpanan dalam cache yang Anda konfigurasi.
  • Buat daftar URL yang harus "di-cache sebelumnya", berdasarkan pola yang dapat dikonfigurasi untuk menyertakan dan mengecualikan file yang dihasilkan selama proses build Anda.

Mengapa Anda harus menggunakan Workbox?

Penggunaan Workbox saat mem-build pekerja layanan bersifat opsional—ada sejumlah panduan yang menjelaskan strategi penyimpanan dalam cache umum dari perspektif pekerja layanan "vanilla". Jika Anda memutuskan untuk menggunakan Workbox, berikut beberapa manfaatnya.

Pengelolaan cache

Workbox menangani pembaruan cache untuk Anda, baik yang terkait dengan proses build saat menggunakan pra-cache, atau melalui kebijakan ukuran/usia yang dapat dikonfigurasi saat menggunakan cache runtime. Cache Storage API yang mendasarinya sangat canggih, tetapi tidak memiliki dukungan bawaan untuk masa berlaku cache. Alat seperti Workbox mengisi kesenjangan tersebut.

Logging dan pelaporan error yang ekstensif

Saat Anda mulai menggunakan pekerja layanan, mengetahui alasan sesuatu di-cache (atau, yang sama-sama menjengkelkan, alasan tidak di-cache) adalah sebuah tantangan. Workbox otomatis mendeteksi saat Anda menjalankan versi pengembangan situs di localhost, dan mengaktifkan logging debug di konsol JavaScript browser.

Logging Workbox ke konsol DevTools

Dengan mengikuti pesan log, Anda dapat menemukan akar masalah konfigurasi atau pembatalan validasi dengan lebih cepat daripada jika Anda melakukannya sendiri.

Codebase lintas browser yang telah diuji

Workbox dikembangkan berdasarkan rangkaian pengujian lintas browser, dan jika memungkinkan, akan otomatis kembali ke implementasi alternatif fitur yang tidak ada di browser tertentu.

Bagaimana cara menggunakan Workbox?

Integrasi framework

Jika memulai project baru dari awal, Anda dapat memanfaatkan integrasi Workbox yang ditemukan di banyak plugin add-on dan kit awal populer:

Menambahkan Workbox ke proses build yang ada

Jika Anda sudah memiliki proses build untuk situs, memasukkan command line, modul Node.js, atau plugin webpack yang sesuai mungkin sudah cukup untuk mulai menggunakan Workbox.

Secara khusus, antarmuka command line Workbox memudahkan Anda untuk memulai dan berjalan, dengan mode wizard yang akan memeriksa lingkungan pengembangan lokal dan menyarankan konfigurasi default yang wajar yang dapat Anda gunakan ke depannya:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

Untuk mem-build pekerja layanan, jalankan workbox generateSW workbox-config.js sebagai bagian dari proses build. Lihat dokumentasi generateSW untuk mengetahui detailnya. Anda dapat menyesuaikan pekerja layanan lebih lanjut dengan melakukan perubahan pada workbox-config.js. Lihat dokumentasi opsi untuk mengetahui detailnya.

Menggunakan Workbox saat runtime di pekerja layanan yang ada

Jika Anda sudah memiliki pekerja layanan dan ingin mencoba library runtime Workbox, impor Workbox dari CDN resminya dan langsung mulai menggunakannya untuk cache runtime. Kasus penggunaan ini berarti Anda tidak akan dapat memanfaatkan pra-caching (yang memerlukan integrasi waktu build), tetapi sangat cocok untuk membuat prototipe dan mencoba strategi caching yang berbeda dengan cepat.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);