jendela-kerja

Paket workbox-window adalah kumpulan modul yang dimaksudkan untuk berjalan di konteks window, yang adalah, di dalam laman web Anda. Fitur ini melengkapi workbox lainnya paket yang berjalan di pekerja layanan.

Fitur/sasaran utama workbox-window adalah:

Mengimpor dan menggunakan jendela workbox

Titik entri utama untuk paket workbox-window adalah class Workbox, dan Anda dapat mengimpornya ke dalam kode dari CDN kami atau menggunakan salah satu Alat pemaketan JavaScript.

Menggunakan CDN kami

Cara termudah untuk mengimpor class Workbox di situs Anda adalah dari CDN kami:

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

Perhatikan bahwa contoh ini menggunakan <script type="module"> dan pernyataan import untuk memuat class Workbox. Meskipun Anda mungkin berpikir bahwa Anda perlu mentranspilasi kode agar bekerja di {i>browser<i} lama, itu sebenarnya tidak diperlukan.

Semua browser utama yang mendukung pekerja layanan juga mendukung modul JavaScript native, jadi sangat penting menyajikan kode ini ke browser apa pun (browser lama akan mengabaikannya).

Memuat Workbox dengan pemaket JavaScript

Meskipun sama sekali tidak diperlukan alat untuk menggunakan workbox-window, jika infrastruktur pengembangan sudah mencakup pemaket seperti webpack atau Rollup yang berfungsi dengan dependensi npm, Anda dapat menggunakannya untuk memuat workbox-window.

Langkah pertama adalah instal workbox-window sebagai dependensi aplikasi Anda:

npm install workbox-window

Kemudian, di salah satu file JavaScript aplikasi, import kotak kerja dengan yang mereferensikan nama paket workbox-window:

import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}

Jika pemaket Anda mendukung pemisahan kode melalui pernyataan impor dinamis, Anda juga dapat memuat workbox-window secara kondisional, yang akan membantu mengurangi ukuran paket utama halaman Anda.

Meskipun workbox-window cukup kecil, tidak ada alasan untuk harus dimuat dengan logika aplikasi inti situs Anda, sebagai pekerja layanan, pada dasarnya, adalah peningkatan progresif.

if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}

Konsep pemaketan lanjutan

Tidak seperti paket Workbox yang berjalan di pekerja layanan, file build direferensikan oleh workbox-window main dan module kolom di package.json ditranspilasi ke ES5. Hal ini membuatnya kompatibel dengan membangun alat—beberapa di antaranya tidak memungkinkan developer mentranspilasi dependensi node_module-nya.

Jika sistem build memang memungkinkan Anda mentranspilasi dependensi (atau jika Anda tidak perlu melakukan transpilasi kode apa pun), maka lebih baik mengimpor file sumber, bukan paket itu sendiri.

Berikut adalah berbagai cara untuk mengimpor Workbox, beserta penjelasannya apa yang akan ditampilkan oleh setiap produk:

// Imports a UMD version with ES5 syntax
// (pkg.main: "build/workbox-window.prod.umd.js")
const {Workbox} = require('workbox-window');

// Imports the module version with ES5 syntax
// (pkg.module: "build/workbox-window.prod.es5.mjs")
import {Workbox} from 'workbox-window';

// Imports the module source file with ES2015+ syntax
import {Workbox} from 'workbox-window/Workbox.mjs';