Cara-cara Workbox

Workbox cukup fleksibel untuk mengakomodasi hampir semua proses build project. Artinya ada lebih dari satu cara untuk menggunakan Workbox, yang memungkinkan Anda memilih integrasi yang tepat untuk proyek Anda. Terlepas dari cara Anda berintegrasi dengan Workbox, berbagai alat menawarkan API yang serupa.

generateSW vs. 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 memberikan pekerja layanan yang berfungsi penuh sebagai gantinya.

injectManifest mendukung fleksibilitas yang lebih besar dengan mengorbankan beberapa kemudahan, karena Anda pada akhirnya akan menulis kode untuk pekerja layanan Anda sendiri, dengan injectManifest menyediakan manifes precache yang dapat digunakan oleh metode precaching Workbox.

Kapan menggunakan generateSW

Sebaiknya gunakan generateSW jika:

  • Anda ingin melakukan pra-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 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 untuk menyesuaikan pekerja layanan sesuai 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 pemilihan rute atau penyimpanan cache yang kompleks yang tidak dapat dinyatakan melalui opsi konfigurasi generateSW
  • Anda ingin menggunakan API lain di pekerja layanan Anda (seperti Web Push).

injectManifest berbeda dengan generateSW karena mengharuskan Anda menentukan file pekerja layanan sumber. Di alur kerja ini, file pekerja layanan sumber perlu memiliki string self.__WB_MANIFEST khusus di dalamnya sehingga injectManifest dapat menggantinya dengan manifes precache.

Kapan tidak menggunakan injectManifest

Anda tidak boleh menggunakan injectManifest jika:

  • Anda tidak ingin menggunakan precaching di pekerja layanan Anda.
  • persyaratan pekerja layanan kami cukup sederhana untuk dicakup oleh generateSW dan opsi konfigurasinya.
  • Anda lebih memprioritaskan kemudahan penggunaan daripada fleksibilitas.

Menggunakan alat Build Workbox

Jika Anda mencari cara agnostik framework untuk menggunakan Workbox dalam proses build, Anda memiliki tiga opsi:

  1. workbox-cli
  2. workbox-build baris perintah.
  3. Menggunakan bundler (seperti workbox-webpack-plugin).

Masing-masing alat build ini menawarkan mode generateSW dan injectManifest, dengan kumpulan opsi yang serupa. Semua ini adalah pilihan yang bagus saat 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 opsi tersebut.

workbox-cli

Jika Anda mencari pembatas entri serendah mungkin dengan Workbox, CLI cocok untuk Anda:

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. Hasilnya 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 Anda dibuat, CLI dapat menjalankan metode generateSW atau injectManifest untuk Anda. Teks bantuan CLI memiliki lebih banyak informasi dan contoh penggunaan.

workbox-build

workbox-cli adalah wrapper di sekitar modul workbox-build, dan alternatifnya adalah dengan menggunakan workbox-build secara langsung. Saat menggunakan workbox-build, alih-alih menetapkan 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 bundler

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 mengkapitalisasikan 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 juga tidak perlu—atau tidak—menentukan opsi globDirectory untuk GenerateSW karena webpack sudah mengetahui tempat aset produksi digabungkan.

Menggunakan framework

Semua yang dibahas di poin ini berfokus pada penggunaan Workbox terlepas dari preferensi kerangka kerja seseorang. Namun, Anda dapat menggunakan Workbox dalam framework tertentu jika membuat proses pengembangan menjadi lebih mudah. Misalnya, create-react-app dikirimkan dengan Workbox secara default. Integrasi framework yang berbeda dengan Workbox akan dibahas nanti di artikel selanjutnya.

Perlu dicatat bahwa integrasi khusus kerangka kerja dari Workbox ini dapat membatasi kemampuan Anda untuk mengonfigurasi Workbox sesuai keinginan Anda. Dalam kasus seperti ini, Anda selalu bisa kembali ke metode yang dibahas di sini.

Bagaimana jika saya tidak memiliki proses build?

Dokumen ini mengasumsikan proyek Anda memiliki proses build, tetapi proyek Anda sebenarnya tidak demikian. Jika hal tersebut 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, apa pun 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 jika diperlukan.