Salah satu fitur pekerja layanan adalah
kemampuan untuk menyimpan serangkaian file ke
cache ketika pekerja layanan sedang diinstal.
Alasan utama untuk melakukannya adalah karena memberi developer kontrol atas
{i>cache<i},
Workbox melakukan banyak pekerjaan berat dari pra-cache dengan menyederhanakan
API dan memastikan aset didownload secara efisien.
Cara Kerja Pra-penyimpanan Workbox
Saat aplikasi web dimuat untuk pertama kalinya,workbox-precaching
akan melihat semua
aset yang ingin Anda download,
workbox-precaching
melakukan semua ini selama
peristiwa install
pekerja layanan.
Ketika nanti pengguna mengunjungi kembali aplikasi web Anda dan Anda memiliki pekerja layanan baru dengan
berbagai aset yang telah disimpan sebelumnya,workbox-precaching
akan melihat daftar baru
dan menentukan aset mana yang
benar-benar baru dan aset mana yang ada
perlu diperbarui,install
pekerja layanan baru.
Pekerja layanan baru ini tidak akan digunakan untuk merespons permintaan hingga peristiwa activate
-nya
telah dipicu.activate
itulah workbox-precaching
akan memeriksa aset yang di-cache yang tidak lagi ada di
daftar URL saat ini,
workbox-precaching
akan melakukan langkah-langkah ini setiap kali pekerja layanan Anda diinstal
dan diaktifkan,
Menayangkan Respons yang Di-cache Sebelumnya
Memanggil
precacheAndRoute()
atau
addRoute()
akan membuat rute yang cocok dengan
permintaan untuk URL yang di-cache sebelumnya.
Strategi respons yang digunakan di rute ini adalah
cache-first:
respons yang di-cache sebelumnya akan digunakan,
Urutan pemanggilan precacheAndRoute()
atau addRoute()
penting.registerRoute()
.registerRoute()
terlebih dahulu,workbox-precaching
.
Penjelasan Daftar Pramuat
workbox-precaching
mengharapkan array objek dengan properti url
dan revision
.
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute([
{url: '/index.html' , revision: '383676'},
{url: '/styles/app.0c9a31.css' , revision: null},
{url: '/scripts/app.0d5770.js' , revision: null},
// ... other entries ...
]);
Daftar ini mereferensikan kumpulan URL,
Untuk objek kedua dan ketiga dalam contoh di atas,revision
adalah
ditetapkan ke null
.
Objek pertama (/
) secara eksplisit menetapkan properti revisi,
Dengan meneruskan properti revisi ke precacheAndRoute()
,
Workbox dilengkapi dengan alat untuk membantu membuat daftar ini:
workbox-build
: Ini adalah paket node yang dapat digunakan dalam tugas gulp atau sebagai skrip run npm.workbox-webpack-plugin
: Pengguna webpack dapat menggunakan plugin ini.workbox-cli
: CLI kami juga dapat digunakan untuk membuat daftar aset dan menambahkannya ke pekerja layanan Anda.
Permintaan Masuk untuk File yang Di-cache
Satu hal yang akan dilakukan workbox-precaching
secara otomatis adalah memanipulasi
permintaan jaringan yang masuk untuk mencoba mencocokkan file yang di-cache sebelumnya.
Misalnya,/
biasanya dapat dipenuhi oleh file di
/
.
Di bawah ini adalah daftar manipulasi yang dilakukan workbox-precaching
secara default,
Mengabaikan Parameter URL
Permintaan dengan parameter penelusuran dapat diubah untuk menghapus nilai tertentu,
Secara default,utm_
atau sama persis dengan fbclid
akan dihapus,/
akan dipenuhi dengan entri pra-cache untuk /
.
Anda dapat mengabaikan kumpulan parameter penelusuran yang berbeda menggunakan ignoreURLParametersMatching
:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(
[
{url: '/index.html' , revision: '383676'},
{url: '/styles/app.0c9a31.css' , revision: null},
{url: '/scripts/app.0d5770.js' , revision: null},
],
{
// Ignore all URL parameters.
ignoreURLParametersMatching: [/.*/ ],
}
);
Indeks Direktori
Permintaan yang diakhiri dengan /
akan secara default dicocokkan dengan entri yang ditambahi index.
hingga akhir./
dapat secara otomatis ditangani dengan pra-cache
entri /
.
Anda dapat mengubahnya menjadi yang lain,directoryIndex
:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(
[
{url: '/index.html' , revision: '383676'},
{url: '/styles/app.0c9a31.css' , revision: null},
{url: '/scripts/app.0d5770.js' , revision: null},
],
{
directoryIndex: null,
}
);
URL bersih
Jika permintaan gagal cocok dengan precache,.
di bagian akhir untuk mendukung
"bersih" URL (alias URL "cantik")./
akan
ditangani oleh entri yang telah di-pra-cache untuk /
.
Anda dapat menonaktifkan perilaku ini dengan menetapkan cleanUrls
:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute([{url: '/about.html' , revision: 'b79cd4'}], {
cleanUrls: false,
});
Manipulasi Kustom
Jika ingin menentukan kecocokan kustom dari permintaan masuk ke aset yang telah di-pracache,urlManipulation
.
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(
[
{url: '/index.html' , revision: '383676'},
{url: '/styles/app.0c9a31.css' , revision: null},
{url: '/scripts/app.0d5770.js' , revision: null},
],
{
urlManipulation: ({url}) => {
// Your logic goes here...
return [alteredUrlOption1, alteredUrlOption2];
},
}
);
Penggunaan Lanjutan
Menggunakan PrecacheController Secara Langsung
Secara default,workbox-precaching
akan menyiapkan pemroses install
dan activate
untuk Anda.
Daripada menggunakan ekspor default,PrecacheController
secara langsung untuk menambahkan item ke pra-cache,
import {PrecacheController} from 'workbox-precaching';
const precacheController = new PrecacheController();
precacheController. addToCacheList([
{url: '/styles/example-1.abcd.css' , revision: null},
{url: '/styles/example-2.1234.css' , revision: null},
{url: '/scripts/example-1.abcd.js' , revision: null},
{url: '/scripts/example-2.1234.js' , revision: null},
]);
precacheController. addToCacheList([{
url: '/index.html' ,
revision: 'abcd',
}, {
url: '/about.html' ,
revision: '1234',
}]);
self. addEventListener('install', (event) => {
// Passing in event is required in Workbox v6+
event. waitUntil(precacheController. install(event));
});
self. addEventListener('activate', (event) => {
// Passing in event is required in Workbox v6+
event. waitUntil(precacheController. activate(event));
});
self. addEventListener('fetch', (event) => {
const cacheKey = precacheController. getCacheKeyForURL(event. request. url);
event. respondWith(caches. match(cacheKey). then(...));
});
Membaca Aset yang Di-pra-cache Secara Langsung
Ada kalanya Anda mungkin perlu membaca aset
yang telah dipra-cache secara langsung,workbox-precaching
.
Secara umum,Response
yang di-cache sebelumnya,cache.
mungkin berisi parameter pembuatan versi yang otomatis
dibuat dan dikelola oleh workbox-precaching
.
Untuk mendapatkan kunci cache yang benar,getCacheKeyForURL()
,cache.
pada cache yang sesuai.
import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';
const cache = await caches. open(cacheNames. precache);
const response = await cache. match(getCacheKeyForURL('/precached-file.html' ));
Atau,Response
yang telah di-pra-cache,matchPrecache()
,
import {matchPrecache} from 'workbox-precaching';
const response = await matchPrecache('/precached-file.html' );
Membersihkan Pra-Cache Lama
Sebagian besar rilis {i>Workbox<i} mempertahankan format
yang sama untuk menyimpan data {i>precache<i},
Data yang sudah tidak digunakan ini seharusnya tidak mengganggu operasi normal,cleanupOutdatedCaches()
ke pekerja layanan,cleanupOutdatedCaches: true
jika Anda menggunakan salah satu alat build Workbox untuk membuat pekerja layanan.
Menggunakan Subresource Integrity
Beberapa pengembang mungkin menginginkan
jaminan tambahan yang ditawarkan oleh
integritas subresource
saat mengambil URL yang di-pra-cache dari jaringan.
Properti opsional tambahan yang disebut integrity
dapat ditambahkan ke entri mana pun di
manifes precache.integrity
saat membuat Request
yang digunakan untuk mengisi cache.
Menentukan entri manifes pra-cache mana yang harus memiliki properti integrity
,manifestTransform
dalam konfigurasi alat build Workbox dapat membantu:
const ssri = require('ssri');
const integrityManifestTransform = (originalManifest, compilation) => {
const warnings = [];
const manifest = originalManifest. map(entry => {
// If some criteria match:
if (entry. url. startsWith('...' )) {
// This has to be a synchronous function call, for example:
// compilation will be set when using workbox-webpack-plugin.
// When using workbox-build directly, you can read the file's
// contents from disk using, e.g., the fs module.
const asset = compilation. getAsset(entry. url);
entry. integrity = ssri. fromData(asset. source. source()). toString();
// Push a message to warnings if needed.
}
return entry;
});
return {warnings, manifest};
};
// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.
Jenis
CleanupResult
Properti
-
deletedCacheRequests
string[]
InstallResult
Properti
-
notUpdatedURLs
string[]
-
updatedURLs
string[]
PrecacheController
Melakukan pra-cache aset yang efisien.
Properti
-
konstruktor
void
Buat PrecacheController baru.
Fungsi
constructor
akan terlihat seperti ini:(options?: PrecacheControllerOptions) => {.
. . } -
opsi
PrecacheControllerOptions opsional
-
akan menampilkan
-
-
strategi
Strategi
-
aktifkan
void
Menghapus aset yang tidak ada lagi dalam manifes pra-cache saat ini.
Panggil metode ini dari peristiwa pengaktifan pekerja layanan. Catatan: metode ini memanggil
event.
untuk Anda,waitUntil() sehingga Anda tidak perlu untuk memanggilnya sendiri dalam pengendali peristiwa Anda. Fungsi
activate
terlihat seperti:(event: ExtendableEvent) => {.
. . } -
peristiwa
ExtendableEvent
-
akan menampilkan
Promise<CleanupResult>
-
-
addToCacheList
void
Metode ini akan menambahkan item ke daftar {i>precache<i},
menghapus duplikat dan memastikan bahwa informasi tersebut valid. Fungsi
addToCacheList
akan terlihat seperti ini:(entries: (string |
PrecacheEntry)[]) => {. . . } -
entries
(string |
PrecacheEntry)[] Array entri yang akan dipra-cache.
-
-
createHandlerBoundToURL
void
Menampilkan fungsi yang mencari
url
di precache (dengan informasi revisi akun),dan menampilkan Response
yang sesuai.Fungsi
createHandlerBoundToURL
terlihat seperti:(url: string) => {.
. . } -
url
string
URL yang di-cache sebelumnya yang akan digunakan untuk mencari
Response
.
-
akan menampilkan
-
-
getCacheKeyForURL
void
Menampilkan kunci cache yang digunakan untuk menyimpan URL yang diberikan.
Jika URL tersebut tidak memiliki versi, seperti `/ index. html', kunci cache akan berupa URL asli dengan parameter penelusuran yang ditambahkan. Fungsi
getCacheKeyForURL
terlihat seperti:(url: string) => {.
. . } -
url
string
URL yang kunci cache-nya ingin Anda cari.
-
akan menampilkan
string
URL berversi yang sesuai dengan kunci cache untuk URL asli,
atau tidak ditentukan jika URL tersebut tidak dipra-cache.
-
-
getCachedURLs
void
Menampilkan daftar semua URL yang telah dipra-cache oleh pekerja layanan saat ini.
Fungsi
getCachedURLs
akan terlihat seperti ini:() => {.
. . } -
akan menampilkan
string[]
URL yang di-pra-cache.
-
-
getIntegrityForCacheKey
void
Fungsi
getIntegrityForCacheKey
terlihat seperti:(cacheKey: string) => {.
. . } -
cacheKey
string
-
akan menampilkan
string
Integritas sub-resource yang terkait dengan kunci cache,
atau belum ditentukan jika tidak ditetapkan.
-
-
getURLsToCacheKeys
void
Menampilkan pemetaan URL yang di-pra-cache ke kunci cache yang sesuai,
dengan mengambil mempertimbangkan informasi revisi untuk URL. Fungsi
getURLsToCacheKeys
terlihat seperti:() => {.
. . } -
akan menampilkan
Map<stringstring>
URL untuk meng-cache pemetaan tombol.
-
-
instal
void
Menyimpan aset baru dan yang diperbarui ke dalam cache.
Panggil metode ini dari pekerja layanan instal. Catatan: metode ini memanggil
event.
untuk Anda,waitUntil() sehingga Anda tidak perlu untuk memanggilnya sendiri dalam pengendali peristiwa Anda. Fungsi
install
terlihat seperti:(event: ExtendableEvent) => {.
. . } -
peristiwa
ExtendableEvent
-
akan menampilkan
Promise<InstallResult>
-
-
matchPrecache
void
Ini berfungsi sebagai pengganti langsung untuk
cache.
dengan perbedaan berikut:match() - Fungsi ini mengetahui nama pra-cache,
dan hanya memeriksa cache tersebut. - Hal ini memungkinkan Anda meneruskan tanpa parameter pembuatan versi,
dan secara otomatis mencari kunci {i> cache<i} yang benar untuk revisi aktif dari URL tersebut.
Mis.
, matchPrecache(
akan menemukan respons pra-cache yang benar untuk pekerja layanan yang saat ini aktif,'index. html') meskipun kunci cache yang sebenarnya adalah '/
.index. html?_ _ WB_ REVISION_ _ =1234abcd' Fungsi
matchPrecache
terlihat seperti:(request: string |
Request) => {. . . } -
minta
string |
Permintaan Kunci (tanpa parameter revisi) untuk mencari di pra-cache.
-
akan menampilkan
Promise<Respons>
- Fungsi ini mengetahui nama pra-cache,
-
pra-cache
void
Menambahkan item ke daftar {i>precache<i},
menghapus semua duplikasi dan menyimpan file dalam cache" kapan layanan penginstalan pekerja. Metode ini dapat dipanggil beberapa kali.
Fungsi
precache
akan terlihat seperti ini:(entries: (string |
PrecacheEntry)[]) => {. . . } -
entries
(string |
PrecacheEntry)[]
-
PrecacheEntry
Properti
-
integritas
string opsional
-
revisi
string opsional
-
url
string
PrecacheFallbackPlugin
PrecacheFallbackPlugin
memungkinkan Anda menentukan respons "penggantian offline"
yang akan digunakan saat strategi tertentu tidak dapat menghasilkan respons.
Hal ini dilakukan dengan mencegat callback plugin handlerDidError
dan menampilkan respons yang di-cache sebelumnya,
Kecuali Anda secara eksplisit meneruskan instance PrecacheController
ke
,
Properti
-
konstruktor
void
Membuat PrecacheFallbackPlugin baru dengan fallbackURL terkait.
Fungsi
constructor
akan terlihat seperti ini:(config: object) => {.
. . } -
config
objek
-
fallbackURL
string
URL yang di-cache sebelumnya untuk digunakan sebagai pengganti jika strategi terkait tidak dapat menghasilkan respons.
-
precacheController
PrecacheController opsional
-
-
akan menampilkan
-
PrecacheRoute
Subclass dari workbox-routing.
yang menggunakan
workbox-precaching.
dan menggunakannya untuk mencocokkan permintaan yang masuk dan menangani pengambilan
dari precache.
Properti
-
konstruktor
void
Fungsi
constructor
akan terlihat seperti ini:(precacheController: PrecacheController,
options?: PrecacheRouteOptions) => {. . . } -
precacheController
Instance
PrecacheController
yang digunakan untuk mencocokkan permintaan dan merespons peristiwa pengambilan. -
opsi
PrecacheRouteOptions opsional
-
akan menampilkan
-
-
catchHandler
RouteHandlerObject opsional
-
handler
-
cocok
-
method
HTTPMethod
-
setCatchHandler
void
Fungsi
setCatchHandler
akan terlihat seperti ini:(handler: RouteHandler) => {.
. . } -
handler
Panggilan balik yang menampilkan Promise yang me-resolve ke sebuah Respons
-
PrecacheRouteOptions
Properti
-
cleanURLs
boolean opsional
-
directoryIndex
string opsional
-
ignoreURLParametersMatching
RegExp[] opsional
-
urlManipulation
urlManipulation opsional
PrecacheStrategy
Penerapan workbox-strategies.
yang dirancang khusus untuk berfungsi dengan
workbox-precaching.
untuk menyimpan dalam cache dan mengambil aset yang telah di-cache sebelumnya.
Catatan: instance class ini dibuat secara otomatis saat membuat
PrecacheController
; Anda tidak perlu membuatnya sendiri.
Properti
-
konstruktor
void
Fungsi
constructor
akan terlihat seperti ini:(options?: PrecacheStrategyOptions) => {.
. . } -
opsi
PrecacheStrategyOptions opsional
-
akan menampilkan
-
-
cacheName
string
-
fetchOptions
RequestInit opsional
-
matchOptions
CacheQueryOptions opsional
-
plugins
-
copyRedirectedCacheableResponsesPlugin
-
defaultPrecacheCacheabilityPlugin
-
_
awaitComplete void
Fungsi
_
akan terlihat seperti ini:awaitComplete (responseDone: Promise<Response>,
handler: StrategyHandler, request: Request, event: ExtendableEvent) => {. . . } -
responseDone
Promise<Response>
-
handler
-
minta
Permintaan
-
peristiwa
ExtendableEvent
-
akan menampilkan
Promise<void>
-
-
_
getResponse void
Fungsi
_
akan terlihat seperti ini:getResponse (handler: StrategyHandler,
request: Request, event: ExtendableEvent) => {. . . } -
handler
-
minta
Permintaan
-
peristiwa
ExtendableEvent
-
akan menampilkan
Promise<Response>
-
-
_
handleFetch void
Fungsi
_
terlihat seperti:handleFetch (request: Request,
handler: StrategyHandler) => {. . . } -
minta
Permintaan
-
handler
-
akan menampilkan
Promise<Response>
-
-
_
handleInstall void
Fungsi
_
akan terlihat seperti ini:handleInstall (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 dalam FetchEvent
mandiri pemroses dengan meneruskannya keevent.
.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 keResponse
,fungsi ini 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 ke event.
sebagai bagian dari menjalankan strategi selesai.waitUntil() 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 properti yang tercantum di bawah.
-
akan menampilkan
[Promise<Response>,
Promise<void>] Tuple [respons,
selesai] promise yang dapat digunakan untuk menentukan kapan respons diselesaikan sebagai serta saat {i>handler<i} telah menyelesaikan semua pekerjaannya.
-
urlManipulation()
workbox-precaching.urlManipulation(
{ url }: object,
)
Jenis
fungsi
Parameter
-
{ url }
objek
-
url
URL
-
Hasil
-
URL[]
Metode
addPlugins()
workbox-precaching.addPlugins(
plugins: WorkboxPlugin[],
)
Menambahkan plugin ke strategi pra-caching.
Parameter
-
plugins
addRoute()
workbox-precaching.addRoute(
options?: PrecacheRouteOptions,
)
Tambahkan pemroses fetch
ke pekerja layanan yang akan
beri tanggapan ke
[permintaan jaringan]https:/
dengan aset yang telah disimpan sebelumnya.
Permintaan untuk aset yang tidak dipra-cache,FetchEvent
tidak akan
direspons,fetch
lainnya.
Parameter
-
opsi
PrecacheRouteOptions opsional
cleanupOutdatedCaches()
workbox-precaching.cleanupOutdatedCaches()
Menambahkan pemroses peristiwa activate
yang akan membersihkan pra-cache
yang tidak kompatibel yang dibuat oleh Workbox versi lama.
createHandlerBoundToURL()
workbox-precaching.createHandlerBoundToURL(
url: string,
)
Fungsi bantuan yang memanggil
PrecacheController#createHandlerBoundToURL
pada instance
PrecacheController
default.
Jika Anda membuat PrecacheController
sendiri,PrecacheController#createHandlerBoundToURL
pada instance tersebut,
Parameter
-
url
string
URL pra-cache yang akan digunakan untuk mencari
Response
.
Hasil
getCacheKeyForURL()
workbox-precaching.getCacheKeyForURL(
url: string,
)
Mengambil URL,
Jika URL relatif diberikan,
Untuk entri yang telah disimpan sebelumnya tanpa informasi revisi,
Untuk entri yang di-cache sebelumnya dengan informasi revisi,
Parameter
-
url
string
URL yang kunci cache-nya akan dicari.
Hasil
-
string |
tidak ditentukan Kunci cache yang sesuai dengan URL tersebut.
matchPrecache()
workbox-precaching.matchPrecache(
request: string |Request,
)
Fungsi bantuan yang memanggil
PrecacheController#matchPrecache
pada default
Instance PrecacheController
.
Jika Anda membuat PrecacheController
Anda sendiri,PrecacheController#matchPrecache
pada instance tersebut,
Parameter
-
minta
string |
Permintaan Kunci (tanpa parameter revisi) untuk dicari di pra-cache.
Hasil
-
Promise<Response |
undefined>
precache()
workbox-precaching.precache(
entries: (string |PrecacheEntry)[],
)
Menambahkan item ke daftar pra-cache,
Metode ini dapat dipanggil beberapa kali.
Perhatikan: Metode ini tidak akan menayangkan file yang di-cache untuk Anda.workbox-precaching.
Jika Anda memiliki satu array file untuk dipra-cache,workbox-precaching.
Parameter
-
entries
(string |
PrecacheEntry)[]
precacheAndRoute()
workbox-precaching.precacheAndRoute(
entries: (string |PrecacheEntry)[],
options?: PrecacheRouteOptions,
)
Metode ini akan menambahkan entri ke daftar {i>precache<i} dan menambahkan rute ke
merespons peristiwa pengambilan.
Ini adalah metode praktis yang akan memanggil
workbox-precaching.
dan
workbox-precaching.
dalam satu panggilan.
Parameter
-
entries
(string |
PrecacheEntry)[] Array entri yang akan dipra-cache.
-
opsi
PrecacheRouteOptions opsional