{i>workbox-precaching

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

Alasan utama untuk melakukannya adalah karena memberi developer kontrol atas {i>cache<i}, yang berarti mereka dapat menentukan kapan dan berapa lama file di-{i>cache<i} menyajikannya ke {i>browser<i} tanpa masuk ke jaringan, artinya dapat digunakan untuk membuat aplikasi web yang bekerja secara {i>offline<i}.

Workbox melakukan banyak pekerjaan berat dari pra-cache dengan menyederhanakan API dan memastikan aset didownload secara efisien.

Cara Kerja Pra-penyimpanan Workbox

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 kolom tambahan Parameter kueri URL yang ditambahkan ke kunci cache yang menunjukkan hash kontennya yang dihasilkan Workbox pada waktu build.

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

Ketika nanti pengguna mengunjungi kembali aplikasi web Anda dan Anda memiliki pekerja layanan baru dengan berbagai aset yang telah disimpan sebelumnya, workbox-precaching akan melihat daftar baru dan menentukan aset mana yang benar-benar baru dan aset mana yang ada perlu diperbarui, berdasarkan revisinya. Setiap aset baru, atau revisi pembaruan, akan ditambahkan ke cache selama peristiwa install pekerja layanan baru.

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

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

Menayangkan Respons yang Di-cache Sebelumnya

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

Strategi respons yang digunakan di rute ini adalah cache-first: respons yang di-cache sebelumnya 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 pemanggilan precacheAndRoute() atau addRoute() penting. Biasanya, Anda ingin memanggilnya lebih awal di file pekerja layanan, sebelum mendaftarkan rute tambahan apa pun dengan registerRoute(). Jika Anda memanggil registerRoute() terlebih dahulu, dan rute tersebut cocok dengan permintaan yang masuk, strategi apa pun yang Anda tentukan di rute tambahan tersebut akan digunakan untuk merespons, bukan strategi cache-first yang digunakan oleh workbox-precaching.

Penjelasan Daftar Pramuat

workbox-precaching mengharapkan array objek dengan properti url dan revision. Array ini terkadang disebut sebagai manifes pra-cache:

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 mereferensikan kumpulan URL, masing-masing dengan informasi "revisi" sendiri.

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

Objek pertama (/index.html) secara eksplisit menetapkan properti revisi, yaitu {i>hash<i} yang dibuat secara otomatis dari isi file. Tidak seperti resource JavaScript dan CSS, file HTML umumnya tidak dapat menyertakan informasi revisi dalam 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 ketika file telah diubah 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 run 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 akan dilakukan workbox-precaching secara otomatis adalah memanipulasi permintaan jaringan yang masuk untuk mencoba mencocokkan file yang di-cache sebelumnya. Ini 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 bagaimana Anda dapat mengubah perilaku tersebut.

Mengabaikan 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, artinya permintaan untuk /about.html?utm_campaign=abcd akan dipenuhi dengan entri pra-cache untuk /about.html.

Anda dapat mengabaikan kumpulan parameter penelusuran yang berbeda 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 / akan secara default dicocokkan dengan entri yang ditambahi index.html hingga akhir. Ini berarti permintaan masuk untuk / dapat secara otomatis ditangani dengan pra-cache entri /index.html.

Anda dapat mengubahnya menjadi yang lain, atau menonaktifkannya sepenuhnya, dengan menetapkan 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,
  }
);

URL bersih

Jika permintaan gagal cocok dengan precache, kami akan menambahkan .html di bagian akhir untuk mendukung "bersih" URL (alias URL "cantik"). Ini berarti permintaan seperti /about akan ditangani oleh entri yang telah di-pra-cache untuk /about.html.

Anda dapat menonaktifkan perilaku ini dengan menetapkan 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-pracache, Anda dapat melakukannya dengan opsi urlManipulation. Ini harus berupa callback yang mengembalikan larik 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 sudah terbiasa dengan pekerja layanan, hal ini mungkin tidak diinginkan jika Anda memerlukan kontrol lebih.

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-pra-cache Secara Langsung

Ada kalanya Anda mungkin perlu membaca aset yang telah dipra-cache secara langsung, konteks perutean yang dapat dilakukan secara otomatis oleh workbox-precaching. Misalnya, Anda mungkin ingin melakukan pra-cache template HTML sebagian yang kemudian perlu diambil dan digunakan saat membuat respons lengkap.

Secara umum, Anda dapat menggunakan Cache Storage API untuk mendapatkan objek Response yang di-cache sebelumnya, 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(), meneruskan URL asli, lalu menggunakan hasilnya untuk melakukan 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 perlukan hanyalah objek Response yang telah di-pra-cache, Anda dapat memanggil matchPrecache(), yang akan menggunakan kunci {i>cache<i} yang benar dan mencari cache:

import {matchPrecache} from 'workbox-precaching';

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

Membersihkan Pra-Cache Lama

Sebagian besar rilis {i>Workbox<i} mempertahankan format yang sama untuk menyimpan data {i>precache<i}, dan {i>precache<i} yang dibuat oleh versi lama Workbox biasanya dapat digunakan apa adanya oleh rilis yang lebih baru. Namun, jarang terjadi perubahan yang menyebabkan gangguan pada penyimpanan pra-cache yang mengharuskan pengguna lama mendownload ulang semuanya, dan yang membuat data yang sebelumnya dipra-cache menjadi usang. (Perubahan tersebut terjadi di antara rilis Workbox v3 dan v4.)

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

Menggunakan Subresource Integrity

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

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

Menentukan entri manifes pra-cache mana yang harus memiliki properti integrity, dan mencari tahu nilai yang sesuai untuk digunakan, berada di luar cakupan alat build Workbox. Sebaliknya, developer yang ingin ikut serta dalam harus memodifikasi manifes {i>precache<i} yang dihasilkan Workbox untuk menambahkan dalam informasi 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 akan terlihat seperti ini: 

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

    • opsi

      PrecacheControllerOptions opsional

  • strategi

    Strategi

  • aktifkan

    void

    Menghapus aset yang tidak ada lagi dalam manifes pra-cache saat ini. Panggil metode ini dari peristiwa pengaktifan pekerja layanan.

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

    Fungsi activate terlihat seperti: 

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

    • peristiwa

      ExtendableEvent

  • addToCacheList

    void

    Metode ini akan menambahkan item ke daftar {i>precache<i}, menghapus duplikat dan memastikan bahwa informasi tersebut valid.

    Fungsi addToCacheList akan terlihat seperti ini: 

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

    • entries

      (string | PrecacheEntry)[]

      Array entri yang akan dipra-cache.

  • createHandlerBoundToURL

    void

    Menampilkan fungsi yang mencari url di precache (dengan informasi revisi akun), dan menampilkan Response yang sesuai.

    Fungsi createHandlerBoundToURL terlihat seperti: 

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

    • url

      string

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

  • getCacheKeyForURL

    void

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

    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 dipra-cache.

  • getCachedURLs

    void

    Menampilkan daftar semua URL yang telah dipra-cache oleh pekerja layanan saat ini.

    Fungsi getCachedURLs akan terlihat seperti ini: 

    () => {...}

    • akan menampilkan

      string[]

      URL yang di-pra-cache.

  • getIntegrityForCacheKey

    void

    Fungsi getIntegrityForCacheKey terlihat seperti: 

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

    • cacheKey

      string

    • akan menampilkan

      string

      Integritas sub-resource yang terkait dengan kunci cache, atau belum ditentukan jika tidak ditetapkan.

  • getURLsToCacheKeys

    void

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

    Fungsi getURLsToCacheKeys terlihat seperti: 

    () => {...}

    • akan menampilkan

      Map<stringstring>

      URL untuk meng-cache pemetaan tombol.

  • instal

    void

    Menyimpan aset baru dan yang diperbarui ke dalam cache. Panggil metode ini dari pekerja layanan instal.

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

    Fungsi install terlihat seperti: 

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

    • peristiwa

      ExtendableEvent

  • matchPrecache

    void

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

    • Fungsi ini mengetahui nama pra-cache, dan hanya memeriksa cache tersebut.
    • Hal ini memungkinkan Anda meneruskan tanpa parameter pembuatan versi, dan secara otomatis mencari kunci {i> cache<i} yang benar untuk revisi aktif dari URL tersebut.

    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) untuk mencari di pra-cache.

    • akan menampilkan

      Promise<Respons>

  • pra-cache

    void

    Menambahkan item ke daftar {i>precache<i}, menghapus semua duplikasi dan menyimpan file dalam cache" kapan layanan penginstalan pekerja.

    Metode ini dapat dipanggil beberapa kali.

    Fungsi precache akan terlihat seperti ini: 

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

PrecacheEntry

Properti

  • integritas

    string opsional

  • revisi

    string opsional

  • url

    string

PrecacheFallbackPlugin

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

Hal ini dilakukan dengan mencegat callback plugin handlerDidError dan menampilkan respons yang di-cache sebelumnya, dengan mempertimbangkan parameter revisi yang diharapkan secara otomatis.

Kecuali Anda secara eksplisit meneruskan instance PrecacheController ke , instance default akan digunakan. Secara umum, sebagian besar developer akan menggunakan default.

Properti

  • konstruktor

    void

    Membuat PrecacheFallbackPlugin baru dengan fallbackURL terkait.

    Fungsi constructor akan terlihat seperti ini: 

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

    • config

      objek

      • fallbackURL

        string

        URL yang di-cache sebelumnya untuk digunakan sebagai pengganti jika strategi terkait tidak dapat menghasilkan respons.

      • precacheController

        PrecacheController opsional

PrecacheRoute

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

Properti

PrecacheRouteOptions

Properti

  • cleanURLs

    boolean opsional

  • directoryIndex

    string opsional

  • ignoreURLParametersMatching

    RegExp[] opsional

  • urlManipulation

    urlManipulation opsional

PrecacheStrategy

Penerapan workbox-strategies.Strategy yang dirancang khusus untuk berfungsi dengan workbox-precaching.PrecacheController untuk menyimpan dalam cache dan mengambil aset yang telah di-cache sebelumnya.

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

Properti

  • konstruktor

    void

    Fungsi constructor akan terlihat seperti ini: 

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

    • opsi

      PrecacheStrategyOptions opsional

  • cacheName

    string

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • plugins

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    WorkboxPlugin

  • _awaitComplete

    void

    Fungsi _awaitComplete akan terlihat seperti ini: 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • minta

      Permintaan

    • peristiwa

      ExtendableEvent

    • akan menampilkan

      Promise<void>

  • _getResponse

    void

    Fungsi _getResponse akan terlihat seperti ini: 

    (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 akan terlihat seperti ini: 

    (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 dalam FetchEvent mandiri pemroses dengan meneruskannya ke event.respondWith().

    Fungsi handle terlihat seperti: 

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

    • akan menampilkan

      Promise<Response>

  • handleAll

    void

    Mirip dengan workbox-strategies.Strategy~handle, tetapi bukan hanya menampilkan Promise yang di-resolve ke Response, fungsi ini 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 menjalankan strategi selesai.

    Anda dapat menunggu promise done untuk memastikan pekerjaan tambahan yang dilakukan oleh strategi (biasanya meng-{i>cache<i} respons) berhasil diselesaikan.

    Fungsi handleAll akan terlihat seperti ini: 

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

    • akan menampilkan

      [Promise<Response>, Promise<void>]

      Tuple [respons, selesai] promise yang dapat digunakan untuk menentukan kapan respons diselesaikan sebagai serta saat {i>handler<i} telah menyelesaikan semua pekerjaannya.

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 pra-caching.

Parameter

addRoute()

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

Tambahkan pemroses fetch ke pekerja layanan yang akan beri tanggapan ke [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 disimpan sebelumnya.

Permintaan untuk aset yang tidak dipra-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 pra-cache yang tidak kompatibel yang dibuat oleh Workbox versi lama.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Fungsi bantuan 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 pra-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 {i>precache<i}.

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

Untuk entri yang telah disimpan sebelumnya tanpa informasi revisi, kunci {i>cache<i} akan menjadi sama dengan URL aslinya.

Untuk entri yang di-cache sebelumnya 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 bantuan yang memanggil PrecacheController#matchPrecache pada default Instance PrecacheController.

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

Parameter

  • minta

    string | Permintaan

    Kunci (tanpa parameter revisi) untuk dicari di pra-cache.

Hasil

  • Promise<Response | undefined>

precache()

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

Menambahkan item ke daftar pra-cache, menghapus duplikat, dan menyimpan file di cache" saat pekerja layanan diinstal.

Metode ini dapat dipanggil beberapa kali.

Perhatikan: Metode ini tidak akan menayangkan file yang di-cache untuk Anda. Fitur ini hanya melakukan pra-cache file. Untuk merespons permintaan jaringan, Anda memanggil workbox-precaching.addRoute

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

Parameter

precacheAndRoute()

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

Metode ini akan menambahkan entri ke daftar {i>precache<i} dan menambahkan rute ke merespons peristiwa pengambilan.

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

Parameter