Workbox: Toolkit service worker tingkat tinggi Anda

Jeff Posnick

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

Workbox adalah toolkit service worker tingkat tinggi yang dibangun di atas API Service Worker dan Cache Storage. Workbox 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 skrip tersebut menangkap permintaan keluar dan berinteraksi dengan Cache Storage API. Workbox memiliki sekitar selusin modul library secara total, yang masing-masing menangani berbagai kasus penggunaan khusus. Modul yang paling penting menentukan apakah pekerja layanan akan merespons (dikenal sebagai perutean), dan bagaimana pekerja layanan akan merespons (dikenal sebagai strategi caching).

Membangun integrasi

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

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

Mengapa Anda harus menggunakan Workbox?

Penggunaan Workbox saat membangun pekerja layanan bersifat opsional—ada sejumlah panduan yang membahas 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 terkait dengan proses build saat menggunakan precaching, atau melalui kebijakan ukuran/usia yang dapat dikonfigurasi saat menggunakan caching runtime. Cache Storage API yang mendasarinya sangat canggih, tetapi tidak memiliki dukungan bawaan untuk masa berlaku cache. Alat seperti Workbox mengisi celah tersebut.

Logging dan pelaporan error yang ekstensif

Saat Anda mulai menggunakan pekerja layanan, mencari tahu alasan sesuatu di-cache (atau, yang sama menjengkelkannya, mengapa sesuatu 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.

Logging Workbox ke konsol DevTools

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

Codebase lintas browser yang telah diuji

Workbox dikembangkan berdasarkan suite pengujian lintas browser, dan jika memungkinkan, akan otomatis beralih 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 ada di banyak starter kit dan plugin add-on populer:

Menambahkan Workbox ke proses build yang ada

Jika Anda sudah memiliki proses build untuk situs, memasukkan alat 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 menjalankan, dengan mode wizard yang akan memeriksa lingkungan pengembangan lokal Anda dan menyarankan konfigurasi default yang wajar yang dapat Anda gunakan untuk melanjutkan:

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 membangun 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 segera mulai gunakan untuk caching runtime. Kasus penggunaan ini berarti Anda tidak akan dapat memanfaatkan precaching (yang memerlukan integrasi waktu build), tetapi sangat bagus untuk membuat prototipe dan mencoba berbagai strategi caching 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',
  })
);