çalışma kutusu-tarifleri

Ö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

  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

  WarmStrategyCacheOptions