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

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

מתכונים

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

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

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

כברירת מחדל, המתכון הזה מבוסס על ההנחה שדף החלופי הוא 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) עם אסטרטגיית שמירה במטמון ברשת הראשונה. השיטה המומלצת היא לאפשר למטמון לדף לחזור מהר מספיק כדי לקבל ציון של המהירות שבה נטען רכיב התוכן הכי גדול (LCP) של פחות מ-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, באמצעות אסטרטגיית שמירה במטמון של לא פעיל בזמן אימות מחדש, כך שניתן יהיה להציג את הנכסים האלה במהירות מהמטמון ולעדכן אותם ברקע

המתכון הזה תומך בחימום מטמון באמצעות האפשרות 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 להגיב לבקשת תמונות באמצעות אסטרטגיית שמירה מטמון תחילה במטמון, כך שכאשר הן יהיו זמינות במטמון המשתמש לא יצטרך לשלוח בקשה נוספת בשבילן.

כברירת מחדל, המתכון הזה שומר במטמון עד 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,
      }),
    ],
  })
);

שימוש מהיר

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

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