สูตรสำหรับกล่องงาน

รูปแบบทั่วไปหลายรูปแบบ โดยเฉพาะรูปแบบที่เกี่ยวข้องกับการกำหนดเส้นทางและการแคช นั้นพบได้บ่อยพอที่จะกำหนดมาตรฐานเป็นสูตรที่นํามาใช้ซ้ำได้ workbox-recipes ให้บริการเหล่านี้ในแพ็กเกจที่ใช้งานง่าย ซึ่งช่วยให้คุณเริ่มต้นใช้งาน Service Worker ที่มีประสิทธิภาพสูงได้อย่างรวดเร็ว

สูตรอาหาร

แต่ละสูตรจะรวมโมดูล Workbox หลายรายการเข้าด้วยกัน โดยรวมเป็นรูปแบบที่ใช้กันโดยทั่วไป สูตรอาหารด้านล่างจะแสดงสูตรอาหารที่คุณใช้เมื่อใช้โมดูลนี้ และรูปแบบที่เทียบเท่ากันเมื่อใช้โมดูลนี้ คุณควรเขียนด้วยตัวเอง

เนื้อหาสำรองสำหรับใช้ออฟไลน์

สูตรอาหารสำรองแบบออฟไลน์ช่วยให้ Service Worker แสดงหน้าเว็บ รูปภาพ หรือแบบอักษรได้หากมีข้อผิดพลาดในการกำหนดเส้นทางสำหรับ 3 รูปแบบดังกล่าว เช่น หากผู้ใช้ออฟไลน์และไม่มีการคลิกแคช ใน Workbox Recipes เวอร์ชัน 6.1.0 ระบบได้นำข้อกำหนดในการแคชรายการเหล่านี้โดยใช้การแคชล่วงหน้าออกแล้ว เพื่อการทำงานร่วมกันได้ย้อนหลัง ระบบจะค้นหารายการในการแคชล่วงหน้าก่อนก่อนที่จะลองใช้แคชของตัวเอง

โดยค่าเริ่มต้น สูตรนี้จะถือว่าหน้าสำรองคือ 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);

แคชกลยุทธ์ที่พร้อมใช้งาน

สูตรแคชสำหรับกลยุทธ์ Warm ให้คุณโหลด URL ที่ระบุลงในแคชในระหว่างเฟส install ของ Service Worker ได้ โดยจะแคช URL ดังกล่าวด้วยตัวเลือกของกลยุทธ์ที่มีให้ วิธีนี้สามารถใช้แทนการแคชล่วงหน้าได้หากคุณทราบ 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));
});

แคชของหน้าเว็บ

สูตรแคชของหน้าช่วยให้โปรแกรมทำงานของบริการสามารถตอบสนองต่อคำขอสำหรับหน้า HTML (ผ่านการนำทาง URL) ด้วยกลยุทธ์การแคชเครือข่ายก่อน ซึ่งควรจะเพิ่มประสิทธิภาพเพื่อให้การสำรองแคชแสดงขึ้นอย่างรวดเร็วพอสำหรับคะแนน Largest Contentful Paint น้อยกว่า 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 2 ส่วนดังนี้

• สไตล์ชีตที่มีการกำหนด @font-face ซึ่งลิงก์กับไฟล์แบบอักษร
• ไฟล์แบบอักษรแบบคงที่ที่มีการแก้ไข

เนื่องจากสไตล์ชีตมีการเปลี่ยนแปลงบ่อย จึงใช้กลยุทธ์การแคชล้าสมัยขณะตรวจสอบอีกครั้ง ในทางกลับกัน ไฟล์แบบอักษรจะไม่เปลี่ยนแปลงและใช้ประโยชน์จากกลยุทธ์แคชก่อนได้

โดยค่าเริ่มต้น สูตรนี้จะแคชไฟล์แบบอักษรได้สูงสุด 30 ไฟล์ โดยแต่ละไฟล์จะแคชไว้เป็นเวลา 1 ปี โปรดดูตัวเลือกแคชของ 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();

ประเภท

GoogleFontCacheOptions

พร็อพเพอร์ตี้

• cachePrefix

  string ไม่บังคับ

• maxAgeSeconds

  ตัวเลข ไม่บังคับ

• maxEntries

  หมายเลข ไม่บังคับ

ImageCacheOptions

พร็อพเพอร์ตี้

• cacheName

  string ไม่บังคับ

• matchCallback

  RouteMatchCallback ไม่บังคับ

• maxAgeSeconds

  ตัวเลข ไม่บังคับ

• maxEntries

  หมายเลข ไม่บังคับ

• ปลั๊กอิน

  WorkboxPlugin[] ไม่บังคับ

• warmCache

  string[] ไม่บังคับ

OfflineFallbackOptions

พร็อพเพอร์ตี้

• fontFallback

  string ไม่บังคับ

• imageFallback

  string ไม่บังคับ

• pageFallback

  string ไม่บังคับ

PageCacheOptions

พร็อพเพอร์ตี้

• cacheName

  string ไม่บังคับ

• matchCallback

  RouteMatchCallback ไม่บังคับ

• networkTimeoutSeconds

  หมายเลข ไม่บังคับ

• plugins

  WorkboxPlugin[] ไม่บังคับ

• warmCache

  string[] ไม่บังคับ

StaticResourceOptions

พร็อพเพอร์ตี้

• cacheName

  string ไม่บังคับ

• matchCallback

  RouteMatchCallback ไม่บังคับ

• plugins

  WorkboxPlugin[] ไม่บังคับ

• warmCache

  string[] ไม่บังคับ

WarmStrategyCacheOptions

พร็อพเพอร์ตี้

• กลยุทธ์

  กลยุทธ์

• URL

  string[]

เมธอด

googleFontsCache()

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

การใช้สูตรการแคช [Google Fonts]https://developers.google.com/web/tools/workbox/guides/common-recipes#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