çalışma kutusu-tarifleri

Özellikle yönlendirme ve önbelleğe alma ile ilgili bir dizi yaygın kalıp, bunların yeniden kullanılabilir tarifler halinde standartlaştırılabileceği kadar yaygındır. workbox-recipes, bunları kullanımı kolay bir paket halinde sunarak oldukça işlevsel bir hizmet çalışanı ile hızla çalışmaya başlamanıza olanak tanır.

Recipe'ler

Her tarif, bir dizi Çalışma Kutusu modülünü bir araya getirerek yaygın olarak kullanılan kalıplar halinde bir araya getirir. Aşağıdaki tarifler, bu modülü kullanırken kullandığınız tarifi ve kendiniz yazmak isterseniz, başlığın altında kullandığı eşdeğer kalıbı gösterir.

Çevrimdışı yedek

Çevrimdışı yedek tarif, bu üçünden herhangi 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 sunmasına olanak tanır. Workbox Recipes'in 6.1.0 sürümünde, önbelleğe alma yöntemini kullanarak bu öğeleri önbelleğe alma gereksinimi kaldırıldı. Geriye dönük uyumluluk için kendi önbelleğini denemeden önce öğeleri ön önbellekte arayacak.

Bu tarif, varsayılan olarak yedek sayfanın offline.html olduğunu ve bir resim veya yazı tipi yedeği olmadığını varsayar. Tüm yapılandırma seçeneklerinin bir listesi için çevrimdışı yedek seçeneklere bakın.

Çevrimdışı yedek, yalnızca belirli bir istek için eşleşen bir rota olduğunda uygulanır. Çevrimdışı yedek tarifi tek başına kullanıyorsanız rotaları kendiniz oluşturmanız gerekir. En basit yöntem, setDefaultHandler() yöntemini kullanarak aşağıda gösterildiği gibi NetworkOnly stratejisini tüm isteklere uygulayan bir rota oluşturmaktır. Sayfa önbelleği, statik kaynak önbelleği veya resim önbelleği gibi diğer tarifler de ilgili önbellekler için rotaları ayarlayın. Hem çevrimdışı yedek hem de bu tariflerden biri kullanılırken setDefaultHandler() gerekli değildir.

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);

Kullanılmakta olan strateji önbelleği

Hazır durumda strateji önbellek tarifi, sağlanan URL'leri hizmet çalışanının install aşamasında önbelleğinize yüklemenize ve sağlanan strateji seçenekleriyle bu URL'leri önbelleğe almanıza olanak tanır. Bu, önbelleğe almak istediğiniz belirli URL'leri biliyorsanız veya bir rotanın önbelleğini ısıtmak istiyorsanız ya da yükleme sırasında URL'leri önbelleğe almak istediğiniz benzer yerler varsa, önbelleğe alma özelliğine alternatif olarak kullanılabilir.

Tüm yapılandırma seçeneklerinin bir listesi için hazırlama stratejisi önbellek seçeneklerine 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 önbelleği tarifi, hizmet çalışanınızın bir HTML sayfası isteğine (URL'de gezinme aracılığıyla) önce ağ önbelleğe alma stratejisiyle yanıt vermesine olanak tanır.İdeal olarak, önbellek yedeğinin 4, 0 saniyeden kısa en büyük zengin içerikli boyama puanı için yeterince hızlı bir şekilde gelmesini sağlamak üzere optimize edilmiştir.

Bu tarif, varsayılan olarak ağ zaman aşımının 3 saniye olması gerektiğini varsayar ve warmCache seçeneğiyle önbellek ısıtmayı destekler. Tüm yapılandırma seçeneklerinin listesi için sayfa önbellek seçenekleri sayfasına 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 kaynak önbelleği

Statik kaynaklar önbellek tarifi, hizmet çalışanınızın özellikle CSS, JavaScript ve Web Çalışanı isteklerine yönelik statik kaynaklar için yapılan bir isteğe yanıt vermesine olanak tanır. Bunu yaparken eski-geçici yeniden doğrula önbelleğe alma stratejisi kullanır ve böylece bu öğeler önbellekten hızlı bir şekilde sunulabilir ve arka planda güncellenebilir.

Bu yemek tarifi, warmCache seçeneğiyle önbellek ısıtmayı destekler. Tüm yapılandırma seçeneklerinin listesi için statik kaynak önbellek seçenekleri sayfasına göz atı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 önbellek öncelikli önbelleğe alma stratejisiyle resim isteğine yanıt vermesine olanak tanır. Böylece, resimler önbellekte kullanılabilir olduğunda kullanıcının bunlar için başka bir istekte bulunmasına gerek kalmaz.

Bu tarif, varsayılan olarak her biri 30 gün boyunca geçerli olmak üzere en fazla 60 resmi önbelleğe alır ve warmCache seçeneğiyle önbellek ısıtmayı destekler. Tüm yapılandırma seçeneklerinin listesi için resim önbelleği seçenekleri sayfasına 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ğlanan @font-face tanımlarını içeren stil sayfası.
• Düzeltilmiş statik, yazı tipi dosyaları.

Stil sayfası sık sık değişebildiğinden, tasfiye sırasında-yeniden doğrula önbelleğe alma stratejisi kullanılır. Bununla birlikte, yazı tipi dosyalarının kendisi değişmez ve önce önbellek stratejisinden yararlanabilir.

Bu tarif, varsayılan olarak her biri bir yıl için maksimum 30 yazı tipi dosyasını önbelleğe alır. Tüm yapılandırma seçeneklerinin listesi için Google Fonts önbellek seçenekleri'ne 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 getirmek, sayfa isteklerine önce ağ önbelleğe alma stratejisiyle yanıt veren, CSS, JavaScript ve Web İşçisi isteklerine eski yeniden doğrulama stratejisiyle yanıt veren, resim isteklerine önce önbellek stratejisiyle yanıt veren, Google Fonts'u düzgün şekilde önbelleğe alan ve sayfa istekleri için çevrimdışı yedek sağlayan bir hizmet çalışanı sağlayacaktır. Bunların tümü aşağıdakilerle yapılabilir:

import {
  pageCache,
  imageCache,
  staticResourceCache,
  googleFontsCache,
  offlineFallback,
} from 'workbox-recipes';

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

workbox-recipes.googleFontsCache(
  options?: GoogleFontCacheOptions,
)

workbox-recipes.imageCache(
  options?: ImageCacheOptions,
)

workbox-recipes.offlineFallback(
  options?: OfflineFallbackOptions,
)

workbox-recipes.pageCache(
  options?: PageCacheOptions,
)

workbox-recipes.staticResourceCache(
  options?: StaticResourceOptions,
)

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)