workbox-cli

Antarmuka command line Workbox (terdapat dalam paket workbox-cli) terdiri dari program Node.js yang disebut workbox, yang dapat dijalankan dari lingkungan command line yang kompatibel dengan UNIX di Windows, macOS. Di balik layar, workbox-cli menggabungkan modul build-box-build, dan memberikan cara mudah untuk mengintegrasikan Workbox ke dalam proses build command line, dengan konfigurasi yang fleksibel.

Menginstal CLI

Untuk menginstal CLI dengan Node, jalankan perintah berikut di terminal Anda:

npm install workbox-cli --global

Mode CLI

CLI ini memiliki empat mode berbeda:

  • wizard: Panduan langkah demi langkah untuk menyiapkan Workbox untuk project Anda.
  • generateSW: Membuat pekerja layanan lengkap untuk Anda.
  • injectManifest: Memasukkan aset untuk melakukan pra-cache ke project Anda.
  • copyLibraries: Menyalin library Workbox ke direktori.

wizard

Wizard Workbox mengajukan serangkaian pertanyaan tentang penyiapan direktori lokal dan file mana yang ingin di-precache. Jawaban Anda akan digunakan untuk menghasilkan file konfigurasi yang kemudian dapat digunakan saat berjalan dalam mode generateSW.

Sebagian besar developer hanya perlu menjalankan wizard workbox sekali, dan Anda bebas menyesuaikan file konfigurasi awal yang dihasilkan secara manual, dengan menggunakan opsi konfigurasi build yang didukung.

Untuk memulai wizard, jalankan:

npx workbox-cli wizard

Screenshot wizard Workbox CLI

generateSW

Anda dapat menggunakan Workbox CLI untuk membuat pekerja layanan lengkap menggunakan file konfigurasi (seperti file yang dihasilkan oleh wizard.)

Cukup jalankan perintah berikut:

npx workbox-cli generateSW path/to/config.js

Developer yang puas dengan kemampuan precaching dan cache runtime bawaan Workbox, dan tidak perlu menyesuaikan perilaku pekerja layanan, direkomendasikan untuk menggunakan mode generateSW.

Kapan menggunakan generateSW

  • Anda ingin melakukan {i>precache<i} file.
  • Anda memiliki kebutuhan penyimpanan cache runtime yang sederhana.

Kapan generateSW TIDAK harus digunakan

  • Anda ingin menggunakan fitur Service Worker lainnya (yaitu Web Push).
  • Anda ingin mengimpor skrip tambahan, atau menambahkan logika tambahan untuk strategi caching kustom.

injectManifest

Developer yang menginginkan kontrol lebih besar atas file pekerja layanan akhir mereka dapat menggunakan mode injectManifest. Mode ini mengasumsikan bahwa Anda sudah memiliki file pekerja layanan (lokasi yang ditentukan dalam config.js).

Saat dijalankan, workbox injectManifest akan mencari string tertentu (precacheAndRoute(self.__WB_MANIFEST) secara default) dalam file pekerja layanan sumber. Fungsi ini menggantikan array kosong dengan daftar URL untuk melakukan precache dan menulis file pekerja layanan ke lokasi tujuannya, berdasarkan opsi konfigurasi di config.js. Sisa kode dalam pekerja layanan sumber tidak disentuh.

Anda dapat menggunakan Workbox dalam mode ini seperti ini:

npx workbox-cli injectManifest path/to/config.js

Kapan menggunakan injectManifest

  • Anda menginginkan kontrol lebih besar atas pekerja layanan.
  • Anda ingin melakukan {i>precache<i} file.
  • Anda perlu menyesuaikan pemilihan rute dan strategi.
  • Anda ingin menggunakan pekerja layanan dengan fitur platform lainnya (mis. Web Push).

Kapan injectManifest TIDAK harus digunakan

  • Anda menginginkan jalur termudah untuk menambahkan pekerja layanan ke situs Anda.

copyLibraries

Mode ini berguna jika Anda ingin menggunakan injectManifest dan ingin menggunakan file library Workbox yang dihosting di asal Anda sendiri, bukan menggunakan CDN.

Anda hanya perlu menjalankannya dengan jalur untuk menulis file ke:

npx workbox-cli copyLibraries third_party/workbox/

Integrasi Proses Build

Mengapa Workbox perlu Berintegrasi dengan Proses Build Saya?

Project Workbox berisi sejumlah library yang bekerja sama untuk mendukung pekerja layanan aplikasi web Anda. Agar dapat menggunakan library tersebut secara efektif, Workbox perlu diintegrasikan ke dalam proses build aplikasi web Anda. Hal ini memastikan pekerja layanan dapat melakukan pra-cache semua konten penting aplikasi web Anda secara efisien, dan menjaga konten tersebut tetap terbaru.

Apakah workbox-cli adalah Pilihan yang Tepat untuk Proses Build Saya?

Jika Anda sudah memiliki proses build yang didasarkan sepenuhnya pada skrip npm, workbox-cli adalah pilihan yang baik.

Jika saat ini Anda menggunakan webpack sebagai alat build, menggunakan workbox-webback-plugin adalah pilihan yang lebih baik.

Jika saat ini Anda menggunakan Gulp, Grunt, atau alat build berbasis Node.js lainnya, mengintegrasikan workbox-build ke dalam skrip build adalah pilihan yang lebih baik.

Jika Anda tidak memiliki proses build sama sekali, Anda harus membuatnya sebelum menggunakan Workbox untuk melakukan precache aset apa pun. Jangan lupa menjalankan workbox-cli secara manual karena dapat rentan mengalami error. Jika Anda lupa menjalankannya, konten lama dapat ditayangkan kepada pengunjung yang kembali tanpa perlu menjalankannya.

Penyiapan dan Konfigurasi

Setelah menginstal workbox-cli sebagai dependensi pengembangan untuk project lokal, Anda dapat menambahkan panggilan ke workbox di akhir skrip npm proses build yang ada:

Dari package.json:

{
  "scripts": {
    "build": "my-build-script && workbox <mode> <path/to/config.js>"
  }
}

Ganti <mode> dengan generateSW atau injectManifest (bergantung pada kasus penggunaan Anda) dan <path/to/config.js> dengan jalur ke opsi konfigurasi Anda. Konfigurasi Anda mungkin telah dibuat secara otomatis oleh workbox wizard atau disesuaikan secara manual.

Konfigurasi

Opsi yang digunakan oleh generateSW

Set lengkap opsi konfigurasi dapat ditemukan di dokumentasi referensi.

Opsi yang digunakan oleh injectManifest

Set lengkap opsi konfigurasi dapat ditemukan di dokumentasi referensi.