Precaching adalah salah satu hal paling umum yang akan Anda lakukan di pekerja layanan, dan Workbox menawarkan banyak fleksibilitas terkait cara menyelesaikan tugas penting ini, apa pun alat build Workbox yang Anda pilih. Dalam panduan ini, Anda akan mempelajari cara melakukan precache aset menggunakan generateSW
dan injectManifest
, serta metode mana yang paling sesuai untuk project Anda.
Precaching dengan generateSW
generateSW
adalah cara termudah untuk melakukan precache aset di Workbox. Hal besar yang perlu diingat tentang generateSW
adalah Anda tidak menulis pekerja layanan sendiri—Anda meminta Workbox membuatkannya untuk Anda. Namun, Anda dapat memengaruhi perilakunya melalui berbagai opsi konfigurasi.
generateSW
melakukan berbagai hal secara default bergantung pada alat build yang Anda gunakan. Saat menggunakan workbox-webpack-plugin
, Anda tidak perlu menentukan opsi konfigurasi apa pun. Secara default, plugin akan meng-cache semua webpack yang disertakan dalam grafik dependensi dan menulis pekerja layanan bernama service-worker.js
ke direktori yang ditentukan oleh output.path
Di sisi lain, jika Anda menggunakan workbox-build
atau workbox-cli
, hanya aset HTML, CSS, dan JavaScript yang dibaca dari sistem file lokal yang akan disimpan dalam cache secara default. Dari segi konfigurasi, Anda harus menentukan swDest
dan opsi globDirectory
di generateSW
config agar precaching berfungsi. Kemungkinannya adalah, Anda juga perlu mengonfigurasi opsi tambahan yang memengaruhi perilaku pekerja layanan, jadi lihat dokumentasinya.
Precaching dengan injectManifest
Menggunakan injectManifest
tidak semudah menggunakan generateSW
, tetapi Anda mengorbankan kemudahan penggunaan untuk fleksibilitas yang lebih besar. Jika generateSW
menangani seluruh pembuatan pekerja layanan untuk Anda, injectManifest
akan menggunakan pekerja layanan yang Anda tulis sebagai sumbernya dan memasukkan daftar URL untuk melakukan pra-cache, sembari membiarkan sisa pekerja layanan Anda apa adanya.
Saat menggunakan injectManifest
, Anda bertanggung jawab untuk menyiapkan logika pra-cache. Saat memeriksa pekerja layanan input, injectManifest
akan mencari variabel self.__WB_MANIFEST
khusus dan menggantinya dengan manifes precache. Jika variabel ini tidak ada, injectManifest
akan menampilkan error.
Daftar entri dalam manifes precache dapat diubah dengan opsi konfigurasi tambahan.
Perbandingan berdampingan
Klik setiap tab di bawah ini untuk membandingkan penggunaan metode generateSW
dan injectManifest
:
Karena generateSW
menghasilkan pekerja layanan, Anda hanya perlu menentukan konfigurasi. Berikut adalah contoh yang menggunakan workbox-build
:
// build-sw.js
import {generateSW} from 'workbox-build';
generateSW({
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
Pekerja layanan kemudian dapat dibuat pada command line dengan Node:
node build-sw.js
Karena injectManifest
memerlukan pekerja layanan sumber, contoh yang layak secara minimal memerlukan file pekerja layanan sumber. Jika yang diperlukan hanyalah precaching, pekerja layanan input tersebut mungkin terlihat seperti ini:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);
Catat string self.__WB_MANIFEST
. Ini adalah placeholder yang diganti oleh Workbox dengan manifes precache. Berikut adalah konfigurasi yang valid untuk kasus penggunaan ini:
// build-sw.js
import {injectManifest} from 'workbox-build';
injectManifest({
swSrc: './src/sw.js',
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
injectManifest
lebih disarankan jika Anda memiliki persyaratan yang kompleks, seperti pemilihan rute lanjutan, strategi penyimpanan dalam cache kustom, atau hal lain yang tidak tercakup dalam opsi yang disediakan generateSW
.
Kesimpulan
Precaching di Workbox jauh lebih sederhana dibandingkan jika Anda harus mengelola precaching sendiri, terutama jika menyangkut aset berversi yang dikompilasi oleh pemaket. Namun, precaching bukan satu-satunya hal yang mungkin akan Anda lakukan di pekerja layanan. Sembari melanjutkan, Anda akan mempelajari teknik lain, seperti cache runtime.