strategi-workbox

Ketika pekerja layanan pertama kali diperkenalkan, serangkaian strategi caching umum muncul. Strategi caching adalah pola yang menentukan cara pekerja layanan akan menghasilkan respons setelah menerima peristiwa pengambilan.

workbox-strategies menyediakan strategi penyimpanan dalam cache yang paling umum sehingga mudah untuk menerapkannya di pekerja layanan Anda.

Kita tidak akan membahas banyak detail di luar strategi yang didukung oleh Workbox, tetapi Anda dapat mempelajari lebih lanjut di Cookbook Offline.

Menggunakan Strategi

Pada contoh berikut, kami akan menunjukkan cara menggunakan penyimpanan cache Workbox strategi dengan workbox-routing. Ada beberapa opsi yang dapat Anda tentukan dengan setiap strategi yang dibahas dalam Bagian Mengonfigurasi Strategi di dokumen ini.

Di bagian Penggunaan Lanjutan, kami akan membahas cara menggunakan strategi caching secara langsung tanpa workbox-routing.

Tidak Berlaku Sementara-Validasi Ulang

Diagram Tidak Berlaku Saat Validasi Ulang

Fungsi sout-when-revalidate memungkinkan Anda merespons permintaan secepat mungkin dengan yang di-cache jika tersedia, kembali ke permintaan jaringan jika tidak di-cache. Permintaan jaringan kemudian digunakan untuk memperbarui cache. Berbeda dengan beberapa implementasi tidak berlaku saat memvalidasi ulang, strategi ini akan selalu membuat permintaan validasi ulang, tanpa memandang usia respons yang di-cache.

Ini adalah strategi yang cukup umum di mana memiliki sumber daya terbaru tidak penting untuk aplikasi.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

Cache Terlebih Dahulu (Cache Kembali ke Jaringan)

Diagram Cache Terlebih Dahulu

Aplikasi web offline akan sangat bergantung pada cache, tetapi untuk aset yang non-kritis dan dapat di-cache secara bertahap, cache terlebih dahulu yang merupakan opsi terbaik.

Jika ada Respons dalam cache, Permintaan akan dipenuhi menggunakan respons yang di-cache dan jaringan tidak akan digunakan sama sekali. Jika tidak ada cache Permintaan akan dipenuhi oleh permintaan jaringan dan respons akan di-cache sehingga permintaan berikutnya disajikan langsung dari cache.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

Jaringan Terlebih Dahulu (Jaringan yang Kembali ke Cache)

Diagram Network First

Untuk permintaan yang sering diperbarui, dengan lebih mengedepankan adalah solusi yang ideal. Secara default, metode ini akan mencoba mengambil respons dari jaringan. Jika permintaan berhasil, respons akan dimasukkan dalam cache. Jika jaringan gagal menampilkan respons, respons yang di-cache data yang akan digunakan.

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

Khusus Jaringan

Diagram Jaringan Saja

Jika Anda mengharuskan permintaan tertentu dipenuhi dari jaringan, hanya jaringan adalah strategi yang digunakan.

import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

Hanya Cache

Diagram Cache Saja

Hanya cache memastikan bahwa respons diperoleh dari cache. Hal ini jarang terjadi di workbox, tetapi berguna jika Anda memiliki langkah pra-cache sendiri.

import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());

Mengonfigurasi Strategi

Semua strategi tersebut memungkinkan Anda mengonfigurasi:

  • Nama cache yang akan digunakan dalam strategi.
  • Batasan masa berlaku cache yang akan digunakan dalam strategi.
  • Array plugin yang akan memanggil metode siklus prosesnya saat mengambil dan menyimpan permintaan dalam cache.

Mengubah Cache yang Digunakan oleh Strategi

Anda dapat mengubah strategi cache yang digunakan dengan menyediakan nama cache. Ini adalah berguna jika Anda ingin memisahkan aset untuk membantu {i>debugging<i}.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

Menggunakan Plugin

Workbox dilengkapi dengan serangkaian plugin yang dapat digunakan dengan strategi ini.

Untuk menggunakan salah satu plugin ini (atau plugin kustom), Anda hanya perlu meneruskan instance ke opsi plugins.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ],
  })
);

Strategi Kustom

Selain mengonfigurasi strategi, Workbox memungkinkan Anda membuat strategi khusus sendiri. Hal ini dapat dilakukan dengan mengimpor dan memperluas class dasar Strategy dari workbox-strategies:

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

Dalam contoh ini, handle() digunakan sebagai strategi permintaan untuk menentukan logika penanganan tertentu. Ada adalah dua strategi permintaan yang dapat digunakan:

  • handle(): Menjalankan strategi permintaan dan menampilkan Promise yang akan di-resolve dengan Response, memanggil semua callback plugin yang relevan.
  • handleAll(): Serupa dengan handle(), tetapi menampilkan dua objek Promise. Yang pertama adalah setara dengan hal yang ditampilkan handle() dan yang kedua akan di-resolve saat promise yang yang ditambahkan ke event.waitUntil() dalam strategi telah selesai.

Kedua strategi permintaan dipanggil dengan dua parameter:

  • request: Request yang strateginya akan menampilkan respons.
  • handler: Instance StrategyHandler otomatis dibuat untuk strategi saat ini.

Menciptakan Strategi Baru

Berikut adalah contoh strategi baru yang mengimplementasikan kembali perilaku NetworkOnly:

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

Perhatikan bagaimana handler.fetch() dipanggil, bukan metode fetch native. StrategyHandler menyediakan sejumlah tindakan pengambilan dan cache yang dapat digunakan setiap kali handle() atau handleAll() digunakan:

  • fetch: Mengambil permintaan tertentu, dan memanggil requestWillFetch(), fetchDidSucceed(), dan Metode siklus proses plugin fetchDidFail()
  • cacheMatch: Mencocokkan permintaan dari cache, dan memanggil cacheKeyWillBeUsed() serta Metode siklus proses plugin cachedResponseWillBeUsed()
  • cachePut: Menempatkan pasangan permintaan/respons di cache, dan memanggil cacheKeyWillBeUsed(), Metode siklus proses plugin cacheWillUpdate(), dan cacheDidUpdate()
  • fetchAndCachePut: Memanggil fetch() dan menjalankan cachePut() di latar belakang pada respons yang dibuat oleh fetch().
  • hasCallback: Mengambil callback sebagai input dan menampilkan benar jika strategi memiliki setidaknya satu plugin dengan callback yang diberikan.
  • runCallbacks: Menjalankan semua callback plugin yang cocok dengan nama tertentu, secara berurutan, dengan meneruskan parameter tertentu (digabungkan dengan status plugin saat ini) sebagai satu-satunya argumen.
  • iterateCallbacks: Menerima callback dan menampilkan iterable dari callback plugin yang cocok, dengan setiap callback dibungkus dengan status pengendali saat ini (yaitu saat Anda memanggil setiap callback, parameter objek apa pun yang Anda teruskan akan digabungkan dengan status plugin saat ini).
  • waitUntil: Menambahkan janji untuk memperpanjang janji sepanjang waktu dari peristiwa yang terkait dengan permintaan ditangani (biasanya FetchEvent).
  • doneWaiting: Menampilkan promise yang di-resolve setelah semua promise yang diteruskan ke waitUntil() memiliki diselesaikan.
  • destroy: Berhenti menjalankan strategi dan segera menyelesaikan semua promise waitUntil() yang tertunda.

Strategi Perlombaan Jaringan Cache Kustom

Contoh berikut didasarkan pada cache-network-race dari metode Cookbook Offline (yang tidak disediakan oleh Workbox), tetapi melangkah lebih jauh dan selalu memperbarui {i>cache<i} setelah permintaan jaringan berhasil. Ini adalah contoh strategi lebih kompleks yang menggunakan beberapa tindakan.

import {Strategy} from 'workbox-strategies';

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then(response => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        results => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === 'rejected' &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

Penggunaan Lanjutan

Jika ingin menggunakan strategi dalam logika peristiwa pengambilan Anda sendiri, Anda dapat menggunakan class strategi untuk menjalankan permintaan melalui strategi tertentu.

Misalnya, untuk menggunakan strategi usang-saat validasi ulang, Anda bisa melakukan metode berikut ini:

self.addEventListener('fetch', event => {
  const {request} = event;
  const url = new URL(request.url);

  if (url.origin === location.origin && url.pathname === '/') {
    event.respondWith(new StaleWhileRevalidate().handle({event, request}));
  }
});

Anda dapat menemukan daftar kelas yang tersedia di dokumen referensi strategi-workbox.

Jenis

CacheFirst

Implementasi cache-first strategi permintaan.

Strategi cache pertama berguna untuk aset yang telah direvisi, seperti URL seperti /styles/example.a8f5f1.css, karena dapat disimpan dalam {i>cache<i} untuk waktu yang lama.

Jika permintaan jaringan gagal, dan tidak ada kecocokan {i>cache<i}, hal ini akan menampilkan pengecualian WorkboxError.

Properti

  • konstruktor

    void

    Membuat instance strategi baru dan menetapkan semua opsi yang didokumentasikan sebagai properti instance publik.

    Catatan: jika kelas strategi khusus memperluas kelas Strategi dasar dan melakukan tidak perlu lebih dari properti ini, properti tidak perlu menentukan atributnya sendiri .

    Fungsi constructor akan terlihat seperti ini: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • plugin

    WorkboxPlugin[]

  • _awaitComplete

    void

    Fungsi _awaitComplete akan terlihat seperti ini: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • minta

      Permintaan

    • peristiwa

      ExtendableEvent

    • akan menampilkan

      Janji<void>

  • _getResponse

    void

    Fungsi _getResponse akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • 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 otomatis dipanggil saat rute cocok.

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

    Fungsi handle akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • handleAll

    void

    Serupa dengan workbox-strategies.Strategy~handle, tetapi bukan hanya menampilkan Promise yang di-resolve menjadi Response fungsi tersebut akan menampilkan tuple promise [response, done], yang mana (response) setara dengan apa yang ditampilkan handle(), dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan ke event.waitUntil() sebagai bagian dari pelaksanaan strategi telah 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 pengendali telah menyelesaikan semua pekerjaannya.

CacheOnly

Implementasi cache-saja strategi permintaan.

Kelas ini berguna jika Anda ingin memanfaatkan Plugin workbox.

Jika tidak ada kecocokan cache, pengecualian WorkboxError akan ditampilkan.

Properti

  • konstruktor

    void

    Membuat instance strategi baru dan menetapkan semua opsi yang didokumentasikan sebagai properti instance publik.

    Catatan: jika kelas strategi khusus memperluas kelas Strategi dasar dan melakukan tidak perlu lebih dari properti ini, properti tidak perlu menentukan atributnya sendiri .

    Fungsi constructor akan terlihat seperti ini: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • plugin

    WorkboxPlugin[]

  • _awaitComplete

    void

    Fungsi _awaitComplete akan terlihat seperti ini: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • minta

      Permintaan

    • peristiwa

      ExtendableEvent

    • akan menampilkan

      Janji<void>

  • _getResponse

    void

    Fungsi _getResponse akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • 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 otomatis dipanggil saat rute cocok.

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

    Fungsi handle akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • handleAll

    void

    Serupa dengan workbox-strategies.Strategy~handle, tetapi bukan hanya menampilkan Promise yang di-resolve menjadi Response fungsi tersebut akan menampilkan tuple promise [response, done], yang mana (response) setara dengan apa yang ditampilkan handle(), dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan ke event.waitUntil() sebagai bagian dari pelaksanaan strategi telah 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 pengendali telah menyelesaikan semua pekerjaannya.

NetworkFirst

Implementasi dari dengan lebih mengedepankan strategi permintaan.

Secara {i>default<i}, strategi ini akan meng-cache respons dengan kode status 200 sebagai serta respons buram. Respons buram adalah permintaan lintas origin dengan respons dukung CORS.

Jika permintaan jaringan gagal, dan tidak ada kecocokan {i>cache<i}, hal ini akan menampilkan pengecualian WorkboxError.

Properti

  • konstruktor

    void

    Fungsi constructor akan terlihat seperti ini: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • plugin

    WorkboxPlugin[]

  • _awaitComplete

    void

    Fungsi _awaitComplete akan terlihat seperti ini: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • minta

      Permintaan

    • peristiwa

      ExtendableEvent

    • akan menampilkan

      Janji<void>

  • _getResponse

    void

    Fungsi _getResponse akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • 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 otomatis dipanggil saat rute cocok.

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

    Fungsi handle akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • handleAll

    void

    Serupa dengan workbox-strategies.Strategy~handle, tetapi bukan hanya menampilkan Promise yang di-resolve menjadi Response fungsi tersebut akan menampilkan tuple promise [response, done], yang mana (response) setara dengan apa yang ditampilkan handle(), dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan ke event.waitUntil() sebagai bagian dari pelaksanaan strategi telah 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 pengendali telah menyelesaikan semua pekerjaannya.

NetworkFirstOptions

Properti

  • cacheName

    string opsional

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • networkTimeoutSeconds

    angka opsional

  • plugin

    WorkboxPlugin[] opsional

NetworkOnly

Implementasi dari khusus jaringan strategi permintaan.

Kelas ini berguna jika Anda ingin memanfaatkan Plugin workbox.

Jika permintaan jaringan gagal, pengecualian WorkboxError akan ditampilkan.

Properti

  • konstruktor

    void

    Fungsi constructor akan terlihat seperti ini: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • plugin

    WorkboxPlugin[]

  • _awaitComplete

    void

    Fungsi _awaitComplete akan terlihat seperti ini: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • minta

      Permintaan

    • peristiwa

      ExtendableEvent

    • akan menampilkan

      Janji<void>

  • _getResponse

    void

    Fungsi _getResponse akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • 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 otomatis dipanggil saat rute cocok.

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

    Fungsi handle akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • handleAll

    void

    Serupa dengan workbox-strategies.Strategy~handle, tetapi bukan hanya menampilkan Promise yang di-resolve menjadi Response fungsi tersebut akan menampilkan tuple promise [response, done], yang mana (response) setara dengan apa yang ditampilkan handle(), dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan ke event.waitUntil() sebagai bagian dari pelaksanaan strategi telah 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 pengendali telah menyelesaikan semua pekerjaannya.

NetworkOnlyOptions

Properti

  • fetchOptions

    RequestInit opsional

  • networkTimeoutSeconds

    angka opsional

  • plugin

    WorkboxPlugin[] opsional

StaleWhileRevalidate

Implementasi dari sudah tidak berlaku saat validasi ulang strategi permintaan.

Resource diminta dari cache dan jaringan secara paralel. Strategi akan merespons dengan versi yang di-cache jika tersedia. Jika tidak, strategi ini akan merespons dengan menggunakan versi yang di-cache. menunggu respons jaringan. Cache diperbarui dengan respons jaringan dengan setiap permintaan yang berhasil.

Secara {i>default<i}, strategi ini akan meng-cache respons dengan kode status 200 sebagai serta respons buram. Respons buram adalah permintaan lintas origin dengan respons yang tidak dukung CORS.

Jika permintaan jaringan gagal, dan tidak ada kecocokan {i>cache<i}, hal ini akan menampilkan pengecualian WorkboxError.

Properti

  • konstruktor

    void

    Fungsi constructor akan terlihat seperti ini: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • plugin

    WorkboxPlugin[]

  • _awaitComplete

    void

    Fungsi _awaitComplete akan terlihat seperti ini: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • minta

      Permintaan

    • peristiwa

      ExtendableEvent

    • akan menampilkan

      Janji<void>

  • _getResponse

    void

    Fungsi _getResponse akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • 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 otomatis dipanggil saat rute cocok.

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

    Fungsi handle akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • handleAll

    void

    Serupa dengan workbox-strategies.Strategy~handle, tetapi bukan hanya menampilkan Promise yang di-resolve menjadi Response fungsi tersebut akan menampilkan tuple promise [response, done], yang mana (response) setara dengan apa yang ditampilkan handle(), dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan ke event.waitUntil() sebagai bagian dari pelaksanaan strategi telah 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 pengendali telah menyelesaikan semua pekerjaannya.

Strategy

Class dasar abstrak yang harus diperluas oleh semua class strategi lainnya:

Properti

  • konstruktor

    void

    Membuat instance strategi baru dan menetapkan semua opsi yang didokumentasikan sebagai properti instance publik.

    Catatan: jika kelas strategi khusus memperluas kelas Strategi dasar dan melakukan tidak perlu lebih dari properti ini, properti tidak perlu menentukan atributnya sendiri .

    Fungsi constructor akan terlihat seperti ini: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • plugin

    WorkboxPlugin[]

  • _awaitComplete

    void

    Fungsi _awaitComplete akan terlihat seperti ini: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • minta

      Permintaan

    • peristiwa

      ExtendableEvent

    • akan menampilkan

      Janji<void>

  • _getResponse

    void

    Fungsi _getResponse akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • _handle

    void

    Fungsi _handle akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • 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 otomatis dipanggil saat rute cocok.

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

    Fungsi handle akan terlihat seperti ini: 

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

    • akan menampilkan

      Promise&lt;Response&gt;

  • handleAll

    void

    Serupa dengan workbox-strategies.Strategy~handle, tetapi bukan hanya menampilkan Promise yang di-resolve menjadi Response fungsi tersebut akan menampilkan tuple promise [response, done], yang mana (response) setara dengan apa yang ditampilkan handle(), dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan ke event.waitUntil() sebagai bagian dari pelaksanaan strategi telah 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 pengendali telah menyelesaikan semua pekerjaannya.

StrategyHandler

Class yang dibuat setiap kali instance Strategy memanggil workbox-strategies.Strategy~handle atau workbox-strategies.Strategy~handleAll yang menggabungkan semua pengambilan dan menyimpan tindakan ke cache di sekitar callback plugin dan melacak saat strategi adalah "selesai" (yaitu, semua promise event.waitUntil() yang ditambahkan telah diselesaikan).

Properti

  • konstruktor

    void

    Membuat instance baru yang terkait dengan strategi dan peristiwa yang diteruskan yang menangani permintaan.

    Konstruktor juga menginisialisasi status yang akan diteruskan ke masing-masing plugin yang menangani permintaan ini.

    Fungsi constructor akan terlihat seperti ini: 

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • peristiwa

    ExtendableEvent

  • params

    semua opsional

  • minta

    Permintaan

  • url

    URL opsional

  • cacheMatch

    void

    Mencocokkan permintaan dari cache (dan memanggil plugin yang berlaku metode callback) menggunakan cacheName, matchOptions, dan plugins ditentukan pada objek strategi.

    Metode siklus proses plugin berikut dipanggil saat menggunakan metode ini:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    Fungsi cacheMatch akan terlihat seperti ini: 

    (key: RequestInfo) => {...}

    • kunci

      RequestInfo

      Permintaan atau URL yang akan digunakan sebagai kunci cache.

    • akan menampilkan

      Promise&lt;Response&gt;

      Respons yang cocok, jika ditemukan.

  • cachePut

    void

    Menempatkan pasangan permintaan/respons di cache (dan memanggil pasangan permintaan/respons yang berlaku metode callback plugin) menggunakan cacheName dan plugins yang ditentukan di objek strategi.

    Metode siklus proses plugin berikut dipanggil saat menggunakan metode ini:

    • cacheKeyWillByUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    Fungsi cachePut akan terlihat seperti ini: 

    (key: RequestInfo, response: Response) => {...}

    • kunci

      RequestInfo

      Permintaan atau URL yang akan digunakan sebagai kunci cache.

    • respons

      Respons

      Respons terhadap cache.

    • akan menampilkan

      Promise&lt;boolean&gt;

      false jika cachewillUpdate menyebabkan respons tidak di-cache, dan true jika tidak.

  • hancurkan

    void

    Menghentikan strategi dan segera menyelesaikan strategi bidding waitUntil() promise.

    Fungsi destroy akan terlihat seperti ini: 

    () => {...}

  • doneWaiting

    void

    Menampilkan promise yang di-resolve setelah semua promise diteruskan ke workbox-strategies.StrategyHandler~waitUntil telah diselesaikan.

    Catatan: setiap tugas yang dilakukan setelah proses doneWaiting() harus dilakukan secara manual diteruskan ke metode waitUntil() peristiwa (bukan metode metode waitUntil()), jika tidak, thread pekerja layanan akan dimatikan sebelum pekerjaan Anda selesai.

    Fungsi doneWaiting akan terlihat seperti ini: 

    () => {...}

    • akan menampilkan

      Janji<void>

  • ambil

    void

    Mengambil permintaan tertentu (dan memanggil callback plugin yang berlaku) ) menggunakan fetchOptions (untuk permintaan non-navigasi) dan plugins ditentukan pada objek Strategy.

    Metode siklus proses plugin berikut dipanggil saat menggunakan metode ini:

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

    Fungsi fetch akan terlihat seperti ini: 

    (input: RequestInfo) => {...}

    • input

      RequestInfo

      URL atau permintaan yang akan diambil.

    • akan menampilkan

      Promise&lt;Response&gt;

  • fetchAndCachePut

    void

    Memanggil this.fetch() dan (di latar belakang) menjalankan this.cachePut() di respons yang dihasilkan oleh this.fetch().

    Panggilan ke this.cachePut() akan otomatis memanggil this.waitUntil(), sehingga Anda tidak perlu memanggil waitUntil() secara manual pada peristiwa tersebut.

    Fungsi fetchAndCachePut akan terlihat seperti ini: 

    (input: RequestInfo) => {...}

    • input

      RequestInfo

      Permintaan atau URL yang akan diambil dan di-cache.

    • akan menampilkan

      Promise&lt;Response&gt;

  • getCacheKey

    void

    Memeriksa daftar plugin untuk callback cacheKeyWillBeUsed, dan mengeksekusi salah satu callback yang ditemukan secara berurutan. Request terakhir objek yang ditampilkan oleh plugin terakhir diperlakukan sebagai kunci cache untuk cache pembacaan dan/atau penulisan. Jika tidak ada callback plugin cacheKeyWillBeUsed yang memiliki telah terdaftar, permintaan yang diteruskan akan ditampilkan tanpa

    Fungsi getCacheKey akan terlihat seperti ini: 

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • minta

      Permintaan

    • mode

      "baca"
       | "write"

    • akan menampilkan

      Promise&lt;Request&gt;

  • hasCallback

    void

    Menampilkan true (benar) jika strategi memiliki setidaknya satu plugin dengan plugin yang diberikan .

    Fungsi hasCallback akan terlihat seperti ini: 

    (name: C) => {...}

    • nama

      C

      Nama callback yang akan diperiksa.

    • akan menampilkan

      boolean

  • iterateCallbacks

    void

    Menerima callback dan menampilkan iterable dari callback plugin yang cocok, di mana setiap callback digabungkan dengan status pengendali saat ini (yaitu saat Anda memanggil setiap callback, parameter objek apa pun yang Anda teruskan akan digabungkan dengan status plugin saat ini).

    Fungsi iterateCallbacks akan terlihat seperti ini: 

    (name: C) => {...}

    • nama

      C

      Nama untuk callback yang akan dijalankan

    • akan menampilkan

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    void

    Menjalankan semua callback plugin yang cocok dengan nama yang diberikan, secara berurutan, dengan meneruskan objek parameter tertentu (digabungkan dengan status plugin saat ini) sebagai satu-satunya argumen.

    Catatan: karena metode ini menjalankan semua plugin, metode ini tidak cocok untuk kasus dengan nilai return callback yang perlu diterapkan sebelum memanggil callback berikutnya. Lihat workbox-strategies.StrategyHandler#iterateCallbacks di bawah untuk mengetahui cara menangani kasus tersebut.

    Fungsi runCallbacks akan terlihat seperti ini: 

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • nama

      C

      Nama callback yang akan dijalankan dalam setiap plugin.

    • param

      Hapus<indexedAccess"state"
      >

      Objek yang akan diteruskan sebagai parameter pertama (dan satu-satunya) saat mengeksekusi setiap callback. Objek ini akan digabungkan dengan status plugin saat ini sebelum eksekusi callback.

    • akan menampilkan

      Janji<void>

  • waitUntil

    void

    Menambahkan promise ke [perpanjang masa yang dijanjikan]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises peristiwa yang terkait dengan permintaan yang ditangani (biasanya FetchEvent).

    Catatan: Anda dapat menunggu workbox-strategies.StrategyHandler~doneWaiting untuk mengetahui kapan semua promise tambahan telah diselesaikan.

    Fungsi waitUntil akan terlihat seperti ini: 

    (promise: Promise<T>) => {...}

    • janji

      Janji<T>

      Janji untuk menambah janji seumur hidup peristiwa yang memicu permintaan.

    • akan menampilkan

      Janji<T>

StrategyOptions

Properti

  • cacheName

    string opsional

  • fetchOptions

    RequestInit opsional

  • matchOptions

    CacheQueryOptions opsional

  • plugin

    WorkboxPlugin[] opsional