Dua API memainkan peran penting dalam membangun aplikasi web yang andal: Pekerja Layanan dan Penyimpanan Cache. Namun, menggunakannya secara efektif—tanpa menimbulkan bug halus atau menabrak {i>edge case<i}—dapat menjadi tantangan. Misalnya, error dalam kode pekerja layanan dapat menyebabkan masalah caching; pengguna mungkin melihat konten yang sudah tidak berlaku atau link yang rusak.
Workbox adalah toolkit pekerja layanan tingkat tinggi yang dibuat berdasarkan Service Worker dan Cache Storage API. Library ini menyediakan serangkaian 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 Anda, dan alat yang terintegrasi dengan proses build Anda.
Kode runtime
Ini adalah kode yang berjalan di dalam skrip pekerja layanan Anda dan mengontrol caranya menangkap permintaan keluar dan berinteraksi dengan Cache Storage API. Workbox memiliki lusinan modul library atau lebih, yang masing-masing menangani berbagai kasus penggunaan khusus. Modul yang paling penting menentukan apakah pekerja layanan akan merespons (dikenal sebagai perutean), dan cara responsnya (dikenal sebagai strategi caching).
Buat integrasi
Workbox menawarkan alat command line, modul Node.js, dan plugin webpack yang memberikan cara alternatif untuk melakukan dua hal:
- Buat skrip pekerja layanan berdasarkan serangkaian opsi konfigurasi. Pekerja layanan yang dihasilkan menggunakan library runtime Workbox "di balik layar" untuk menerapkan strategi caching yang Anda konfigurasi.
- Buat daftar URL yang seharusnya "di-cache", berdasarkan pola yang dapat dikonfigurasi untuk menyertakan dan mengecualikan file yang dihasilkan selama proses build.
Mengapa Anda harus menggunakan Workbox?
Menggunakan Workbox saat mem-build pekerja layanan bersifat opsional. Ada sejumlah panduan di luar sana yang menjelaskan strategi caching umum dari perspektif pekerja layanan "vanilla". Jika Anda memutuskan untuk menggunakan Workbox, berikut beberapa manfaatnya.
Pengelolaan cache
Workbox menangani update cache untuk Anda, baik yang terikat dengan proses build saat menggunakan precache, maupun melalui kebijakan ukuran/usia yang dapat dikonfigurasi saat menggunakan cache runtime. Cache Storage API yang mendasarinya sangat andal, tetapi tidak memiliki dukungan bawaan untuk masa berlaku cache. Alat seperti {i>Workbox<i} akan mengisi kesenjangan itu.
Logging dan error reporting yang luas
Saat Anda memulai pekerja layanan, mencari tahu mengapa sesuatu di-cache (atau, sama-sama menjengkelkannya, mengapa 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 Anda.
Dengan mengikuti pesan log tersebut, Anda dapat menemukan akar masalah konfigurasi atau pembatalan validasi apa pun dengan lebih cepat daripada jika Anda melakukannya sendiri.
Codebase lintas browser yang telah diuji
Workbox dikembangkan terhadap rangkaian pengujian lintas browser, dan jika memungkinkan, secara otomatis akan kembali ke implementasi alternatif fitur yang hilang dari browser tertentu.
workbox-broadcast-cache-update module
menggunakan Broadcast Channel API jika tersedia, dan kembali ke implementasi berbasispostMessage()
di browser yang tidak memiliki dukungan.- Modul workstation-background-sync menggunakan Background Sync API jika memungkinkan, dan jika tidak, akan kembali ke percobaan ulang peristiwa dalam antrean setiap kali pekerja layanan dimulai.
Bagaimana cara menggunakan Workbox?
Integrasi framework
Jika memulai project baru dari awal, Anda dapat memanfaatkan integrasi Workbox yang ada di banyak starter kit dan plugin add-on populer:
Menambahkan Workbox ke proses build yang ada
Jika Anda sudah menerapkan proses build untuk situs, Anda mungkin hanya memerlukan command line, modul Node.js, atau plugin webpack yang sesuai untuk mulai menggunakan Workbox.
Secara khusus, antarmuka command line Workbox memudahkan Anda untuk memulai dan
menjalankannya, dengan menampilkan 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 membuat 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 mulai gunakan untuk segera menggunakannya untuk menyimpan dalam cache runtime. Kasus penggunaan ini berarti Anda tidak akan dapat memanfaatkan precaching (yang memerlukan integrasi waktu build), tetapi bagus 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',
})
);