Workbox: toolkit pekerja layanan tingkat tinggi Anda

Jeff Posnick

Dua API memainkan peran penting dalam membangun aplikasi web yang andal: Pekerja Layanan dan Cache Storage. Tapi menggunakannya secara efektif—tanpa menimbulkan bug halus atau yang berbeda—dapat menjadi tantangan. Misalnya, kesalahan dalam kode pekerja layanan bisa menyebabkan masalah {i>caching<i}; pengguna mungkin melihat konten yang sudah usang atau rusak penautan.

Workbox adalah server tingkat tinggi toolkit pekerja layanan yang dibangun di atas Service Worker dan Penyimpanan Cache Google Cloud Platform. TEE menyediakan set library siap produksi untuk menambahkan dukungan offline ke aplikasi web. Toolkit ini disusun ke dalam dua koleksi: alat yang membantu mengelola kode yang berjalan di dalam pekerja layanan Anda, dan alat yang terintegrasi dengan proses build project.

Kode runtime

Ini adalah kode yang berjalan di dalam skrip pekerja layanan Anda dan mengontrol cara kerjanya itu mencegat permintaan keluar dan berinteraksi dengan Cache Storage API. Workbox memiliki total puluhan modul library, yang masing-masing menangani berbagai kasus penggunaan khusus. Modul yang paling penting menentukan apakah pekerja layanan akan merespons (dikenal sebagai perutean), dan bagaimana respons tersebut akan diberikan (dikenal sebagai strategi penyimpanan dalam cache).

Integrasi build

Penawaran Workbox command line, Modul Node.js, dan plugin webpack {i>tool<i} yang menyediakan cara alternatif untuk melakukan dua hal:

• Membuat skrip pekerja layanan berdasarkan rangkaian konfigurasi lainnya. Pekerja layanan yang dihasilkan menggunakan library runtime Workbox "di balik layar" untuk menjalankan strategi {i>caching<i} yang Anda konfigurasi.
• Buat daftar URL yang seharusnya "di-cache sebelumnya", berdasarkan pola yang dapat dikonfigurasi untuk menyertakan dan mengecualikan file yang dihasilkan selama proses build.

Mengapa Anda harus menggunakan Workbox?

Menggunakan Workbox saat membangun pekerja layanan bersifat opsional—ada beberapa panduan di luar sana yang memandu strategi penyimpanan cache yang umum dari "vanila" perspektif pekerja layanan. Jika Anda memutuskan untuk menggunakan {i>Workbox<i}, berikut beberapa manfaatnya.

Pengelolaan cache

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

Logging dan pelaporan error yang lengkap

Ketika Anda memulai dengan pekerja layanan, mencari tahu mengapa sesuatu di-cache (atau, yang juga menjengkelkan, mengapa tidak di-cache) merupakan sebuah tantangan. Kotak kerja secara otomatis mendeteksi saat Anda menjalankan versi pengembangan situs Anda di localhost, dan mengaktifkan logging debug di JavaScript browser Anda konsol.

Dengan mengikuti pesan log tersebut, Anda bisa sampai ke akar konfigurasi atau pembatalan validasi jauh lebih cepat daripada jika Anda perangkat itu sendirian.

Codebase lintas browser yang telah diuji

Workbox dikembangkan dengan rangkaian pengujian lintas-browser, dan jika memungkinkan, secara otomatis kembali ke implementasi alternatif dari fitur yang hilang dari {i>browser<i} tertentu.

• Tujuan workbox-broadcast-cache-update module menggunakan Broadcast Channel API jika tersedia, dan beralih kembali ke Berbasis postMessage() implementasi pada browser yang kurang mendukung.
• Tujuan modul workbox-background-sync menggunakan API Sinkronisasi Latar Belakang 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 Anda memulai proyek baru dari awal, Anda dapat memanfaatkan Integrasi workbox ditemukan di banyak starter kit dan plugin add-on populer:

• create-react-app
• vue-cli
• preact-cli
• Gatsby
• Next.js

Menambahkan Workbox ke proses build yang ada

Jika Anda sudah memiliki proses pembuatan untuk situs Anda, buka sesuai command line, Modul Node.js, atau plugin webpack mungkin yang Anda perlukan untuk mulai menggunakan {i>Workbox<i}.

Secara khusus, antarmuka baris perintah Workbox memudahkan untuk membangun dan berjalan, dengan mode wizard yang akan memeriksa pengembangan lokal Anda dan menyarankan konfigurasi {i>default<i} yang wajar yang dapat Anda gunakan bergerak maju:

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 runtime Workbox perpustakaan, mengimpor Workbox dari CDN resminya dan langsung mulai menggunakannya untuk {i>caching<i} runtime. Penggunaan ini berarti Anda tidak akan dapat memanfaatkan pra-cache (yang memerlukan integrasi waktu build), tetapi ini bagus untuk membuat prototipe dan mencoba strategi penyimpanan data dalam cache 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',
  })
);