Cara-cara Workbox

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:

  1. workbox-cli
  2. workbox-build. alat command line.
  3. 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.