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
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)
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)
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
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
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.
- 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 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 menampilkanPromise
yang akan di-resolve denganResponse
, memanggil semua callback plugin yang relevan.handleAll()
: Serupa denganhandle()
, tetapi menampilkan dua objekPromise
. Yang pertama adalah setara dengan hal yang ditampilkanhandle()
dan yang kedua akan di-resolve saat promise yang yang ditambahkan keevent.waitUntil()
dalam strategi telah selesai.
Kedua strategi permintaan dipanggil dengan dua parameter:
request
:Request
yang strateginya akan menampilkan respons.handler
: InstanceStrategyHandler
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 memanggilrequestWillFetch()
,fetchDidSucceed()
, dan Metode siklus proses pluginfetchDidFail()
cacheMatch
: Mencocokkan permintaan dari cache, dan memanggilcacheKeyWillBeUsed()
serta Metode siklus proses plugincachedResponseWillBeUsed()
cachePut
: Menempatkan pasangan permintaan/respons di cache, dan memanggilcacheKeyWillBeUsed()
, Metode siklus proses plugincacheWillUpdate()
, dancacheDidUpdate()
fetchAndCachePut
: Memanggilfetch()
dan menjalankancachePut()
di latar belakang pada respons yang dibuat olehfetch()
.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 (biasanyaFetchEvent
).doneWaiting
: Menampilkan promise yang di-resolve setelah semua promise yang diteruskan kewaitUntil()
memiliki diselesaikan.destroy
: Berhenti menjalankan strategi dan segera menyelesaikan semua promisewaitUntil()
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) => {...}
-
opsi
StrategyOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitComplete
void
Fungsi
_awaitComplete
akan terlihat seperti ini:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
peristiwa
ExtendableEvent
-
akan menampilkan
Janji<void>
-
-
_getResponse
void
Fungsi
_getResponse
akan terlihat seperti ini:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
peristiwa
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 otomatis dipanggil saat rute cocok.Atau, metode ini dapat digunakan dalam
FetchEvent
mandiri pemroses dengan meneruskannya keevent.respondWith()
.Fungsi
handle
akan terlihat seperti ini:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve menjadiResponse
fungsi tersebut akan menampilkan tuple promise[response, done]
, yang mana (response
) setara dengan apa yang ditampilkanhandle()
, dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan keevent.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) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
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) => {...}
-
opsi
StrategyOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitComplete
void
Fungsi
_awaitComplete
akan terlihat seperti ini:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
peristiwa
ExtendableEvent
-
akan menampilkan
Janji<void>
-
-
_getResponse
void
Fungsi
_getResponse
akan terlihat seperti ini:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
peristiwa
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 otomatis dipanggil saat rute cocok.Atau, metode ini dapat digunakan dalam
FetchEvent
mandiri pemroses dengan meneruskannya keevent.respondWith()
.Fungsi
handle
akan terlihat seperti ini:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve menjadiResponse
fungsi tersebut akan menampilkan tuple promise[response, done]
, yang mana (response
) setara dengan apa yang ditampilkanhandle()
, dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan keevent.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) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
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) => {...}
-
opsi
NetworkFirstOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitComplete
void
Fungsi
_awaitComplete
akan terlihat seperti ini:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
peristiwa
ExtendableEvent
-
akan menampilkan
Janji<void>
-
-
_getResponse
void
Fungsi
_getResponse
akan terlihat seperti ini:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
peristiwa
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 otomatis dipanggil saat rute cocok.Atau, metode ini dapat digunakan dalam
FetchEvent
mandiri pemroses dengan meneruskannya keevent.respondWith()
.Fungsi
handle
akan terlihat seperti ini:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve menjadiResponse
fungsi tersebut akan menampilkan tuple promise[response, done]
, yang mana (response
) setara dengan apa yang ditampilkanhandle()
, dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan keevent.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) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
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) => {...}
-
opsi
NetworkOnlyOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitComplete
void
Fungsi
_awaitComplete
akan terlihat seperti ini:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
peristiwa
ExtendableEvent
-
akan menampilkan
Janji<void>
-
-
_getResponse
void
Fungsi
_getResponse
akan terlihat seperti ini:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
peristiwa
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 otomatis dipanggil saat rute cocok.Atau, metode ini dapat digunakan dalam
FetchEvent
mandiri pemroses dengan meneruskannya keevent.respondWith()
.Fungsi
handle
akan terlihat seperti ini:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve menjadiResponse
fungsi tersebut akan menampilkan tuple promise[response, done]
, yang mana (response
) setara dengan apa yang ditampilkanhandle()
, dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan keevent.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) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
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) => {...}
-
opsi
StrategyOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitComplete
void
Fungsi
_awaitComplete
akan terlihat seperti ini:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
peristiwa
ExtendableEvent
-
akan menampilkan
Janji<void>
-
-
_getResponse
void
Fungsi
_getResponse
akan terlihat seperti ini:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
peristiwa
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 otomatis dipanggil saat rute cocok.Atau, metode ini dapat digunakan dalam
FetchEvent
mandiri pemroses dengan meneruskannya keevent.respondWith()
.Fungsi
handle
akan terlihat seperti ini:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve menjadiResponse
fungsi tersebut akan menampilkan tuple promise[response, done]
, yang mana (response
) setara dengan apa yang ditampilkanhandle()
, dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan keevent.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) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
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) => {...}
-
opsi
StrategyOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugin
-
_awaitComplete
void
Fungsi
_awaitComplete
akan terlihat seperti ini:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
peristiwa
ExtendableEvent
-
akan menampilkan
Janji<void>
-
-
_getResponse
void
Fungsi
_getResponse
akan terlihat seperti ini:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
minta
Permintaan
-
peristiwa
ExtendableEvent
-
akan menampilkan
Promise<Response>
-
-
_handle
void
Fungsi
_handle
akan terlihat seperti ini:(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 otomatis dipanggil saat rute cocok.Atau, metode ini dapat digunakan dalam
FetchEvent
mandiri pemroses dengan meneruskannya keevent.respondWith()
.Fungsi
handle
akan terlihat seperti ini:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
akan menampilkan
Promise<Response>
-
-
handleAll
void
Serupa dengan
workbox-strategies.Strategy~handle
, tetapi bukan hanya menampilkanPromise
yang di-resolve menjadiResponse
fungsi tersebut akan menampilkan tuple promise[response, done]
, yang mana (response
) setara dengan apa yang ditampilkanhandle()
, dan yang terakhir adalah Promise yang akan diselesaikan setelah promise apa pun yang ditambahkan keevent.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) => {...}
-
opsi
FetchEvent | HandlerCallbackOptions
FetchEvent
atau objek dengan yang tercantum di bawah ini.
-
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) => {...}
-
strategi
-
akan menampilkan
-
-
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
, danplugins
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<Response>
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
danplugins
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<boolean>
false
jika cachewillUpdate menyebabkan respons tidak di-cache, dantrue
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 metodewaitUntil()
peristiwa (bukan metode metodewaitUntil()
), 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) danplugins
ditentukan pada objekStrategy
.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<Response>
-
fetchAndCachePut
void
Memanggil
this.fetch()
dan (di latar belakang) menjalankanthis.cachePut()
di 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
akan terlihat seperti ini:(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 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 plugincacheKeyWillBeUsed
yang memiliki telah terdaftar, permintaan yang diteruskan akan ditampilkan tanpaFungsi
getCacheKey
akan terlihat seperti ini:(request: Request, mode: "read"
| "write"
) => {...}-
minta
Permintaan
-
mode
"baca"
| "write"
-
akan menampilkan
Promise<Request>
-
-
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 (biasanyaFetchEvent
).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