מתכונים עם קופסאות עבודה

יש כמה דפוסים נפוצים, במיוחד בנושא ניתוב ואחסון במטמון, שאפשר להפוך לסטנדרטיים ולהשתמש בהם שוב ושוב. workbox-recipes מאפשר לכם להשתמש בהם בחבילה נוחה לשימוש, כך שתוכלו להתחיל להשתמש ב-service worker פונקציונלי במהירות.

מתכונים

כל מתכון משלב כמה מודולים של ארגז עבודה יחד, ומשלבת אותם בדפוסים נפוצים. המתכונים הבאים יציגו את המתכון שבו אתם משתמשים כשאתם משתמשים במודול הזה, ואת הדפוס המקביל שבו נעשה שימוש, אם אתם רוצים לכתוב אותו בעצמכם.

חזרה למצב אופליין

המתכון של הגיבוי במצב אופליין מאפשר ל-Service Worker להציג דף אינטרנט, תמונה או גופן אם יש שגיאת ניתוב באחד מהשלושה, למשל אם המשתמש נמצא במצב אופליין ואין היט של מטמון. בגרסה 6.1.0 של Workbox Recipes, הדרישה לשמור את הפריטים האלה במטמון באמצעות אחסון נתונים מראש הוסרה. כדי לשמור על תאימות לאחור, המערכת תתחיל לחפש פריטים באחסון מראש לפני שתנסה את המטמון שלה.

כברירת מחדל, המתכון הזה מניח שדף החלופה הוא offline.html ושאין תמונה או גופן חלופיים. לרשימה של כל אפשרויות ההגדרה, ראו אפשרויות חלופיות למצב אופליין.

החלופה למצב אופליין תחול רק אם יש נתיב תואם לבקשה נתונה. אם משתמשים במתכון לגיבוי אופליין לבד, צריך ליצור את המסלולים בעצמכם. הדרך הפשוטה ביותר לעשות זאת היא להשתמש בשיטה setDefaultHandler() כדי ליצור מסלול שבו האסטרטגיה NetworkOnly חלה על כל הבקשות, כפי שמתואר בהמשך. מתכונים אחרים, כמו מטמון דפים, מטמון משאבים סטטיים או מטמון תמונות, מגדירים מסלולים למטמון המתאים. לא נדרש setDefaultHandler() כשמשתמשים גם בחלופה אופליין וגם באחד מהמתכונים האלה.

מתכון

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

setDefaultHandler(new NetworkOnly());

offlineFallback();

דוגמת קוד

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

מטמון אסטרטגיה חמה

המתכון לשמירת פריטים במטמון לפי אסטרטגיה חמה מאפשר לכם לטעון כתובות URL שסופקו למטמון במהלך השלב install של ה-service worker, ולשמור אותן במטמון לפי האפשרויות של האסטרטגיה שסופקה. ניתן להשתמש באפשרות הזו כחלופה לשמירה במטמון אם אתם יודעים את כתובות ה-URL הספציפיות שאתם רוצים לשמור במטמון, אם אתם רוצים לחמם את המטמון של מסלול מסוים או מקומות דומים שבהם תרצו לשמור כתובות URL במטמון במהלך ההתקנה.

רשימה של כל אפשרויות ההגדרה מופיעה במאמר אפשרויות של מטמון לשיטת בידינג לטעינה מראש.

מתכון

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

דוגמת קוד

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

מטמון הדף

המתכון של מטמון הדף מאפשר לקובץ השירות (service worker) להגיב לבקשה לדף HTML (דרך ניווט בכתובת URL) באמצעות אסטרטגיית מטמון מסוג רשת קודם, שעברה אופטימיזציה כדי לאפשר, באופן אידיאלי, לחלופה למטמון להגיע מהר מספיק כדי לקבל ציון של הצגת תוכן ראשוני של פחות מ-4.0 שניות.

כברירת מחדל, ההנחה של המתכון הזה היא שהזמן הקצוב לתפוגה של הבקשה ברשת צריך להיות 3 שניות, והוא תומך בחימום של המטמון באמצעות האפשרות warmCache. רשימה של כל אפשרויות ההגדרה מופיעה באפשרויות של מטמון הדף.

מתכון

import {pageCache} from 'workbox-recipes';

pageCache();

דוגמת קוד

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

מטמון של משאבים סטטיים

המתכון לשמירת משאבים סטטיים במטמון מאפשר ל-service worker להגיב לבקשה למשאבים סטטיים, במיוחד לבקשות CSS,‏ JavaScript ו-Web Worker, באמצעות אסטרטגיית שמירת מטמון מסוג stale-while-revalidate, כדי שניתן יהיה להציג את הנכסים האלה במהירות מהמטמון ולעדכן אותם ברקע.

המתכון הזה תומך בחימום של המטמון באמצעות האפשרות warmCache. רשימה של כל אפשרויות התצורה מפורטת במאמר אפשרויות מטמון של משאבים סטטיים.

מתכון

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

דוגמת קוד

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

מטמון תמונות

המתכון לשמירת תמונות במטמון מאפשר ל-service worker להגיב לבקשה לתמונות באמצעות אסטרטגיית שמירת מטמון מסוג cache-first, כך שכשהן יהיו זמינות במטמון, המשתמש לא יצטרך לשלוח בקשה נוספת לקבלתן.

כברירת מחדל, מתבצע שמירת מטמון של עד 60 תמונות, כל אחת למשך 30 יום. בנוסף, יש תמיכה בחימום המטמון באמצעות האפשרות warmCache. אפשרויות של מטמון תמונות – רשימה של כל אפשרויות ההגדרה.

מתכון

import {imageCache} from 'workbox-recipes';

imageCache();

דוגמת קוד

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

המתכון של Google Fonts שומר במטמון את שני החלקים של בקשת Google Fonts:

• גיליון הסגנונות עם ההגדרות של @font-face, שמקשרות לקובצי הגופנים.
• קובצי הגופנים הסטטיים שעברו שינויים.

מכיוון שגיליון הסגנון יכול להשתנות לעיתים קרובות, נעשה שימוש באסטרטגיית שמירה במטמון במצב לא פעיל בזמן אימות מחדש. לעומת זאת, קובצי הגופן עצמם לא משתנים, וניתן להשתמש בשיטה של אחסון במטמון קודם.

כברירת מחדל, המתכון הזה שומר במטמון עד 30 קובצי גופנים, כל אחד למשך שנה. באפשרויות של מטמון Google Fonts מפורטת רשימה של כל אפשרויות ההגדרה.

מתכון

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

דוגמת קוד

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

שימוש מהיר

שילוב של כל המתכונים יחד יניב שירות עבודה שיענה לבקשות דף באמצעות אסטרטגיית שמירת מטמון מסוג רשת קודם, יענה לבקשות CSS,‏ JavaScript ו-Web Worker באמצעות אסטרטגיית לא עדכני בזמן אימות מחדש, יענה לבקשות תמונה באמצעות אסטרטגיית שמירת מטמון קודם, יאחסן כראוי את Google Fonts ויספק חלופה אופליין לבקשות דף. אפשר לעשות את כל זה באמצעות:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

סוגים

GoogleFontCacheOptions

מאפיינים

• cachePrefix

  מחרוזת אופציונלי

• maxAgeSeconds

  מספר אופציונלי

• maxEntries

  מספר אופציונלי

ImageCacheOptions

מאפיינים

• cacheName

  מחרוזת אופציונלי

• matchCallback

  RouteMatchCallback אופציונלי

• maxAgeSeconds

  מספר אופציונלי

• maxEntries

  מספר אופציונלי

• פלאגינים

  WorkboxPlugin[] אופציונלי

• warmCache

  string[] אופציונלי

OfflineFallbackOptions

מאפיינים

• fontFallback

  מחרוזת אופציונלי

• imageFallback

  מחרוזת אופציונלי

• pageFallback

  מחרוזת אופציונלי

PageCacheOptions

מאפיינים

• cacheName

  מחרוזת אופציונלי

• matchCallback

  RouteMatchCallback אופציונלי

• networkTimeoutSeconds

  מספר אופציונלי

• פלאגינים

  WorkboxPlugin[] אופציונלי

• warmCache

  string[] אופציונלי

StaticResourceOptions

מאפיינים

• cacheName

  מחרוזת אופציונלי

• matchCallback

  RouteMatchCallback אופציונלי

• פלאגינים

  WorkboxPlugin[] אופציונלי

• warmCache

  string[] אופציונלי

WarmStrategyCacheOptions

מאפיינים

• אסטרטגיה

  אסטרטגיה

• כתובות אתרים

  string[]

שיטות

googleFontsCache()

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

הטמעה של המתכון של https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts לשמירה במטמון של [Google Fonts]

פרמטרים

• אפשרויות

  GoogleFontCacheOptions אופציונלי

imageCache()

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

הטמעה של [מתכון לשמירת תמונות במטמון]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

פרמטרים

• אפשרויות

  ImageCacheOptions אופציונלי

offlineFallback()

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

הטמעה של [מתכון החלופות המקיפות]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks. חשוב לכלול את החלופות בהחדרה של המטמון מראש

פרמטרים

• אפשרויות

  OfflineFallbackOptions אופציונלי

pageCache()

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

הטמעה של מתכון לשמירת דפים במטמון עם זמן קצוב לתפוגה של רשת

פרמטרים

• אפשרויות

  PageCacheOptions אופציונלי

staticResourceCache()

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

הטמעה של [מתכון לקובצי CSS ו-JavaScript]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

פרמטרים

• אפשרויות

  StaticResourceOptions אופציונלי

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

פרמטרים

• אפשרויות

  WarmStrategyCacheOptions