Özellikle yönlendirme ve önbelleğe alma ile ilgili bazı yaygın kalıplar, yeniden kullanılabilir tarifler olarak standart hale getirilebilecek kadar yaygındır. workbox-recipes
, bunları kullanımı kolay bir pakette sunarak son derece işlevsel bir hizmet çalışanıyla hızla çalışmaya başlayabilmenizi sağlar.
Yemek tarifleri
Her tarif, çeşitli Çalışma kutusu modüllerini birleştirerek yaygın olarak kullanılan kalıplar halinde gruplandırır. Aşağıdaki tarifler, bu modülü kullanırken kullandığınız tarifi ve kendiniz yazmak istemeniz durumunda arka planda kullandığı eşdeğer kalıbı gösterir.
Çevrimdışı yedek
Çevrimdışı yedek tarif, üçünden birinde yönlendirme hatası varsa (örneğin, kullanıcı çevrimdışıysa ve önbellek isabeti yoksa) hizmet çalışanınızın bir web sayfası, resim veya yazı tipi yayınlamasına olanak tanır. Workbox Recipes'in 6.1.0 sürümünde, bu öğeleri önbelleğe alma kullanarak önbelleğe alma gereksinimi kaldırıldı; geriye dönük uyumluluk için kendi önbelleğini denemeden önce önbellekteki öğeleri arar.
Bu tarif, varsayılan olarak yedek sayfanın offline.html
olduğunu ve resim veya yazı tipi yedeği olmadığını varsayar. Tüm yapılandırma seçeneklerinin listesi için çevrimdışı yedek seçeneklere bakın.
Çevrimdışı yedek yalnızca belirli bir istek için eşleşen bir rota varsa uygulanır. Çevrimdışı yedek tarifini tek başına kullanıyorsanız rotaları kendiniz oluşturmanız gerekir. Bunu yapmanın en basit yolu, NetworkOnly
stratejisini tüm isteklere uygulayan bir rota oluşturmak için setDefaultHandler()
yöntemini kullanmaktır (aşağıda gösterilmiştir). Sayfa önbelleği, statik kaynak önbelleği veya resim önbelleği gibi diğer tarifler, ilgili önbellekleri için rotalar oluşturur. Hem çevrimdışı yedek hem de bu tariflerden birini kullanırken setDefaultHandler()
gerekmez.
Yemek Tarifi
import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
setDefaultHandler(new NetworkOnly());
offlineFallback();
Kalıp
import {setCatchHandler, setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
const pageFallback = 'offline.html';
const imageFallback = false;
const fontFallback = false;
setDefaultHandler(new NetworkOnly());
self.addEventListener('install', event => {
const files = [pageFallback];
if (imageFallback) {
files.push(imageFallback);
}
if (fontFallback) {
files.push(fontFallback);
}
event.waitUntil(
self.caches
.open('workbox-offline-fallbacks')
.then(cache => cache.addAll(files))
);
});
const handler = async options => {
const dest = options.request.destination;
const cache = await self.caches.open('workbox-offline-fallbacks');
if (dest === 'document') {
return (await cache.match(pageFallback)) || Response.error();
}
if (dest === 'image' && imageFallback !== false) {
return (await cache.match(imageFallback)) || Response.error();
}
if (dest === 'font' && fontFallback !== false) {
return (await cache.match(fontFallback)) || Response.error();
}
return Response.error();
};
setCatchHandler(handler);
Sıcak strateji önbelleği
Sıcak strateji önbelleği tarifi, sağlanan URL'leri hizmet çalışanının install
aşamasında önbelleğinize yüklemenize olanak tanır. Bu URL'ler, sağlanan strateji seçenekleriyle önbelleğe alınır. Önbelleğe almak istediğiniz URL'leri biliyorsanız, bir rotanın önbelleğini ısıtmak istiyorsanız veya yükleme sırasında URL'leri önbelleğe almak istediğiniz benzer yerler varsa bu yöntem önbelleğe alma işlemine alternatif olarak kullanılabilir.
Tüm yapılandırma seçeneklerinin listesi için hazır strateji önbellek seçenekleri sayfasına bakın.
Yemek Tarifi
import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];
warmStrategyCache({urls, strategy});
Kalıp
import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];
self.addEventListener('install', event => {
// handleAll returns two promises, the second resolves after all items have been added to cache.
const done = urls.map(
path =>
strategy.handleAll({
event,
request: new Request(path),
})[1]
);
event.waitUntil(Promise.all(done));
});
Sayfa önbelleği
Sayfa önbellek tarifi, hizmet çalışanınızın önce ağ önbelleğe alma stratejisiyle bir HTML sayfası isteğine (URL gezinmesi aracılığıyla) yanıt vermesine olanak tanır.İdeal olarak, önbellek yedeğinin 4, 0 saniyeden daha kısa Largest Contentful Paint puanı için yeterince hızlı bir şekilde ulaşmasına olanak tanır.
Bu tarif, varsayılan olarak ağ zaman aşımının 3 saniye olması gerektiğini varsayar ve warmCache
seçeneği aracılığıyla önbelleği ısıtmayı destekler. Tüm yapılandırma seçeneklerinin listesi için sayfa önbelleği seçenekleri bölümüne bakın.
Yemek Tarifi
import {pageCache} from 'workbox-recipes';
pageCache();
Kalıp
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
const cacheName = 'pages';
const matchCallback = ({request}) => request.mode === 'navigate';
const networkTimeoutSeconds = 3;
registerRoute(
matchCallback,
new NetworkFirst({
networkTimeoutSeconds,
cacheName,
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
Statik kaynaklar önbelleği
Statik kaynaklar önbellek tarifi, hizmet çalışanınızın özellikle CSS, JavaScript ve Web Worker isteklerine, statik kaynaklarla ilgili isteklere stale-while-reverification önbelleğe alma stratejisiyle yanıt vermesini sağlar. Böylece bu öğeler önbellekten hızlıca sunulabilir ve arka planda güncellenebilir.
Bu tarif, warmCache
seçeneği aracılığıyla önbelleği ısıtmayı destekler. Tüm yapılandırma seçeneklerinin listesi için statik kaynaklar önbellek seçenekleri sayfasına bakın.
Yemek Tarifi
import {staticResourceCache} from 'workbox-recipes';
staticResourceCache();
Kalıp
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
const cacheName = 'static-resources';
const matchCallback = ({request}) =>
// CSS
request.destination === 'style' ||
// JavaScript
request.destination === 'script' ||
// Web Workers
request.destination === 'worker';
registerRoute(
matchCallback,
new StaleWhileRevalidate({
cacheName,
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
Resim önbelleği
Resim önbelleği tarifi, hizmet çalışanınızın resim isteği için önce önbelleğe alma stratejisiyle yanıt vermesine olanak tanır. Böylece, resimler önbellekte mevcut olduğunda kullanıcının resim için başka bir istek göndermesi gerekmez.
Bu yemek tarifi, varsayılan olarak her biri 30 gün sürecek maksimum 60 görüntüyü önbelleğe alır ve warmCache
seçeneği ile önbellek ısıtmayı destekler. Tüm yapılandırma seçeneklerinin listesi için resim önbelleği seçeneklerine bakın.
Yemek Tarifi
import {imageCache} from 'workbox-recipes';
imageCache();
Kalıp
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';
const cacheName = 'images';
const matchCallback = ({request}) => request.destination === 'image';
const maxAgeSeconds = 30 * 24 * 60 * 60;
const maxEntries = 60;
registerRoute(
matchCallback,
new CacheFirst({
cacheName,
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
new ExpirationPlugin({
maxEntries,
maxAgeSeconds,
}),
],
})
);
Google Fonts önbelleği
Google Fonts tarifi, bir Google Fonts isteğinin iki bölümünü önbelleğe alır:
- Yazı tipi dosyalarına bağlantı veren
@font-face
tanımlarını içeren stil sayfası. - Statik, düzeltilmiş yazı tipi dosyaları.
Stil sayfası sık sık değişebileceğinden yeniden doğrulama sırasında eski bir önbelleğe alma stratejisi kullanılır. Öte yandan, yazı tipi dosyaları değişmez ve önce önbelleğe alma stratejisinden yararlanabilir.
Bu yemek tarifi, varsayılan olarak her biri bir yıl için en fazla 30 yazı tipi dosyasını önbelleğe alır. Tüm yapılandırma seçeneklerinin listesi için Google Fonts önbellek seçenekleri konusuna bakın.
Yemek Tarifi
import {googleFontsCache} from 'workbox-recipes';
googleFontsCache();
Kalıp
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';
const sheetCacheName = 'google-fonts-stylesheets';
const fontCacheName = 'google-fonts-webfonts';
const maxAgeSeconds = 60 * 60 * 24 * 365;
const maxEntries = 30;
registerRoute(
({url}) => url.origin === 'https://fonts.googleapis.com',
new StaleWhileRevalidate({
cacheName: sheetCacheName,
})
);
// Cache the underlying font files with a cache-first strategy for 1 year.
registerRoute(
({url}) => url.origin === 'https://fonts.gstatic.com',
new CacheFirst({
cacheName: fontCacheName,
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
new ExpirationPlugin({
maxAgeSeconds,
maxEntries,
}),
],
})
);
Hızlı kullanım
Tüm tarifleri bir araya getirerek sayfa isteklerine önce ağ önbelleğe alma stratejisiyle, CSS, JavaScript ve Web İşleyici isteklerine yeniden doğrulama sırasında eski stratejisiyle, resim isteklerine önce önbelleğe alma stratejisiyle yanıt veren, Google yazı tiplerini düzgün şekilde önbelleğe alan ve sayfa istekleri için çevrimdışı yedek sağlayan bir hizmet çalışanı elde edersiniz. Bu işlemlerin tümü aşağıdakilerle yapılabilir:
import {
pageCache,
imageCache,
staticResourceCache,
googleFontsCache,
offlineFallback,
} from 'workbox-recipes';
pageCache();
googleFontsCache();
staticResourceCache();
imageCache();
offlineFallback();
Türler
GoogleFontCacheOptions
Özellikler
-
cachePrefix
dize isteğe bağlı
-
maxAgeSeconds
number isteğe bağlı
-
maxEntries
number isteğe bağlı
ImageCacheOptions
Özellikler
-
cacheName
dize isteğe bağlı
-
matchCallback
RouteMatchCallback isteğe bağlı
-
maxAgeSeconds
number isteğe bağlı
-
maxEntries
number isteğe bağlı
-
plugins
WorkboxPlugin[] isteğe bağlı
-
warmCache
string[] isteğe bağlı
OfflineFallbackOptions
Özellikler
-
fontFallback
dize isteğe bağlı
-
imageFallback
dize isteğe bağlı
-
pageFallback
dize isteğe bağlı
PageCacheOptions
Özellikler
-
cacheName
dize isteğe bağlı
-
matchCallback
RouteMatchCallback isteğe bağlı
-
networkTimeoutSeconds
sayı isteğe bağlı
-
plugins
WorkboxPlugin[] isteğe bağlı
-
warmCache
string[] isteğe bağlı
StaticResourceOptions
Özellikler
-
cacheName
dize isteğe bağlı
-
matchCallback
RouteMatchCallback isteğe bağlı
-
plugins
WorkboxPlugin[] isteğe bağlı
-
warmCache
string[] isteğe bağlı
WarmStrategyCacheOptions
Özellikler
-
strateji
-
urller
string[]
Yöntemler
googleFontsCache()
workbox-recipes.googleFontsCache(
options?: GoogleFontCacheOptions,
)
[Google Fonts]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts
önbelleğe alma tarifinin uygulanması
Parametreler
-
seçenekler
GoogleFontCacheOptions isteğe bağlı
imageCache()
workbox-recipes.imageCache(
options?: ImageCacheOptions,
)
[Resim önbelleğe alma tarifi]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images
'nin bir uygulaması
Parametreler
-
seçenekler
ImageCacheOptions isteğe bağlı
offlineFallback()
workbox-recipes.offlineFallback(
options?: OfflineFallbackOptions,
)
[kapsamlı yedek yemek tarifinin]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks
uygulaması. Önbellek yerleştirme işleminize yedekleri eklediğinizden emin olun
Parametreler
-
seçenekler
OfflineFallbackOptions isteğe bağlı
pageCache()
workbox-recipes.pageCache(
options?: PageCacheOptions,
)
Ağ zaman aşımı içeren bir sayfa önbelleğe alma tarifinin uygulanması
Parametreler
-
seçenekler
PageCacheOptions isteğe bağlı
staticResourceCache()
workbox-recipes.staticResourceCache(
options?: StaticResourceOptions,
)
[CSS ve JavaScript dosyaları tarifinin]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files
uygulanması
Parametreler
-
seçenekler
StaticResourceOptions isteğe bağlı
warmStrategyCache()
workbox-recipes.warmStrategyCache(
options: WarmStrategyCacheOptions,
)
Parametreler
-
seçenekler