การจัดการการตอบกลับสำรอง

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

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

• ทางเลือกแทนตัวยึดตำแหน่ง "รูปภาพหายไป"
• HTML ทางเลือกแทนหน้า "ไม่มีการเชื่อมต่อเครือข่ายที่ใช้ได้" แบบมาตรฐาน

หน้าเว็บออฟไลน์เท่านั้น

หากสิ่งที่คุณต้องทำก็คือส่งหน้า HTML ออฟไลน์ที่กำหนดเองได้โดยไม่ต้องมีสิ่งใดเลย คุณสามารถทำตามสูตรพื้นฐานต่อไปนี้

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

setDefaultHandler(new NetworkOnly());

offlineFallback();

โค้ดด้านบนใช้ setDefaultHandler เพื่อใช้กลยุทธ์เฉพาะเครือข่ายเท่านั้นเป็นค่าเริ่มต้นสำหรับเส้นทางทั้งหมด จากนั้นจะเรียกใช้สูตรอาหาร offlineFallback เพื่อแสดงโฆษณาสำรองแบบออฟไลน์ในกรณีที่เกิดข้อผิดพลาด สูตรอาหารนี้จะถือว่าไฟล์ HTML สำรองแบบออฟไลน์ของคุณมีชื่อว่า offline.html และแสดงจากรูทของเว็บเซิร์ฟเวอร์ของคุณ

วิดีโอสำรองที่ครอบคลุม

เมื่อใดก็ตามที่เครือข่ายล้มเหลวหรือไม่พบแคช กลยุทธ์การแคชที่ workbox-strategies นำเสนอจะปฏิเสธอย่างต่อเนื่อง ซึ่งจะสนับสนุนรูปแบบของการตั้งค่าเครื่องจัดการ "catch" ส่วนกลางเพื่อจัดการกับความล้มเหลวในฟังก์ชันตัวแฮนเดิลเดียว ทำให้คุณเสนอข้อมูลสำรองที่แตกต่างกันสำหรับค่า request.destination ที่แตกต่างกันได้

ตัวอย่างต่อไปนี้ใช้สูตร warmStrategyCache จาก workbox-recipes และตั้งค่าเครื่องจัดการตัวรับเพื่อแสดงรายการที่แคชล่วงหน้าในแคชรันไทม์ อย่างไรก็ตาม การสร้างแคชสำรองล่วงหน้าอาจเหมาะกับแอปพลิเคชันของคุณมากกว่า ดังนี้

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

ในขั้นถัดไปนี้ ระบบจะแคชคำตอบสำรองล่วงหน้าโดยใช้ injectManifest กับเครื่องมือสร้างของ Workbox และจะแสดงการตอบกลับสำรองในกรณีที่เกิดข้อผิดพลาดกับเมธอด matchPrecache

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

ตัวอย่าง Use Case สําหรับการตั้งค่าสํารองที่ 2 คือ หากมีการแคชหน้าเว็บไว้ล่วงหน้า แต่ไม่มีการขอรูปภาพ (หรือเนื้อหาอื่นๆ) ที่หน้านั้นขอ ผู้ใช้จะยังคงอ่านหน้าเว็บได้จากแคชเมื่อผู้ใช้ออฟไลน์ แต่อาจมีการระบุตัวยึดตำแหน่งสำรองหรือฟังก์ชันการทำงานอื่นหากเกิดข้อผิดพลาดเกี่ยวกับเครือข่าย

การปรับแคชรันไทม์ให้อุ่นขึ้น

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

หากต้องการเริ่มต้นแคชรันไทม์ล่วงหน้าด้วยชิ้นงาน คุณสามารถใช้สูตร warmStrategyCache จาก workbox-recipes ภายใน กลยุทธ์นี้จะเรียก Cache.addAll ในเหตุการณ์ install ของ Service Worker

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

บทสรุป

การจัดการคำตอบสำรองสำหรับคำขอที่ล้มเหลวต้องใช้ความยุ่งยากเล็กน้อย แต่จะต้องมีการวางแผนล่วงหน้าเล็กน้อย คุณสามารถตั้งค่าเว็บแอปเพื่อมอบเนื้อหาและฟังก์ชันการทำงานในระดับหนึ่งเมื่อผู้ใช้ออฟไลน์