Workbox cukup fleksibel untuk mengakomodasi hampir semua proses build project. Artinya, ada lebih dari satu cara untuk menggunakan Workbox, sehingga Anda dapat memilih integrasi yang tepat untuk project. Terlepas dari cara Anda mengintegrasikan dengan Workbox, berbagai alat menawarkan API yang serupa.
generateSW
versus injectManifest
Anda akan mengandalkan salah satu dari dua metode inti alat build Workbox: generateSW
atau injectManifest
. Mana yang harus Anda gunakan bergantung pada seberapa banyak fleksibilitas yang Anda butuhkan. generateSW
memprioritaskan kemudahan penggunaan dan kesederhanaan dengan mengorbankan fleksibilitas, sehingga Anda dapat mendeklarasikan serangkaian opsi konfigurasi dan memberi Anda pekerja layanan yang berfungsi penuh sebagai gantinya.
injectManifest
mendukung fleksibilitas yang lebih besar dengan mengorbankan beberapa kemudahan, karena Anda pada akhirnya akan menulis sendiri kode untuk pekerja layanan Anda, dengan injectManifest
yang memberikan manifes precache yang dapat digunakan oleh metode precache Workbox.
Kapan menggunakan generateSW
Sebaiknya gunakan generateSW
jika:
- Anda perlu meng-cache file yang terkait dengan proses build, termasuk file yang URL-nya berisi hash yang mungkin tidak Anda ketahui sebelumnya.
- Anda memiliki kebutuhan penyimpanan cache runtime yang sederhana, yang dapat dikonfigurasi melalui opsi
generateSW
.
Kapan tidak menggunakan generateSW
Di sisi lain, Anda tidak boleh menggunakan generateSW
jika:
- Anda ingin menggunakan fitur pekerja layanan lainnya (seperti Web Push).
- Anda memerlukan fleksibilitas tambahan untuk mengimpor skrip tambahan atau menggunakan modul Workbox tertentu guna menyesuaikan pekerja layanan dengan kebutuhan aplikasi Anda.
Kapan menggunakan injectManifest
Sebaiknya gunakan injectManifest
jika:
- Anda ingin melakukan precache file, tetapi ingin menulis pekerja layanan Anda sendiri.
- Anda memiliki kebutuhan perutean atau cache yang kompleks yang tidak dapat dinyatakan melalui opsi konfigurasi
generateSW
- Anda ingin menggunakan API lain dalam pekerja layanan (seperti Web Push).
injectManifest
berbeda dengan generateSW
karena mengharuskan Anda menentukan file pekerja layanan sumber. Dalam alur kerja ini, file pekerja layanan sumber harus memiliki string self.__WB_MANIFEST
khusus di dalamnya sehingga injectManifest
dapat menggantikannya dengan manifes precache.
Kapan tidak menggunakan injectManifest
Sebaiknya jangan gunakan injectManifest
jika:
- Anda tidak ingin menggunakan precaching di pekerja layanan.
- persyaratan pekerja layanan kita cukup sederhana untuk tercakup oleh
generateSW
dan opsi konfigurasinya yang dapat disediakan. - Anda memprioritaskan kemudahan penggunaan daripada fleksibilitas.
Menggunakan alat Build Workbox
Jika mencari cara yang tidak bergantung pada framework untuk menggunakan Workbox dalam proses build, Anda memiliki tiga opsi:
workbox-cli
workbox-build
. alat command line.- Menggunakan pemaket (seperti
workbox-webpack-plugin
).
Setiap alat build ini menawarkan mode generateSW
dan injectManifest
, dengan serangkaian opsi yang serupa. Ini semua adalah pilihan yang baik jika Anda tidak ingin mengaitkan pekerja layanan yang didukung Workbox ke framework tertentu. Untuk mengetahui opsi mana yang paling sesuai, mari kita lihat sekilas masing-masing.
workbox-cli
Jika Anda mencari penghalang masuk serendah mungkin dengan Workbox, CLI adalah solusi yang tepat:
npm install workbox-cli --save-dev
Untuk mulai menggunakan CLI, jalankan wizard dengan npx workbox wizard
. Wizard akan mengajukan beberapa pertanyaan, dan jawaban atas pertanyaan tersebut akan digunakan untuk menyiapkan project dengan file workbox-config.js
yang dapat Anda sesuaikan dengan kebutuhan Anda. Tampilan tersebut akan terlihat seperti:
// A config for `generateSW`
export default {
globDirectory: 'dist/',
globPatterns: [
'**/*.{css,woff2,png,svg,jpg,js}'
],
swDest: 'dist/sw.js'
};
Setelah file konfigurasi dibuat, CLI dapat menjalankan metode generateSW
atau injectManifest
untuk Anda. Teks bantuan CLI ini berisi informasi lebih lanjut dan contoh penggunaan.
workbox-build
workbox-cli
adalah wrapper di sekitar modul workbox-build
, dan alternatifnya adalah menggunakan workbox-build
secara langsung. Saat menggunakan workbox-build
, alih-alih menentukan opsi menggunakan file workbox-config.js
, Anda akan menggunakan metode generateSW
atau injectManifest
secara langsung sebagai bagian dari skrip Node, yang meneruskan kumpulan opsi yang serupa:
// build-sw.mjs
import {generateSW} from 'workbox-build';
generateSW({
globDirectory: 'dist/',
globPatterns: [
'**/*.{css,woff2,png,svg,jpg,js}'
],
swDest: 'dist/sw.js'
});
Pada contoh di atas, workbox-build
akan menulis pekerja layanan yang dihasilkan ke direktori dist
saat perintah node build-sw.mjs
dijalankan.
Menggunakan pemaket
Berbagai pemaket memiliki plugin Workbox sendiri, tetapi satu-satunya pemaket yang secara resmi didukung oleh tim Workbox adalah webpack, melalui workbox-webpack-plugin
. Seperti workbox-cli
dan workbox-build
, workbox-webpack-plugin
akan menjalankan metode generateSW
atau injectManifest
, kecuali plugin menggunakan huruf besar untuk nama metode tersebut sebagai GenerateSW
atau InjectManifest
. Jika tidak, penggunaannya akan mirip dengan workbox-build
:
// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';
export default {
// Other webpack config options omitted for brevity...
plugins: [
new GenerateSW({
swDest: './dist/sw.js'
})
]
};
Opsi yang Anda teruskan ke GenerateSW
atau InjectManifest
tidak sama dengan generateSW
atau injectManifest
, tetapi ada tumpang-tindih yang signifikan. Secara khusus, Anda tidak perlu—atau dapat Anda—menentukan opsi globDirectory
untuk GenerateSW
karena webpack sudah mengetahui di mana aset produksi Anda dipaketkan.
Menggunakan framework
Semua yang dibahas di tahap ini berfokus pada penggunaan Workbox, terlepas dari preferensi framework seseorang. Namun, Workbox dapat digunakan dalam framework tertentu jika membuat pengembangan menjadi lebih mudah. Misalnya, create-react-app
dikirimkan dengan Workbox secara default. Berbagai integrasi framework dengan Workbox akan dibahas nanti dalam artikel berikutnya.
Perlu diperhatikan bahwa integrasi Workbox khusus framework ini dapat membatasi kemampuan Anda untuk mengonfigurasi Workbox sesuai keinginan. Dalam kasus seperti ini, Anda selalu dapat kembali ke metode yang dibahas di sini.
Bagaimana jika saya tidak memiliki proses build?
Dokumen ini mengasumsikan proyek Anda memiliki proses pembangunan, tetapi sebenarnya proyek Anda mungkin tidak. Jika sesuai dengan situasi Anda, Anda masih dapat menggunakan Workbox dengan modul workbox-sw
. Dengan workbox-sw
, Anda dapat memuat runtime Workbox dari CDN atau secara lokal, dan membuat pekerja layanan Anda sendiri.
Kesimpulan
Fleksibilitas Workbox memastikan bahwa Anda dapat menggunakannya di hampir semua project, terlepas dari preferensi framework atau toolchain-nya. Semua cara ini akan memungkinkan Anda menyelesaikan precaching dan caching runtime menggunakan beberapa metode, sekaligus memungkinkan fleksibilitas yang lebih besar untuk membangun pekerja layanan dengan fitur yang lebih canggih saat diperlukan.