Precaching dengan Workbox

Precaching adalah salah satu hal paling umum yang akan Anda lakukan di pekerja layanan, dan Workbox menawarkan banyak fleksibilitas tentang cara Anda dapat menyelesaikan tugas penting ini, terlepas dari alat build Workbox mana yang Anda pilih. Dalam panduan ini, Anda akan mempelajari cara melakukan pra-cache aset menggunakan generateSW dan injectManifest, serta metode mana yang paling cocok untuk project Anda.

Precaching dengan generateSW

generateSW adalah cara termudah untuk melakukan pra-cache aset di Workbox. Hal besar yang perlu diingat tentang generateSW adalah bahwa Anda tidak menulis pekerja layanan Anda sendiri—Anda meminta Workbox untuk membuat pekerja layanan 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 melakukan precache semua yang disertakan webpack dalam grafik dependensinya 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 di-pra-cache secara default. Terkait konfigurasi, Anda harus menentukan swDest dan opsi globDirectory di konfigurasi generateSW agar precaching berfungsi. Kemungkinannya adalah, Anda juga ingin mengonfigurasi opsi tambahan yang memengaruhi perilaku pekerja layanan Anda, jadi baca dokumentasinya.

Peringatan: Jika terlalu banyak aset dalam project Anda yang di-pra-cache 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-pra-cache, 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 mengambil pekerja layanan yang Anda tulis sebagai sumbernya dan memasukkan daftar URL untuk melakukan pra-cache, sedangkan pekerja layanan lainnya apa adanya.

Saat menggunakan injectManifest, Anda bertanggung jawab untuk menyiapkan logika precaching. Saat memeriksa pekerja layanan input Anda, 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 menjadi sesuatu yang berbeda dari self.__WB_MANIFEST, Anda dapat melakukannya dengan menentukan opsi injectionPoint dalam konfigurasinya.

Daftar entri dalam manifes pra-cache dapat diubah dengan opsi konfigurasi tambahan.

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

Perbandingan per aspek

Klik setiap tab di bawah 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 dibangun pada command line dengan Node:

node build-sw.js

Karena injectManifest memerlukan pekerja layanan sumber, contoh yang layak minimal memerlukan file pekerja layanan sumber. Jika yang diperlukan hanyalah precache, pekerja layanan input tersebut mungkin terlihat seperti ini:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Perhatikan string self.__WB_MANIFEST. Ini adalah placeholder yang diganti 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 oleh 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 aset berversi yang dikompilasi oleh pemaket bermasalah. Namun, precaching bukanlah satu-satunya hal yang akan Anda lakukan di pekerja layanan. Sambil melanjutkan, Anda akan mempelajari teknik lain, seperti caching runtime.