Workbox: toolkit pekerja layanan tingkat tinggi Anda

Jeff Posnick

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.

Logging workbox ke konsol DevTools

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.

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',
  })
);