Saat pekerja layanan pertama kali diperkenalkan, serangkaian strategi caching umum akan muncul. Strategi caching adalah pola yang menentukan cara pekerja layanan menghasilkan respons setelah menerima peristiwa pengambilan.
workbox-strategies
menyediakan strategi caching yang paling umum sehingga mudah untuk menerapkannya dalam pekerja layanan Anda.
Kita tidak akan membahas detail selain strategi yang didukung oleh Workbox, tetapi Anda dapat mempelajari lebih lanjut di Buku Petunjuk Offline.
Menggunakan Strategi
Pada contoh berikut, kami akan menunjukkan cara menggunakan strategi caching 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 caching secara langsung tanpa workbox-routing
.
Usang-Saat-Validasi Ulang
Pola stale-when-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 yang usang saat validasi ulang, strategi ini akan selalu membuat permintaan validasi ulang, terlepas dari usia respons yang di-cache.
Ini adalah strategi yang cukup umum jika memiliki resource terbaru tidak terlalu 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)
Aplikasi web offline akan sangat bergantung pada cache, tetapi untuk aset yang tidak begitu 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 ini akan dipenuhi oleh permintaan jaringan dan responsnya akan disimpan dalam cache sehingga permintaan berikutnya disalurkan langsung dari cache.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(({request}) => request.destination === 'style', new CacheFirst());
Jaringan Terlebih Dahulu (Jaringan Kembali ke Cache)
Untuk permintaan yang sering diperbarui, strategi mengutamakan jaringan adalah solusi yang ideal. Secara default, fungsi ini akan mencoba mengambil respons terbaru dari jaringan. Jika permintaan berhasil, respons akan ditempatkan dalam 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 memerlukan permintaan tertentu untuk dipenuhi dari jaringan, strategi yang digunakan adalah jaringan saja.
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());
Hanya Cache
Strategi hanya cache memastikan bahwa respons diperoleh dari cache. Hal ini kurang umum di kotak kerja, tetapi dapat berguna jika Anda memiliki langkah pra-cache Anda sendiri.
import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());
Mengonfigurasi Strategi
Semua strategi ini memungkinkan Anda mengonfigurasi:
- Nama cache yang akan digunakan dalam strategi.
- Pembatasan masa berlaku cache untuk digunakan dalam strategi.
- Array plugin yang akan memanggil metode siklus prosesnya saat mengambil dan meng-cache permintaan.
Mengubah Cache yang Digunakan oleh Strategi
Anda dapat mengubah cache yang digunakan strategi 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 seperangkat plugin yang dapat digunakan dengan strategi ini.
- workbox-background-sync
- workbox-broadcast-update
- workbox-cacheable-response
- masa berlaku kotak kerja
- permintaan-rentang-kotak kerja
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 Khusus
Selain mengonfigurasi strategi, Workbox memungkinkan Anda membuat strategi kustom 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 menampilkanPromise
yang akan di-resolve denganResponse
, yang memanggil semua callback plugin yang relevan.handleAll()
: Serupa denganhandle()
, tetapi menampilkan dua objekPromise
. Yang pertama setara dengan yang ditampilkanhandle()
dan yang kedua akan diselesaikan saat promise yang ditambahkan keevent.waitUntil()
dalam strategi telah selesai.
Kedua strategi permintaan dipanggil dengan dua parameter:
request
:Request
yang akan ditampilkan respons oleh strategi.handler
: InstanceStrategyHandler
dibuat secara otomatis untuk strategi saat ini.
Membuat Strategi Baru
Berikut adalah contoh strategi baru yang mengimplementasikan 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 pluginrequestWillFetch()
,fetchDidSucceed()
, danfetchDidFail()
cacheMatch
: Mencocokkan permintaan dari cache, dan memanggil metode siklus proses plugincacheKeyWillBeUsed()
dancachedResponseWillBeUsed()
cachePut
: Menempatkan pasangan permintaan/respons di cache, dan memanggil metode siklus proses plugincacheKeyWillBeUsed()
,cacheWillUpdate()
, dancacheDidUpdate()
fetchAndCachePut
: Memanggilfetch()
dan menjalankancachePut()
di latar belakang pada respons yang dihasilkan olehfetch()
.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 iterable callback plugin yang cocok, dengan setiap callback dibungkus dengan status pengendali saat ini (yaitu, ketika Anda memanggil setiap callback, parameter objek apa pun yang Anda teruskan akan digabungkan dengan status plugin saat ini).waitUntil
: Menambahkan promise ke promise yang memperpanjang masa aktif dari peristiwa yang terkait dengan permintaan yang ditangani (biasanyaFetchEvent
).doneWaiting
: Menampilkan promise yang selesai setelah semua promise yang diteruskan kewaitUntil()
selesai.destroy
: Berhenti menjalankan strategi dan segera menyelesaikan semua janjiwaitUntil()
yang tertunda.
Strategi Perlombaan Jaringan Cache Kustom
Contoh berikut didasarkan pada cache-network-race dari Panduan Lengkap Offline (yang tidak disediakan Workbox), tetapi selangkah lebih maju dan selalu memperbarui 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 sendiri, Anda dapat menggunakan class strategi untuk menjalankan permintaan melalui strategi tertentu.
Misalnya, untuk menggunakan strategi usang saat validasi ulang, 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 kotak kerja.
Jenis
CacheFirst
Implementasi strategi permintaan cache-first.
Strategi cache first berguna untuk aset yang telah direvisi, seperti URL seperti /styles/example.a8f5f1.css
, karena dapat di-cache untuk jangka waktu yang lama.
Jika permintaan jaringan gagal, dan tidak ada kecocokan cache, pengecualian WorkboxError
akan ditampilkan.
Properti
-
konstruktor
void
Membuat instance strategi baru 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
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitSelesai
void
Fungsi
_awaitComplete
terlihat seperti:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<void>
-
-
_getResponse
void
Fungsi
_getResponse
terlihat seperti:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<Response>
-
-
handle
void
Menjalankan strategi permintaan dan menampilkan
Promise
yang akan di-resolve denganResponse
, 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 keevent.respondWith()
.Fungsi
handle
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve keResponse
, tetapi akan menampilkan tuple promise[response, done]
, dengan yang pertama (response
) setara dengan yang ditampilkanhandle()
, dan yang kedua adalah Promise yang akan di-resolve setelah promise yang ditambahkan keevent.waitUntil()
sebagai bagian dari pelaksanaan strategi telah selesai.Anda dapat menunggu promise
done
untuk memastikan pekerjaan tambahan apa pun yang dilakukan oleh strategi (biasanya menyimpan respons dalam cache) berhasil diselesaikan.Fungsi
handleAll
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
[Promise<Response>, Promise<void>]
Tuple dari [response, complete], promise yang dapat digunakan untuk menentukan kapan respons di-resolve, serta saat pengendali telah menyelesaikan semua tugasnya.
-
CacheOnly
Implementasi strategi permintaan hanya cache.
Class ini berguna jika Anda ingin memanfaatkan plugin Workbox apa pun.
Jika tidak ada kecocokan cache, pengecualian WorkboxError
akan ditampilkan.
Properti
-
konstruktor
void
Membuat instance strategi baru 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
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitSelesai
void
Fungsi
_awaitComplete
terlihat seperti:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<void>
-
-
_getResponse
void
Fungsi
_getResponse
terlihat seperti:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<Response>
-
-
handle
void
Menjalankan strategi permintaan dan menampilkan
Promise
yang akan di-resolve denganResponse
, 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 keevent.respondWith()
.Fungsi
handle
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve keResponse
, tetapi akan menampilkan tuple promise[response, done]
, dengan yang pertama (response
) setara dengan yang ditampilkanhandle()
, dan yang kedua adalah Promise yang akan di-resolve setelah promise yang ditambahkan keevent.waitUntil()
sebagai bagian dari pelaksanaan strategi telah selesai.Anda dapat menunggu promise
done
untuk memastikan pekerjaan tambahan apa pun yang dilakukan oleh strategi (biasanya menyimpan respons dalam cache) berhasil diselesaikan.Fungsi
handleAll
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
[Promise<Response>, Promise<void>]
Tuple dari [response, complete], promise yang dapat digunakan untuk menentukan kapan respons di-resolve, serta saat pengendali telah menyelesaikan semua tugasnya.
-
NetworkFirst
Implementasi strategi permintaan yang mengutamakan jaringan.
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, pengecualian WorkboxError
akan ditampilkan.
Properti
-
konstruktor
void
Fungsi
constructor
terlihat seperti:(options?: NetworkFirstOptions) => {...}
-
opsi
NetworkFirstOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitSelesai
void
Fungsi
_awaitComplete
terlihat seperti:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<void>
-
-
_getResponse
void
Fungsi
_getResponse
terlihat seperti:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<Response>
-
-
handle
void
Menjalankan strategi permintaan dan menampilkan
Promise
yang akan di-resolve denganResponse
, 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 keevent.respondWith()
.Fungsi
handle
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve keResponse
, tetapi akan menampilkan tuple promise[response, done]
, dengan yang pertama (response
) setara dengan yang ditampilkanhandle()
, dan yang kedua adalah Promise yang akan di-resolve setelah promise yang ditambahkan keevent.waitUntil()
sebagai bagian dari pelaksanaan strategi telah selesai.Anda dapat menunggu promise
done
untuk memastikan pekerjaan tambahan apa pun yang dilakukan oleh strategi (biasanya menyimpan respons dalam cache) berhasil diselesaikan.Fungsi
handleAll
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
[Promise<Response>, Promise<void>]
Tuple dari [response, complete], promise yang dapat digunakan untuk menentukan kapan respons di-resolve, serta saat pengendali telah menyelesaikan semua tugasnya.
-
NetworkFirstOptions
Properti
-
cacheName
string opsional
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
networkTimeoutSeconds
nomor opsional
-
plugin
WorkboxPlugin[] opsional
NetworkOnly
Implementasi strategi permintaan khusus jaringan.
Class ini berguna jika Anda ingin memanfaatkan plugin Workbox apa pun.
Jika permintaan jaringan gagal, pengecualian WorkboxError
akan ditampilkan.
Properti
-
konstruktor
void
Fungsi
constructor
terlihat seperti:(options?: NetworkOnlyOptions) => {...}
-
opsi
NetworkOnlyOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitSelesai
void
Fungsi
_awaitComplete
terlihat seperti:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<void>
-
-
_getResponse
void
Fungsi
_getResponse
terlihat seperti:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<Response>
-
-
handle
void
Menjalankan strategi permintaan dan menampilkan
Promise
yang akan di-resolve denganResponse
, 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 keevent.respondWith()
.Fungsi
handle
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve keResponse
, tetapi akan menampilkan tuple promise[response, done]
, dengan yang pertama (response
) setara dengan yang ditampilkanhandle()
, dan yang kedua adalah Promise yang akan di-resolve setelah promise yang ditambahkan keevent.waitUntil()
sebagai bagian dari pelaksanaan strategi telah selesai.Anda dapat menunggu promise
done
untuk memastikan pekerjaan tambahan apa pun yang dilakukan oleh strategi (biasanya menyimpan respons dalam cache) berhasil diselesaikan.Fungsi
handleAll
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
[Promise<Response>, Promise<void>]
Tuple dari [response, complete], promise yang dapat digunakan untuk menentukan kapan respons di-resolve, serta saat pengendali telah menyelesaikan semua tugasnya.
-
NetworkOnlyOptions
Properti
-
fetchOptions
RequestInit opsional
-
networkTimeoutSeconds
nomor opsional
-
plugin
WorkboxPlugin[] opsional
StaleWhileRevalidate
Implementasi strategi permintaan buang saat validasi ulang.
Resource diminta dari cache dan jaringan secara paralel. Strategi ini akan merespons dengan versi yang di-cache jika tersedia. Jika tidak, tunggu respons jaringan. Cache diupdate 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, pengecualian WorkboxError
akan ditampilkan.
Properti
-
konstruktor
void
Fungsi
constructor
terlihat seperti:(options?: StrategyOptions) => {...}
-
opsi
StrategyOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitSelesai
void
Fungsi
_awaitComplete
terlihat seperti:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<void>
-
-
_getResponse
void
Fungsi
_getResponse
terlihat seperti:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<Response>
-
-
handle
void
Menjalankan strategi permintaan dan menampilkan
Promise
yang akan di-resolve denganResponse
, 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 keevent.respondWith()
.Fungsi
handle
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve keResponse
, tetapi akan menampilkan tuple promise[response, done]
, dengan yang pertama (response
) setara dengan yang ditampilkanhandle()
, dan yang kedua adalah Promise yang akan di-resolve setelah promise yang ditambahkan keevent.waitUntil()
sebagai bagian dari pelaksanaan strategi telah selesai.Anda dapat menunggu promise
done
untuk memastikan pekerjaan tambahan apa pun yang dilakukan oleh strategi (biasanya menyimpan respons dalam cache) berhasil diselesaikan.Fungsi
handleAll
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
[Promise<Response>, Promise<void>]
Tuple dari [response, complete], promise yang dapat digunakan untuk menentukan kapan respons di-resolve, serta saat pengendali telah menyelesaikan semua tugasnya.
-
Strategy
Class dasar abstrak yang harus diperluas oleh semua class strategi lainnya:
Properti
-
konstruktor
void
Membuat instance strategi baru 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
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitSelesai
void
Fungsi
_awaitComplete
terlihat seperti:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<void>
-
-
_getResponse
void
Fungsi
_getResponse
terlihat seperti:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
event
ExtendableEvent
-
akan menampilkan
Promise<Response>
-
-
_nama sebutan channel
void
Fungsi
_handle
terlihat seperti:(request: Request, handler: StrategyHandler) => {...}
-
minta
Permintaan
-
handler
-
akan menampilkan
Promise<Response>
-
-
handle
void
Menjalankan strategi permintaan dan menampilkan
Promise
yang akan di-resolve denganResponse
, 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 keevent.respondWith()
.Fungsi
handle
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve keResponse
, tetapi akan menampilkan tuple promise[response, done]
, dengan yang pertama (response
) setara dengan yang ditampilkanhandle()
, dan yang kedua adalah Promise yang akan di-resolve setelah promise yang ditambahkan keevent.waitUntil()
sebagai bagian dari pelaksanaan strategi telah selesai.Anda dapat menunggu promise
done
untuk memastikan pekerjaan tambahan apa pun yang dilakukan oleh strategi (biasanya menyimpan respons dalam cache) berhasil diselesaikan.Fungsi
handleAll
terlihat seperti:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan properti yang tercantum di bawah ini.
-
akan menampilkan
[Promise<Response>, Promise<void>]
Tuple dari [response, complete], promise yang dapat digunakan untuk menentukan kapan respons di-resolve, serta saat pengendali telah menyelesaikan semua tugasnya.
-
StrategyHandler
Class yang dibuat setiap kali instance Strategi memanggil workbox-strategies.Strategy~handle
atau workbox-strategies.Strategy~handleAll
yang menggabungkan semua tindakan pengambilan dan cache di seluruh callback plugin dan melacak kapan strategi "selesai" (artinya 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 setiap plugin yang menangani permintaan ini.
Fungsi
constructor
terlihat seperti:(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
strategi
-
akan menampilkan
-
-
event
ExtendableEvent
-
params
opsional
-
minta
Permintaan
-
url
URL opsional
-
cacheMatch
void
Mencocokkan permintaan dari cache (dan memanggil metode callback plugin yang berlaku) menggunakan
cacheName
,matchOptions
, danplugins
yang ditentukan pada objek strategi.Metode siklus proses plugin berikut dipanggil saat menggunakan metode ini:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
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
danplugins
yang ditentukan pada objek strategi.Metode siklus proses plugin berikut dipanggil saat menggunakan metode ini:
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
Fungsi
cachePut
terlihat seperti:(key: RequestInfo, response: Response) => {...}
-
kunci
RequestInfo
Permintaan atau URL yang akan digunakan sebagai kunci cache.
-
respons
Respons
Respons terhadap cache.
-
akan menampilkan
Promise<boolean>
false
jika cachewillUpdate menyebabkan respons tidak di-cache, dantrue
jika tidak.
-
destroy
void
Berhenti menjalankan strategi dan segera menyelesaikan semua promise
waitUntil()
yang tertunda.Fungsi
destroy
terlihat seperti:() => {...}
-
doneWaiting
void
Menampilkan promise yang selesai setelah semua promise yang diteruskan ke
workbox-strategies.StrategyHandler~waitUntil
diselesaikan.Catatan: setiap pekerjaan yang dilakukan setelah
doneWaiting()
selesai harus diteruskan secara manual ke metodewaitUntil()
peristiwa (bukan metodewaitUntil()
pengendali ini). Jika tidak, thread pekerja layanan akan dihentikan sebelum pekerjaan Anda selesai.Fungsi
doneWaiting
terlihat seperti:() => {...}
-
akan menampilkan
Promise<void>
-
-
fetch
void
Mengambil permintaan tertentu (dan memanggil metode callback plugin yang berlaku) menggunakan
fetchOptions
(untuk permintaan non-navigasi) danplugins
yang ditentukan pada objekStrategy
.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) menjalankanthis.cachePut()
pada respons yang dihasilkan olehthis.fetch()
.Panggilan ke
this.cachePut()
akan otomatis memanggilthis.waitUntil()
, sehingga Anda tidak perlu memanggilwaitUntil()
secara manual pada peristiwa tersebut.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 mengeksekusi semua callback yang ditemukan secara berurutan. ObjekRequest
akhir yang ditampilkan oleh plugin terakhir diperlakukan sebagai kunci cache untuk pembacaan dan/atau penulisan cache. Jika tidak ada callback plugincacheKeyWillBeUsed
yang terdaftar, permintaan yang diteruskan akan ditampilkan tanpa modifikasiFungsi
getCacheKey
terlihat seperti:(request: Request, mode: "read"
| "write"
) => {...}-
minta
Permintaan
-
mode
-
akan menampilkan
Promise<Permintaan>
-
-
hasCallback
void
Menampilkan true (benar) jika strategi memiliki setidaknya satu plugin dengan callback yang diberikan.
Fungsi
hasCallback
terlihat seperti:(name: C) => {...}
-
name
C
Nama callback yang akan diperiksa.
-
akan menampilkan
boolean
-
-
iterateCallbacks
void
Menerima callback dan menampilkan iterable callback plugin yang cocok, dengan setiap callback dibungkus dengan status pengendali saat ini (yaitu, ketika Anda memanggil setiap callback, parameter objek apa pun yang Anda teruskan akan digabungkan dengan status plugin saat ini).
Fungsi
iterateCallbacks
terlihat seperti:(name: C) => {...}
-
name
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, meneruskan objek parameter yang diberikan (menggabungkan status plugin saat ini) sebagai satu-satunya argumen.
Catatan: karena metode ini menjalankan semua plugin, metode ini tidak cocok untuk kasus ketika nilai yang ditampilkan 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"
>) => {...}-
name
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
Promise<void>
-
-
waitUntil
void
Menambahkan promise ke [extend seumur hidup promise]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
dari peristiwa peristiwa yang terkait dengan permintaan yang ditangani (biasanyaFetchEvent
).Catatan: Anda dapat menunggu
workbox-strategies.StrategyHandler~doneWaiting
untuk mengetahui kapan semua promise yang ditambahkan telah diselesaikan.Fungsi
waitUntil
terlihat seperti:(promise: Promise<T>) => {...}
-
janji
Promise<T>
Promise yang akan ditambahkan ke promise untuk memperpanjang masa aktif dari peristiwa yang memicu permintaan tersebut.
-
akan menampilkan
Promise<T>
-
StrategyOptions
Properti
-
cacheName
string opsional
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
WorkboxPlugin[] opsional