Precaching dengan Workbox

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.

Peringatan: Jika terlalu banyak aset dalam project Anda yang di-precache dengan setelan default, gunakan salah satu opsi glob untuk mengecualikan resource dalam konfigurasi generateSW. Saat menggunakan workbox-webpack-plugin, baca dokumentasi GenerateSW plugin untuk mengetahui cara mencegah aset yang tidak diinginkan di-pracache, karena konfigurasinya berbeda dengan generateSW.

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.

Catatan: Jika perlu mengubah string yang dicari injectManifest ke sesuatu yang berbeda dari self.__WB_MANIFEST, Anda dapat melakukannya dengan menentukan opsi injectionPoint dalam konfigurasinya.

Daftar entri dalam manifes precache dapat diubah dengan opsi konfigurasi tambahan.

Perhatian: Berbeda dengan generateSW, injectManifest tidak akan otomatis memaketkan runtime Workbox untuk Anda. Untuk melihat cara mengelolanya dalam kasus penggunaan yang mengandalkan injectManifest, lihat perbandingan berdampingan di bawah.

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.

Perhatian: Contoh di atas mengasumsikan bahwa Anda berada di lingkungan Node yang secara native mendukung modul ES tanpa langkah build. Pada versi node sebelum versi 16, Anda mungkin harus menetapkan flag untuk mengaktifkan dukungan modul ES, atau mengandalkan semantik CommonJS menggunakan module.exports.

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.