{i>workbox-precaching

Salah satu fitur pekerja layanan adalah kemampuan untuk menyimpan sekumpulan file ke cache ketika pekerja layanan diinstal. Hal ini sering disebut sebagai "precaching", karena Anda meng-cache konten sebelum pekerja layanan digunakan.

Alasan utama untuk melakukan hal ini adalah memberikan kontrol kepada developer atas cache, yang berarti mereka dapat menentukan waktu dan durasi file di-cache serta menyalurkannya ke browser tanpa masuk ke jaringan, yang berarti developer dapat menggunakannya untuk membuat aplikasi web yang berfungsi secara offline.

Workbox menghilangkan bagian pekerjaan yang sulit dari pra-cache dengan menyederhanakan API dan memastikan aset didownload secara efisien.

Cara Kerja {i>workbox-precaching<i}

Saat aplikasi web dimuat untuk pertama kalinya, workbox-precaching akan melihat semua aset yang ingin Anda download, menghapus duplikat, dan menghubungkan peristiwa pekerja layanan yang relevan untuk mendownload dan menyimpan aset. URL yang sudah menyertakan informasi pembuatan versi (seperti hash konten) digunakan sebagai kunci cache tanpa modifikasi lebih lanjut. URL yang tidak menyertakan informasi pembuatan versi memiliki parameter kueri URL tambahan yang ditambahkan ke kunci cache-nya yang mewakili hash kontennya yang dihasilkan Workbox pada waktu build.

workbox-precaching melakukan semua ini selama peristiwa install pekerja layanan.

Ketika pengguna kemudian mengunjungi kembali aplikasi web Anda dan Anda memiliki pekerja layanan baru dengan aset pra-cache yang berbeda, workbox-precaching akan melihat daftar baru dan menentukan aset mana yang benar-benar baru dan aset mana yang perlu diupdate, berdasarkan revisinya. Setiap aset baru, atau revisi revisi, akan ditambahkan ke cache selama peristiwa install pekerja layanan baru.

Pekerja layanan baru ini tidak akan digunakan untuk merespons permintaan hingga peristiwa activate-nya dipicu. Dalam peristiwa activate, workbox-precaching akan memeriksa aset yang di-cache yang tidak lagi ada dalam daftar URL saat ini, dan menghapusnya dari cache.

workbox-precaching akan melakukan langkah-langkah ini setiap kali pekerja layanan diinstal dan diaktifkan, memastikan pengguna memiliki aset terbaru, dan hanya mendownload file yang telah diubah.

Menyajikan Respons Pra-cache

Memanggil precacheAndRoute() atau addRoute() akan membuat rute yang cocok dengan permintaan untuk URL yang telah di-cache.

Strategi respons yang digunakan dalam rute ini adalah cache-first: respons jaringan yang di-cache akan digunakan, kecuali jika respons yang di-cache tersebut tidak ada (karena beberapa error yang tidak terduga), dalam hal ini respons jaringan akan digunakan.

Urutan Anda memanggil precacheAndRoute() atau addRoute() itu penting. Anda biasanya perlu memanggilnya lebih awal dalam file pekerja layanan, sebelum mendaftarkan rute tambahan dengan registerRoute(). Jika Anda memanggil registerRoute() terlebih dahulu, dan rute tersebut cocok dengan permintaan masuk, strategi apa pun yang Anda tentukan dalam rute tambahan tersebut akan digunakan untuk merespons, bukan strategi cache-first yang digunakan oleh workbox-precaching.

Penjelasan Daftar Precache

workbox-precaching mengharapkan array objek dengan properti url dan revision. Array ini kadang-kadang disebut sebagai manifes precache:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

Daftar ini merujuk pada sekumpulan URL, masing-masing dengan informasi "revisi" masing-masing.

Untuk objek kedua dan ketiga dalam contoh di atas, properti revision ditetapkan ke null. Hal ini karena informasi revisi ada di URL itu sendiri, yang umumnya merupakan praktik terbaik untuk aset statis.

Objek pertama (/index.html) secara eksplisit menetapkan properti revisi, yang merupakan hash konten file yang dihasilkan secara otomatis. Tidak seperti resource JavaScript dan CSS, file HTML umumnya tidak dapat menyertakan informasi revisi di URL-nya. Jika tidak, link ke file ini di web akan rusak setiap kali konten halaman berubah.

Dengan meneruskan properti revisi ke precacheAndRoute(), Workbox dapat mengetahui kapan file telah berubah dan memperbaruinya.

Workbox dilengkapi dengan alat untuk membantu membuat daftar ini:

  • workbox-build: Ini adalah paket node yang dapat digunakan dalam tugas gulp atau sebagai skrip eksekusi npm.
  • workbox-webpack-plugin: pengguna webpack dapat menggunakan plugin ini.
  • workbox-cli: CLI kami juga dapat digunakan untuk membuat daftar aset dan menambahkannya ke pekerja layanan Anda.

Permintaan Masuk untuk File yang Di-cache

Satu hal yang secara otomatis akan dilakukan workbox-precaching adalah memanipulasi permintaan jaringan yang masuk untuk mencoba dan mencocokkan file yang telah di-cache sebelumnya. Hal ini akan mengakomodasi praktik umum di web.

Misalnya, permintaan untuk / biasanya dapat dipenuhi oleh file di /index.html.

Di bawah ini adalah daftar manipulasi yang dilakukan workbox-precaching secara default, dan cara mengubah perilaku tersebut.

Abaikan Parameter URL

Permintaan dengan parameter penelusuran dapat diubah untuk menghapus nilai tertentu, atau menghapus semua nilai.

Secara default, parameter penelusuran yang diawali dengan utm_ atau sama persis dengan fbclid akan dihapus, yang berarti bahwa permintaan untuk /about.html?utm_campaign=abcd akan dipenuhi dengan entri yang di-cache untuk /about.html.

Anda dapat mengabaikan kumpulan parameter penelusuran lain menggunakan ignoreURLParametersMatching:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

Indeks Direktori

Permintaan yang diakhiri dengan / secara default akan dicocokkan dengan entri dengan index.html yang ditambahkan ke bagian akhir. Ini berarti permintaan masuk untuk / dapat ditangani secara otomatis dengan /index.html entri yang di-cache sebelumnya.

Anda dapat mengubah ini menjadi sesuatu yang lain, atau menonaktifkannya sepenuhnya, dengan menyetel directoryIndex:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

Hapus URL

Jika permintaan gagal cocok dengan precache, kami akan menambahkan .html ke bagian akhir untuk mendukung URL "bersih" (alias URL "bagus"). Hal ini berarti permintaan seperti /about akan ditangani oleh entri yang di-precache untuk /about.html.

Anda dapat menonaktifkan perilaku ini dengan menyetel cleanUrls:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

Manipulasi Kustom

Jika ingin menentukan kecocokan kustom dari permintaan masuk ke aset yang telah di-cache, Anda dapat melakukannya dengan opsi urlManipulation. Ini harus menjadi callback yang menampilkan array yang berisi kemungkinan kecocokan.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

Penggunaan Lanjutan

Menggunakan PrecacheController Secara Langsung

Secara default, workbox-precaching akan menyiapkan pemroses install dan activate untuk Anda. Bagi developer yang familier dengan pekerja layanan, hal ini mungkin tidak diinginkan jika Anda memerlukan kontrol lebih besar.

Daripada menggunakan ekspor default, Anda dapat menggunakan PrecacheController secara langsung untuk menambahkan item ke pra-cache, menentukan kapan aset ini diinstal, dan kapan pembersihan harus dilakukan.

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

Membaca Aset yang Di-cache Secara Langsung

Ada kalanya Anda mungkin perlu membaca aset yang di-cache secara langsung, di luar konteks perutean yang dapat dijalankan oleh workbox-precaching secara otomatis. Misalnya, Anda mungkin ingin melakukan precache template HTML sebagian yang kemudian perlu diambil dan digunakan saat membuat respons penuh.

Secara umum, Anda dapat menggunakan Cache Storage API untuk mendapatkan objek Response yang di-cache, tetapi ada satu masalah: kunci cache URL yang perlu digunakan saat memanggil cache.match() mungkin berisi parameter pembuatan versi yang otomatis dibuat dan dikelola oleh workbox-precaching.

Untuk mendapatkan kunci cache yang benar, Anda dapat memanggil getCacheKeyForURL(), dengan meneruskan URL asli, lalu menggunakan hasilnya untuk menjalankan cache.match() pada cache yang sesuai.

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

Atau, jika yang Anda butuhkan hanyalah objek Response yang di-precache, Anda dapat memanggil matchPrecache(), yang akan otomatis menggunakan kunci cache yang benar dan mencari di cache yang benar:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

Bersihkan Pra-cache Lama

Sebagian besar rilis Workbox mempertahankan format yang sama untuk menyimpan data yang telah di-cache, dan precache yang dibuat oleh Workbox versi lama biasanya dapat digunakan sebagaimana adanya oleh rilis baru. Namun, jarang terjadi perubahan yang dapat menyebabkan gangguan pada penyimpanan precache yang mengharuskan pengguna yang ada untuk mendownload ulang semuanya, dan yang merender data yang sebelumnya di-cache menjadi tidak digunakan lagi. (Perubahan seperti itu terjadi di antara rilis Workbox v3 dan v4.)

Data yang sudah tidak digunakan ini seharusnya tidak mengganggu pengoperasian normal, tetapi berkontribusi terhadap penggunaan kuota penyimpanan Anda secara keseluruhan, dan akan lebih mudah bagi pengguna Anda jika menghapusnya secara eksplisit. Anda dapat melakukannya dengan menambahkan cleanupOutdatedCaches() ke pekerja layanan, atau menetapkan cleanupOutdatedCaches: true jika menggunakan salah satu alat build Workbox untuk menghasilkan pekerja layanan.

Menggunakan Integritas Subresource

Beberapa developer mungkin menginginkan jaminan tambahan yang ditawarkan oleh penerapan integritas subresource saat mengambil URL yang di-cache dari jaringan.

Properti opsional tambahan yang disebut integrity dapat ditambahkan ke entri apa pun dalam manifes precache. Jika disediakan, nilai ini akan digunakan sebagai nilai integrity saat membuat Request yang digunakan untuk mengisi cache. Jika ada ketidakcocokan, proses pra-caching akan gagal.

Menentukan entri manifes precache mana yang harus memiliki properti integrity dan mencari tahu nilai yang sesuai untuk digunakan, berada di luar cakupan alat build Workbox. Sebagai gantinya, developer yang ingin menggunakan fungsi ini harus mengubah manifes precache yang dihasilkan Workbox untuk menambahkan sendiri info yang sesuai. Opsi manifestTransform dalam konfigurasi alat build Workbox dapat membantu:

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

Jenis

CleanupResult

Properti

  • deletedCacheRequests

    string[]

InstallResult

Properti

  • notUpdatedURLs

    string[]

  • updatedURLs

    string[]

PrecacheController

Melakukan pra-cache aset yang efisien.

Properti

  • konstruktor

    void

    Buat PrecacheController baru.

    Fungsi constructor terlihat seperti: 

    (options?: PrecacheControllerOptions) => {...}

    • opsi

      PrecacheControllerOptions opsional

  • strategi

    Strategi

  • aktifkan

    void

    Menghapus aset yang tidak lagi ada di manifes precache saat ini. Panggil metode ini dari peristiwa pengaktifan pekerja layanan.

    Catatan: metode ini memanggil event.waitUntil() untuk Anda, sehingga Anda tidak perlu memanggilnya sendiri dalam pengendali peristiwa.

    Fungsi activate terlihat seperti: 

    (event: ExtendableEvent) => {...}

    • event

      ExtendableEvent

  • addToCacheList

    void

    Metode ini akan menambahkan item ke daftar precache, menghapus duplikat, dan memastikan informasi valid.

    Fungsi addToCacheList terlihat seperti: 

    (entries: (string | PrecacheEntry)[]) => {...}

    • entries

      (string | PrecacheEntry)[]

      Array entri yang akan di-precache.

  • createHandlerBoundToURL

    void

    Menampilkan fungsi yang mencari url dalam pra-cache (dengan mempertimbangkan informasi revisi akun), dan menampilkan Response yang sesuai.

    Fungsi createHandlerBoundToURL terlihat seperti: 

    (url: string) => {...}

    • url

      string

      URL yang telah di-cache yang akan digunakan untuk mencari Response.

  • getCacheKeyForURL

    void

    Menampilkan kunci cache yang digunakan untuk menyimpan URL tertentu. Jika URL tersebut tidak memiliki versi, seperti `/index.html', maka kunci cache akan menjadi URL asli dengan parameter penelusuran yang ditambahkan ke URL tersebut.

    Fungsi getCacheKeyForURL terlihat seperti: 

    (url: string) => {...}

    • url

      string

      URL yang kunci cache-nya ingin Anda cari.

    • akan menampilkan

      string

      URL berversi yang sesuai dengan kunci cache untuk URL asli, atau tidak ditentukan jika URL tersebut tidak di-precache.

  • getCachedURLs

    void

    Menampilkan daftar semua URL yang telah di-precache oleh pekerja layanan saat ini.

    Fungsi getCachedURLs terlihat seperti: 

    () => {...}

    • akan menampilkan

      string[]

      URL yang di-precache.

  • getIntegrityForCacheKey

    void

    Fungsi getIntegrityForCacheKey terlihat seperti: 

    (cacheKey: string) => {...}

    • cacheKey

      string

    • akan menampilkan

      string

      Integritas subresource yang terkait dengan kunci cache, atau tidak ditentukan jika tidak disetel.

  • getURLsToCacheKeys

    void

    Menampilkan pemetaan URL yang telah di-cache ke kunci cache yang sesuai, dengan mempertimbangkan informasi revisi untuk URL tersebut.

    Fungsi getURLsToCacheKeys terlihat seperti: 

    () => {...}

    • akan menampilkan

      Peta<stringstring>

      URL untuk menyimpan pemetaan kunci cache.

  • instal

    void

    Melakukan pra-cache aset baru dan yang diperbarui. Panggil metode ini dari peristiwa penginstalan pekerja layanan.

    Catatan: metode ini memanggil event.waitUntil() untuk Anda, sehingga Anda tidak perlu memanggilnya sendiri dalam pengendali peristiwa.

    Fungsi install terlihat seperti: 

    (event: ExtendableEvent) => {...}

    • event

      ExtendableEvent

  • matchPrecache

    void

    Ini berfungsi sebagai pengganti langsung untuk cache.match() dengan perbedaan berikut:

    • Ia tahu apa nama precache, dan hanya memeriksa di cache tersebut.
    • Alat ini memungkinkan Anda meneruskan URL "asli" tanpa parameter pembuatan versi, dan akan otomatis mencari kunci cache yang benar untuk revisi URL tersebut yang saat ini aktif.

    Mis., matchPrecache('index.html') akan menemukan respons pra-cache yang benar untuk pekerja layanan yang saat ini aktif, meskipun kunci cache yang sebenarnya adalah '/index.html?__WB_REVISION__=1234abcd'.

    Fungsi matchPrecache terlihat seperti: 

    (request: string | Request) => {...}

    • minta

      string | Permintaan

      Kunci (tanpa parameter revisi) yang harus dicari di precache.

    • akan menampilkan

      Promise<Response>

  • {i>precache<i}

    void

    Menambahkan item ke daftar precache, menghapus duplikat dan menyimpan file dalam cache" saat pekerja layanan diinstal.

    Metode ini dapat dipanggil beberapa kali.

    Fungsi precache terlihat seperti: 

    (entries: (string | PrecacheEntry)[]) => {...}

PrecacheEntry

Properti

  • integritas

    string opsional

  • revisi

    string opsional

  • url

    string

PrecacheFallbackPlugin

PrecacheFallbackPlugin memungkinkan Anda menentukan respons "penggantian offline" untuk digunakan saat strategi tertentu tidak dapat menghasilkan respons.

Hal ini dilakukan dengan mengintersep callback plugin handlerDidError dan menampilkan respons yang telah di-precache, sehingga otomatis memperhitungkan parameter revisi yang diharapkan.

Instance default akan digunakan, kecuali jika Anda meneruskan instance PrecacheController ke konstruktor secara eksplisit. Secara umum, sebagian besar developer akan menggunakan default.

Properti

  • konstruktor

    void

    Membuat PrecacheFallbackPlugin baru dengan fallbackURL terkait.

    Fungsi constructor terlihat seperti: 

    (config: object) => {...}

    • config

      objek

      • fallbackURL

        string

        URL yang telah di-cache untuk digunakan sebagai penggantian jika strategi terkait tidak dapat membuat respons.

      • precacheController

        PrecacheController opsional

PrecacheRoute

Subclass workbox-routing.Route yang mengambil instance workbox-precaching.PrecacheController dan menggunakannya untuk mencocokkan permintaan masuk dan menangani respons pengambilan dari precache.

Properti

PrecacheRouteOptions

Properti

  • cleanURLs

    boolean opsional

  • directoryIndex

    string opsional

  • ignoreURLParametersMatching

    RegExp[] opsional

  • urlManipulation

    urlManipulation opsional

PrecacheStrategy

Implementasi workbox-strategies.Strategy yang dirancang khusus agar berfungsi dengan workbox-precaching.PrecacheController untuk meng-cache dan mengambil aset yang di-cache.

Catatan: instance class ini dibuat secara otomatis saat membuat PrecacheController; umumnya tidak perlu membuatnya sendiri.

Properti

  • konstruktor

    void

    Fungsi constructor terlihat seperti: 

    (options?: PrecacheStrategyOptions) => {...}

    • opsi

      PrecacheStrategyOptions opsional

  • cacheName

    string

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • plugin

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    WorkboxPlugin

  • _awaitSelesai

    void

    Fungsi _awaitComplete terlihat seperti: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • minta

      Permintaan

    • event

      ExtendableEvent

    • akan menampilkan

      Promise<void>

  • _getResponse

    void

    Fungsi _getResponse terlihat seperti: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • akan menampilkan

      Promise<Response>

  • _handleFetch

    void

    Fungsi _handleFetch terlihat seperti: 

    (request: Request, handler: StrategyHandler) => {...}

    • akan menampilkan

      Promise<Response>

  • _handleInstall

    void

    Fungsi _handleInstall terlihat seperti: 

    (request: Request, handler: StrategyHandler) => {...}

    • akan menampilkan

      Promise<Response>

  • handle

    void

    Menjalankan strategi permintaan dan menampilkan Promise yang akan di-resolve dengan Response, yang memanggil semua callback plugin yang relevan.

    Saat instance strategi didaftarkan dengan Workbox workbox-routing.Route, metode ini akan otomatis dipanggil saat rute cocok.

    Atau, metode ini dapat digunakan di pemroses FetchEvent mandiri dengan meneruskannya ke event.respondWith().

    Fungsi handle terlihat seperti: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opsi

      FetchEvent | HandlerCallbackOptions

      FetchEvent atau objek dengan properti yang tercantum di bawah ini.

    • akan menampilkan

      Promise<Response>

  • handleAll

    void

    Serupa dengan workbox-strategies.Strategy~handle, tetapi bukan hanya menampilkan Promise yang di-resolve ke Response, tetapi akan menampilkan tuple promise [response, done], dengan yang pertama (response) setara dengan yang ditampilkan handle(), dan yang kedua adalah Promise yang akan di-resolve setelah promise yang ditambahkan ke event.waitUntil() sebagai bagian dari pelaksanaan strategi telah selesai.

    Anda dapat menunggu promise done untuk memastikan pekerjaan tambahan apa pun yang dilakukan oleh strategi (biasanya menyimpan respons dalam cache) berhasil diselesaikan.

    Fungsi handleAll terlihat seperti: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opsi

      FetchEvent | HandlerCallbackOptions

      FetchEvent atau objek dengan properti yang tercantum di bawah ini.

    • akan menampilkan

      [Promise<Response>, Promise<void>]

      Tuple dari [response, complete], promise yang dapat digunakan untuk menentukan kapan respons di-resolve, serta saat pengendali telah menyelesaikan semua tugasnya.

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

Jenis

fungsi

Parameter

  • { url }

    objek

    • url

      URL

Hasil

  • URL[]

Metode

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

Menambahkan plugin ke strategi precaching.

Parameter

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

Tambahkan pemroses fetch ke pekerja layanan yang akan merespons [permintaan jaringan]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests dengan aset yang telah di-cache.

Permintaan untuk aset yang tidak di-cache, FetchEvent tidak akan direspons, sehingga peristiwa dapat diteruskan ke pemroses peristiwa fetch lainnya.

Parameter

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Menambahkan pemroses peristiwa activate yang akan membersihkan precache yang tidak kompatibel yang dibuat oleh Workbox versi lama.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Fungsi helper yang memanggil PrecacheController#createHandlerBoundToURL pada instance PrecacheController default.

Jika Anda membuat PrecacheController sendiri, panggil PrecacheController#createHandlerBoundToURL pada instance tersebut, bukan menggunakan fungsi ini.

Parameter

  • url

    string

    URL yang telah di-cache yang akan digunakan untuk mencari Response.

Hasil

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

Mengambil URL, dan menampilkan URL yang sesuai yang dapat digunakan untuk mencari entri dalam precache.

Jika URL relatif disediakan, lokasi file pekerja layanan akan digunakan sebagai basis.

Untuk entri yang di-precache tanpa informasi revisi, kunci cache akan sama dengan URL asli.

Untuk entri yang di-precache dengan informasi revisi, kunci cache akan berupa URL asli dengan penambahan parameter kueri yang digunakan untuk melacak info revisi.

Parameter

  • url

    string

    URL yang kunci cache-nya akan dicari.

Hasil

  • string | tidak ditentukan

    Kunci cache yang sesuai dengan URL tersebut.

matchPrecache()

workbox-precaching.matchPrecache(
  request: string | Request,
)

Fungsi helper yang memanggil PrecacheController#matchPrecache pada instance PrecacheController default.

Jika Anda membuat PrecacheController sendiri, panggil PrecacheController#matchPrecache pada instance tersebut, bukan menggunakan fungsi ini.

Parameter

  • minta

    string | Permintaan

    Kunci (tanpa parameter revisi) yang harus dicari di precache.

Hasil

  • Promise<Response | undefined>

precache()

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

Menambahkan item ke daftar precache, menghapus duplikat dan menyimpan file dalam cache" saat pekerja layanan diinstal.

Metode ini dapat dipanggil beberapa kali.

Harap diperhatikan: Metode ini tidak akan menyajikan file yang di-cache untuk Anda. Alat ini hanya melakukan {i>precache<i} file. Untuk merespons permintaan jaringan, Anda memanggil workbox-precaching.addRoute.

Jika memiliki satu array file untuk melakukan pra-cache, Anda cukup memanggil workbox-precaching.precacheAndRoute.

Parameter

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

Metode ini akan menambahkan entri ke daftar precache dan menambahkan rute untuk merespons peristiwa pengambilan.

Ini adalah metode praktis yang akan memanggil workbox-precaching.precache dan workbox-precaching.addRoute dalam satu panggilan.

Parameter