strategi-workbox

Saat pekerja layanan pertama kali diperkenalkan, serangkaian strategi penyimpanan dalam cache umum muncul. Strategi penyimpanan dalam cache adalah pola yang menentukan cara pekerja layanan membuat respons setelah menerima peristiwa pengambilan.

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

Kita tidak akan membahas secara mendetail di luar strategi yang didukung oleh Workbox, tetapi Anda dapat mempelajari lebih lanjut di Buku Petunjuk Offline.

Menggunakan Strategi

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

Di bagian Penggunaan Lanjutan, kita akan membahas cara menggunakan strategi penyimpanan dalam cache secara langsung tanpa workbox-routing.

Stale-While-Revalidate

Pola stale-while-revalidate memungkinkan Anda merespons permintaan secepat mungkin dengan respons yang di-cache jika tersedia, kembali ke permintaan jaringan jika tidak di-cache. Permintaan jaringan kemudian digunakan untuk memperbarui cache. Berbeda dengan beberapa implementasi stale-while-revalidate, strategi ini akan selalu membuat permintaan validasi ulang, terlepas dari usia respons yang di-cache.

Ini adalah strategi yang cukup umum karena memiliki resource terbaru tidak penting bagi aplikasi.

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

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

Cache First (Cache Falling Back to Network)

Aplikasi web offline akan sangat mengandalkan cache, tetapi untuk aset yang tidak penting dan dapat di-cache secara bertahap, cache terlebih dahulu adalah 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 respons yang di-cache, Permintaan akan dipenuhi oleh permintaan jaringan dan respons akan di-cache sehingga permintaan berikutnya ditayangkan langsung dari cache.

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

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

Jaringan Pertama (Jaringan Fallback ke Cache)

Untuk permintaan yang sering diperbarui, strategi jaringan terlebih dahulu adalah solusi yang ideal. Secara default, metode ini akan mencoba mengambil respons terbaru dari jaringan. Jika berhasil, permintaan akan menempatkan respons di cache. Jika jaringan gagal menampilkan respons, respons yang di-cache akan digunakan.

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

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

Khusus Jaringan

Jika Anda mewajibkan permintaan tertentu untuk dipenuhi dari jaringan, jaringan saja adalah strategi yang akan digunakan.

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

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

Hanya Cache

Strategi cache only memastikan bahwa respons diperoleh dari cache. Hal ini kurang umum di workbox, tetapi dapat berguna jika Anda memiliki langkah pra-caching sendiri.

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

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

Mengonfigurasi Strategi

Semua strategi memungkinkan Anda mengonfigurasi:

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

Mengubah Cache yang Digunakan oleh Strategi

Anda dapat mengubah strategi cache yang digunakan dengan memberikan nama cache. Hal ini berguna jika Anda ingin memisahkan aset untuk membantu proses debug.

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.

• workbox-background-sync
• workbox-broadcast-update
• workbox-cacheable-response
• workbox-expiration
• workbox-range-requests

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 kustom Anda 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 dua strategi permintaan yang dapat digunakan:

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

Kedua strategi permintaan dipanggil dengan dua parameter:

• request: Request yang akan ditampilkan responsnya oleh strategi.
• handler: Instance StrategyHandler yang dibuat secara otomatis untuk strategi saat ini.

Membuat Strategi Baru

Berikut adalah contoh strategi baru yang menerapkan kembali perilaku NetworkOnly:

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

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

• fetch: Mengambil permintaan tertentu, dan memanggil metode siklus proses plugin requestWillFetch(), fetchDidSucceed(), dan fetchDidFail()
• cacheMatch: Mencocokkan permintaan dari cache, dan memanggil metode siklus proses plugin cacheKeyWillBeUsed() dan cachedResponseWillBeUsed()
• cachePut: Menempatkan pasangan permintaan/respons dalam cache, dan memanggil metode siklus proses plugin cacheKeyWillBeUsed(), cacheWillUpdate(), dan cacheDidUpdate()
• fetchAndCachePut: Memanggil fetch() dan menjalankan cachePut() di latar belakang pada respons yang dihasilkan oleh fetch().
• hasCallback: Mengambil callback sebagai input dan menampilkan true jika strategi memiliki setidaknya satu plugin dengan callback yang diberikan.
• runCallbacks: Menjalankan semua callback plugin yang cocok dengan nama tertentu, secara berurutan, dengan meneruskan objek parameter tertentu (digabungkan dengan status plugin saat ini) sebagai satu-satunya argumen.
• iterateCallbacks: Menerima callback dan menampilkan callback plugin yang cocok yang dapat di-iterasi, dengan 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).
• waitUntil: Menambahkan promise ke promise masa aktif yang diperpanjang dari peristiwa yang terkait dengan permintaan yang ditangani (biasanya FetchEvent).
• doneWaiting: Menampilkan promise yang diselesaikan setelah semua promise yang diteruskan ke waitUntil() telah selesai.
• destroy: Berhenti menjalankan strategi dan segera menyelesaikan promise waitUntil() yang tertunda.

Catatan:Lihat implementasi sumber StrategyHandler untuk melihat semua parameter yang diterima oleh setiap tindakan

Strategi Perlombaan Jaringan Cache Kustom

Contoh berikut didasarkan pada cache-network-race dari Offline Cookbook (yang tidak disediakan Workbox), tetapi melangkah lebih jauh dan selalu mengupdate cache setelah permintaan jaringan berhasil. Ini adalah contoh strategi yang 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 stale-while-revalidate, Anda dapat melakukan hal berikut:

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 class yang tersedia di dokumen referensi strategi workbox.

Jenis

CacheFirst

Implementasi strategi permintaan cache-first.

Strategi cache-first berguna untuk aset yang telah direvisi, seperti URL seperti /styles/example.a8f5f1.css, karena aset tersebut dapat di-cache dalam jangka waktu yang lama.

Jika permintaan jaringan gagal, dan tidak ada kecocokan cache, hal ini akan menampilkan pengecualian WorkboxError.

Properti

• konstruktor

  void

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

  Catatan: jika class strategi kustom memperluas class Strategi dasar dan tidak memerlukan lebih dari properti ini, class tersebut tidak perlu menentukan konstruktornya sendiri.

  Fungsi constructor terlihat seperti:

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

  • opsi

    StrategyOptions opsional

  • akan menampilkan

    CacheFirst

• cacheName

  string

• fetchOptions

  RequestInit opsional

• matchOptions

  CacheQueryOptions opsional

• plugin

  WorkboxPlugin[]

• _awaitComplete

  void

  Fungsi _awaitComplete terlihat seperti:

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

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

  • handler

    StrategyHandler

  • minta

    Permintaan

  • peristiwa

    ExtendableEvent

  • akan menampilkan

    Promise<Response>

• handle

  void

  Melakukan 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.

  • 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 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.

  • akan menampilkan

    [Promise<Response>, Promise<void>]

    Tupel promise [response, done] yang dapat digunakan untuk menentukan kapan respons diselesaikan serta kapan pengendali telah menyelesaikan semua tugasnya.

CacheOnly

Implementasi strategi permintaan khusus cache.

Class ini berguna jika Anda ingin memanfaatkan plugin Workbox.

Jika tidak ada kecocokan cache, pengecualian WorkboxError akan ditampilkan.

Properti

• konstruktor

  void

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

  Catatan: jika class strategi kustom memperluas class Strategi dasar dan tidak memerlukan lebih dari properti ini, class tersebut tidak perlu menentukan konstruktornya sendiri.

  Fungsi constructor terlihat seperti:

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

  • opsi

    StrategyOptions opsional

  • akan menampilkan

    CacheOnly

• cacheName

  string

• fetchOptions

  RequestInit opsional

• matchOptions

  CacheQueryOptions opsional

• plugin

  WorkboxPlugin[]

• _awaitComplete

  void

  Fungsi _awaitComplete terlihat seperti:

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

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

  • handler

    StrategyHandler

  • minta

    Permintaan

  • peristiwa

    ExtendableEvent

  • akan menampilkan

    Promise<Response>

• handle

  void

  Melakukan 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.

  • 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 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.

  • akan menampilkan

    [Promise<Response>, Promise<void>]

    Tupel promise [response, done] yang dapat digunakan untuk menentukan kapan respons diselesaikan serta kapan pengendali telah menyelesaikan semua tugasnya.

NetworkFirst

Implementasi strategi permintaan jaringan terlebih dahulu.

Secara default, strategi ini akan meng-cache respons dengan kode status 200 serta respons buram. Respons buram adalah permintaan lintas asal yang responsnya tidak mendukung CORS.

Jika permintaan jaringan gagal, dan tidak ada kecocokan cache, tindakan ini akan menampilkan pengecualian WorkboxError.

Properti

• konstruktor

  void

  Fungsi constructor terlihat seperti:

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

  • opsi

    NetworkFirstOptions opsional

  • akan menampilkan

    NetworkFirst

• cacheName

  string

• fetchOptions

  RequestInit opsional

• matchOptions

  CacheQueryOptions opsional

• plugin

  WorkboxPlugin[]

• _awaitComplete

  void

  Fungsi _awaitComplete terlihat seperti:

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

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

  • handler

    StrategyHandler

  • minta

    Permintaan

  • peristiwa

    ExtendableEvent

  • akan menampilkan

    Promise<Response>

• handle

  void

  Melakukan 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.

  • 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 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.

  • akan menampilkan

    [Promise<Response>, Promise<void>]

    Tupel promise [response, done] yang dapat digunakan untuk menentukan kapan respons diselesaikan serta kapan pengendali telah menyelesaikan semua tugasnya.

NetworkFirstOptions

Properti

• cacheName

  string opsional

• fetchOptions

  RequestInit opsional

• matchOptions

  CacheQueryOptions opsional

• networkTimeoutSeconds

  number opsional

• plugin

  WorkboxPlugin[] opsional

NetworkOnly

Implementasi strategi permintaan khusus jaringan.

Class ini berguna jika Anda ingin memanfaatkan plugin Workbox.

Jika permintaan jaringan gagal, pengecualian WorkboxError akan ditampilkan.

Properti

• konstruktor

  void

  Fungsi constructor terlihat seperti:

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

  • opsi

    NetworkOnlyOptions opsional

  • akan menampilkan

    NetworkOnly

• cacheName

  string

• fetchOptions

  RequestInit opsional

• matchOptions

  CacheQueryOptions opsional

• plugin

  WorkboxPlugin[]

• _awaitComplete

  void

  Fungsi _awaitComplete terlihat seperti:

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

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

  • handler

    StrategyHandler

  • minta

    Permintaan

  • peristiwa

    ExtendableEvent

  • akan menampilkan

    Promise<Response>

• handle

  void

  Melakukan 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.

  • 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 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.

  • akan menampilkan

    [Promise<Response>, Promise<void>]

    Tupel promise [response, done] yang dapat digunakan untuk menentukan kapan respons diselesaikan serta kapan pengendali telah menyelesaikan semua tugasnya.

NetworkOnlyOptions

Properti

• fetchOptions

  RequestInit opsional

• networkTimeoutSeconds

  number opsional

• plugin

  WorkboxPlugin[] opsional

StaleWhileRevalidate

Implementasi strategi permintaan stale-while-revalidate.

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

Secara default, strategi ini akan meng-cache respons dengan kode status 200 serta respons buram. Respons buram adalah permintaan lintas origin yang responsnya tidak mendukung CORS.

Jika permintaan jaringan gagal, dan tidak ada kecocokan cache, tindakan ini akan menampilkan pengecualian WorkboxError.

Properti

• konstruktor

  void

  Fungsi constructor terlihat seperti:

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

  • opsi

    StrategyOptions opsional

  • akan menampilkan

    StaleWhileRevalidate

• cacheName

  string

• fetchOptions

  RequestInit opsional

• matchOptions

  CacheQueryOptions opsional

• plugin

  WorkboxPlugin[]

• _awaitComplete

  void

  Fungsi _awaitComplete terlihat seperti:

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

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

  • handler

    StrategyHandler

  • minta

    Permintaan

  • peristiwa

    ExtendableEvent

  • akan menampilkan

    Promise<Response>

• handle

  void

  Melakukan 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.

  • 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 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.

  • akan menampilkan

    [Promise<Response>, Promise<void>]

    Tupel promise [response, done] yang dapat digunakan untuk menentukan kapan respons diselesaikan serta kapan pengendali telah menyelesaikan semua tugasnya.

Strategy

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

Properti

• konstruktor

  void

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

  Catatan: jika class strategi kustom memperluas class Strategi dasar dan tidak memerlukan lebih dari properti ini, class tersebut tidak perlu menentukan konstruktornya sendiri.

  Fungsi constructor terlihat seperti:

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

  • opsi

    StrategyOptions opsional

  • akan menampilkan

    Strategi

• cacheName

  string

• fetchOptions

  RequestInit opsional

• matchOptions

  CacheQueryOptions opsional

• plugin

  WorkboxPlugin[]

• _awaitComplete

  void

  Fungsi _awaitComplete terlihat seperti:

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

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

  • handler

    StrategyHandler

  • minta

    Permintaan

  • peristiwa

    ExtendableEvent

  • akan menampilkan

    Promise<Response>

• _handle

  void

  Fungsi _handle terlihat seperti:

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

  • minta

    Permintaan

  • handler

    StrategyHandler

  • akan menampilkan

    Promise<Response>

• handle

  void

  Melakukan 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.

  • 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 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.

  • akan menampilkan

    [Promise<Response>, Promise<void>]

    Tupel promise [response, done] yang dapat digunakan untuk menentukan kapan respons diselesaikan serta kapan pengendali telah menyelesaikan semua tugasnya.

StrategyHandler

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

Properti

• konstruktor

  void

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

  Konstruktor juga melakukan inisialisasi status yang akan diteruskan ke setiap plugin yang menangani permintaan ini.

  Fungsi constructor terlihat seperti:

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

  • strategi

    Strategi

  • opsi

    HandlerCallbackOptions

  • akan menampilkan

    StrategyHandler

• peristiwa

  ExtendableEvent

• params

  apa pun opsional

• minta

  Permintaan

• url

  URL opsional

• cacheMatch

  void

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

  Metode siklus proses plugin berikut dipanggil saat menggunakan metode ini:

  • cacheKeyWillBeUsed()
  • cachedResponseWillBeUsed()

  Fungsi cacheMatch terlihat seperti:

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

  • kunci

    RequestInfo

    Permintaan atau URL yang akan digunakan sebagai kunci cache.

  • akan menampilkan

    Promise<Response>

    Respons yang cocok, jika ditemukan.

• cachePut

  void

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

  Metode siklus proses plugin berikut dipanggil saat menggunakan metode ini:

  • cacheKeyWillBeUsed()
  • cacheWillUpdate()
  • cacheDidUpdate()

  Fungsi cachePut terlihat seperti:

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

  • kunci

    RequestInfo

    Permintaan atau URL yang akan digunakan sebagai kunci cache.

  • respons

    Respons

    Respons untuk cache.

  • akan menampilkan

    Promise<boolean>

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

• hancurkan

  void

  Menghentikan strategi dan segera menyelesaikan promise waitUntil() yang tertunda.

  Fungsi destroy terlihat seperti:

  () => {...}

• doneWaiting

  void

  Menampilkan promise yang diselesaikan setelah semua promise yang diteruskan ke workbox-strategies.StrategyHandler~waitUntil selesai.

  Catatan: setiap pekerjaan yang dilakukan setelah doneWaiting() diselesaikan harus diteruskan secara manual ke metode waitUntil() peristiwa (bukan metode waitUntil() pengendali ini), jika tidak, thread pekerja layanan dapat dihentikan sebelum pekerjaan Anda selesai.

  Fungsi doneWaiting terlihat seperti:

  () => {...}

  • akan menampilkan

    Promise<void>

• ambil

  void

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

  Metode siklus proses plugin berikut dipanggil saat menggunakan metode ini:

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

  Fungsi fetch terlihat seperti:

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

  • input

    RequestInfo

    URL atau permintaan yang akan diambil.

  • akan menampilkan

    Promise<Response>

• fetchAndCachePut

  void

  Memanggil this.fetch() dan (di latar belakang) menjalankan this.cachePut() pada 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.

  Fungsi fetchAndCachePut terlihat seperti:

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

  • input

    RequestInfo

    Permintaan atau URL yang akan diambil dan di-cache.

  • akan menampilkan

    Promise<Response>

• getCacheKey

  void

  Memeriksa daftar plugin untuk callback cacheKeyWillBeUsed, dan menjalankan callback yang ditemukan secara berurutan. Objek Request akhir yang ditampilkan oleh plugin terakhir diperlakukan sebagai kunci cache untuk pembacaan dan/atau penulisan cache. Jika tidak ada callback plugin cacheKeyWillBeUsed yang telah terdaftar, permintaan yang diteruskan akan ditampilkan tanpa diubah

  Fungsi getCacheKey terlihat seperti:

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

  • minta

    Permintaan

  • mode

    "read"
     | "write"
    

  • akan menampilkan

    Promise<Request>

• hasCallback

  void

  Menampilkan true jika strategi memiliki minimal satu plugin dengan callback yang diberikan.

  Fungsi hasCallback terlihat seperti:

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

  • nama

    C

    Nama callback yang akan diperiksa.

  • akan menampilkan

    boolean

• iterateCallbacks

  void

  Menerima callback dan menampilkan callback plugin yang cocok yang dapat di-iterasi, dengan 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 terlihat seperti:

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

  • nama

    C

    Nama 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 yang diberikan (digabungkan dengan status plugin saat ini) sebagai satu-satunya argumen.

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

  Fungsi runCallbacks terlihat seperti:

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

  • nama

    C

    Nama callback yang akan dijalankan dalam setiap plugin.

  • param

    Omit<indexedAccess"state"
    >

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

  • akan menampilkan

    Promise<void>

• waitUntil

  void

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

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

  Fungsi waitUntil terlihat seperti:

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

  • promise

    Promise<T>

    Promise untuk ditambahkan ke promise masa pakai yang diperpanjang dari peristiwa yang memicu permintaan.

  • akan menampilkan

    Promise<T>

StrategyOptions

Properti

• cacheName

  string opsional

• fetchOptions

  RequestInit opsional

• matchOptions

  CacheQueryOptions opsional

• plugin

  WorkboxPlugin[] opsional