Yedek yanıtları yönetme

Belirli durumlarda, kullanıcının çevrimdışı olması durumunda yedek bir yanıtın önbelleğe alınmasını isteyebilirsiniz. Yedek uygulama, ağ öncelikli veya eski hâlde yeniden doğrulama gibi stratejilerin sağladığı önbelleğe alma davranışlarına bir alternatiftir.

Yedek, bir istek başarısız olduğunda tarayıcının varsayılan olarak sağlayacağından daha iyi bir yer tutucu olan genel, herkese uygun tek bir yanıttır. Bu parçalardan bazıları:

• "Eksik resim" yer tutucusuna alternatif.
• Standart "ağ bağlantısı yok" sayfasına bir HTML alternatifi.

Yalnızca çevrimdışı sayfa

Tek yapmanız gereken özel bir çevrimdışı HTML sayfası sağlamak ancak başka bir şey yapmak değilse uygulayabileceğiniz temel bir tarifi aşağıda bulabilirsiniz:

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

Yukarıdaki kod, tüm rotalarda varsayılan olarak yalnızca ağ stratejisi kullanmak için setDefaultHandler değerini kullanır. Ardından, hata oluşması durumunda çevrimdışı yedeği sunmak için offlineFallback tarifini çalıştırır. Yemek tarifinde, çevrimdışı yedek HTML dosyanızın offline.html olarak adlandırılacağı ve web sunucunuzun kök dizininden sunulacağı varsayılır.

Kapsamlı yedekler

Bir ağ hatası veya önbellek hatası olduğunda, workbox-strategies tarafından sunulan önbelleğe alma stratejileri tutarlı bir şekilde reddedilecektir. Bu yaklaşım, tek bir işleyici işlevindeki olası hataları gidermek üzere genel bir "catch" işleyicisi ayarlama kalıbını destekler ve farklı request.destination değerleri için farklı yedekler sunmanıza olanak tanır.

Aşağıdaki örnekte, workbox-recipes kaynağından warmStrategyCache tarifi kullanılmış ve çalışma zamanı önbelleğinde önceden önbelleğe alınmış öğeleri sunmak için bir yakalama işleyici ayarlanmaktadır. Ancak yedekleri önbelleğe almak, uygulamanız için daha uygun olabilir:

import {warmStrategyCache} from 'workbox-recipes';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';

// Fallback assets to cache
const FALLBACK_HTML_URL = '/offline.html';
const FALLBACK_IMAGE_URL = '/images/image-not-found.jpg';
const FALLBACK_STRATEGY = new CacheFirst();

// Warm the runtime cache with a list of asset URLs
warmStrategyCache({
  urls: [FALLBACK_HTML_URL, FALLBACK_IMAGE_URL],
  strategy: FALLBACK_STRATEGY,
});

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // The warmStrategyCache recipe is used to add the fallback assets ahead of
  // time to the runtime cache, and are served in the event of an error below.
  // Use `event`, `request`, and `url` to figure out how to respond, or
  // use request.destination to match requests for specific resource types.
  switch (request.destination) {
    case 'document':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_HTML_URL});

    case 'image':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_IMAGE_URL});

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

Bu aşamada yedek yanıtlar, Workbox'ın derleme araçlarıyla injectManifest kullanılarak önbelleğe alınır ve matchPrecache yönteminde hata olması durumunda yedek olarak sunulur.

import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

// Optional: use the injectManifest mode of one of the Workbox
// build tools to precache a list of URLs, including fallbacks.
precacheAndRoute(self.__WB_MANIFEST);

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // Fallback assets are precached when the service worker is installed, and are
  // served in the event of an error below. Use `event`, `request`, and `url` to
  // figure out how to respond, or use request.destination to match requests for
  // specific resource types.
  switch (request.destination) {
    case 'document':
      // FALLBACK_HTML_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_HTML_URL);

    case 'image':
      // FALLBACK_IMAGE_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_IMAGE_URL);

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

İkinci yedek kuruluma örnek olarak, bir sayfanın önceden önbelleğe alınmış olması ancak sayfa tarafından istenen resimlerin (veya diğer öğelerin) önbelleğine alınmamış olması verilebilir. Kullanıcı çevrimdışıyken de sayfa önbellekten okunabilir, ancak ağ hatası oluşursa yedek yer tutucular veya alternatif işlevler sağlanabilir.

Çalışma zamanı önbelleğini ısıtma

Workbox, önbelleğe alma ve çalışma zamanı önbellekleri için ayrı önbellekler tutar. Önbellek öncesi manifestte yapılan güncellemeler, güncellenmiş bir hizmet çalışanı dağıtmanızı gerektireceğinden, önceden önbelleğe alma özelliğinden yararlanmadan bir şeyi önceden önbelleğe almak istediğiniz durumlar olabilir.

Çalışma zamanı önbelleğini öğelerle önceden hazırlamak için bunu, workbox-recipes içindeki warmStrategyCache tarifini kullanarak yapabilirsiniz. Bu stratejide, bir hizmet çalışanının install etkinliğinde Cache.addAll işlevi çağrılır.

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

Sonuç

Başarısız istekler için yedek yanıtları yönetmek biraz iş gerektirir ancak biraz önceden planlama yaparak web uygulamanızı kullanıcı çevrimdışıyken belirli bir düzeyde içerik ve işlevsellik sağlayacak şekilde ayarlayabilirsiniz.