การแคชพื้นที่ทำงานล่วงหน้า

ฟีเจอร์หนึ่งของ Service Worker คือความสามารถในการบันทึกชุดไฟล์ลงในแคชเมื่อติดตั้ง Service Worker ซึ่งมักเรียกว่า "การแคชล่วงหน้า" เนื่องจากคุณแคชเนื้อหาไว้ล่วงหน้าก่อนที่จะมีการใช้ Service Worker

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

Workbox ช่วยลดภาระงานด้านการแคชล่วงหน้าได้อย่างมากด้วยการลดความซับซ้อนของ API และช่วยให้มั่นใจว่าชิ้นงานจะดาวน์โหลดได้อย่างมีประสิทธิภาพ

วิธีการทำงานของการแคชล่วงหน้าของ Workbox

เมื่อโหลดเว็บแอปเป็นครั้งแรก workbox-precaching จะดูชิ้นงานทั้งหมดที่คุณต้องการดาวน์โหลด นำรายการที่ซ้ำกันออก และเชื่อมต่อเหตุการณ์ Service Worker ที่เกี่ยวข้องเพื่อดาวน์โหลดและจัดเก็บชิ้นงาน ระบบจะใช้ URL ที่มีอยู่แล้วข้อมูลเวอร์ชัน (เช่น แฮชเนื้อหา) เป็นคีย์แคชโดยไม่ต้องแก้ไขเพิ่มเติม URL ที่ไม่มีข้อมูลเวอร์ชันจะมีพารามิเตอร์การค้นหา URL เพิ่มเติมต่อท้ายคีย์แคช ซึ่งแสดงแฮชของเนื้อหาที่ Workbox สร้างขึ้น ณ เวลาที่สร้าง

workbox-precaching ทําสิ่งเหล่านี้ทั้งหมดในระหว่างinstall event ของ Service Worker

เมื่อผู้ใช้กลับมาที่เว็บแอปในภายหลังและคุณมี Service Worker ใหม่ที่มีชิ้นงานที่แคชไว้ล่วงหน้าต่างกัน workbox-precaching จะดูรายการใหม่และระบุว่าชิ้นงานใดเป็นชิ้นงานใหม่ทั้งหมดและชิ้นงานใดที่มีอยู่ต้องอัปเดต โดยอิงตามการแก้ไข ระบบจะเพิ่มชิ้นงานใหม่หรือการแก้ไขที่อัปเดตลงในแคชระหว่างเหตุการณ์ install ของ Service Worker ใหม่

ระบบจะไม่ใช้ Service Worker ใหม่นี้เพื่อตอบกลับคำขอจนกว่าจะมีการเรียกใช้activate เหตุการณ์ เหตุการณ์ activate คือเหตุการณ์ที่ workbox-precaching จะตรวจสอบชิ้นงานที่แคชไว้ซึ่งไม่มีอยู่ในรายการ URL ปัจจุบันอีกต่อไป และนำชิ้นงานเหล่านั้นออกจากแคช

workbox-precaching จะทําตามขั้นตอนเหล่านี้ทุกครั้งที่มีการติดตั้งและเปิดใช้งาน Service Worker เพื่อให้มั่นใจว่าผู้ใช้จะมีชิ้นงานล่าสุด และดาวน์โหลดเฉพาะไฟล์ที่มีการเปลี่ยนแปลง

การแสดงคำตอบที่แคชไว้ล่วงหน้า

การเรียกใช้ precacheAndRoute() หรือ addRoute() จะสร้างเส้นทางที่ตรงกับคําขอ URL ที่แคชไว้ล่วงหน้า

กลยุทธ์การตอบกลับที่ใช้ในเส้นทางนี้คือ cache-first ซึ่งจะใช้การตอบกลับที่แคชไว้ล่วงหน้า เว้นแต่ว่าจะไม่มีคำตอบที่แคชไว้ (เนื่องจากข้อผิดพลาดที่ไม่คาดคิด) ในกรณีนี้ระบบจะใช้การตอบกลับของเครือข่ายแทน

ลำดับที่คุณเรียก precacheAndRoute() หรือ addRoute() มีความสำคัญ โดยปกติแล้ว คุณควรเรียกใช้ไฟล์นี้ตั้งแต่เนิ่นๆ ในไฟล์ Service Worker ก่อนที่จะลงทะเบียนเส้นทางเพิ่มเติมกับ registerRoute() หากคุณเรียกใช้ registerRoute() ก่อน และเส้นทางนั้นตรงกับคําขอขาเข้า ระบบจะใช้กลยุทธ์ที่คุณกําหนดไว้ในเส้นทางเพิ่มเติมนั้นเพื่อตอบกลับแทนกลยุทธ์ "ใช้แคชก่อน" ที่ registerRoute() ใช้workbox-precaching

คําอธิบายรายการแคชล่วงหน้า

workbox-precaching ต้องการอาร์เรย์ของออบเจ็กต์ที่มีพร็อพเพอร์ตี้ url และ revision บางครั้งอาร์เรย์นี้เรียกว่าไฟล์ Manifest สำหรับการแคชล่วงหน้า

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

รายการนี้อ้างอิงชุด URL ซึ่งแต่ละรายการมีข้อมูล "การแก้ไข" ของตนเอง

สําหรับออบเจ็กต์ที่ 2 และ 3 ในตัวอย่างข้างต้น ระบบจะตั้งค่าพร็อพเพอร์ตี้ revision เป็น null เนื่องจากข้อมูลการแก้ไขอยู่ใน URL เอง ซึ่งโดยทั่วไปแล้วเป็นแนวทางปฏิบัติแนะนำสำหรับชิ้นงานแบบคงที่

ออบเจ็กต์แรก (/index.html) จะตั้งค่าพร็อพเพอร์ตี้การแก้ไขอย่างชัดเจน ซึ่งเป็นแฮชที่สร้างขึ้นโดยอัตโนมัติของเนื้อหาไฟล์ โดยทั่วไปแล้ว ไฟล์ HTML จะรวมข้อมูลการแก้ไขไว้ใน URL ไม่ได้ ซึ่งแตกต่างจากทรัพยากร JavaScript และ CSS ไม่เช่นนั้นลิงก์ไปยังไฟล์เหล่านี้บนเว็บจะใช้งานไม่ได้ทุกครั้งที่เนื้อหาของหน้าเว็บมีการเปลี่ยนแปลง

การส่งพร็อพเพอร์ตี้การแก้ไขไปยัง precacheAndRoute() จะช่วยให้ Workbox ทราบว่าไฟล์มีการเปลี่ยนแปลงและอัปเดตไฟล์ดังกล่าวตามความเหมาะสม

Workbox มีเครื่องมือที่จะช่วยสร้างรายการนี้

  • workbox-build: นี่คือแพ็กเกจ Node ที่ใช้ในงาน Gulp หรือใช้เป็นสคริปต์ npm run ได้
  • workbox-webpack-plugin: ผู้ใช้ webpack สามารถใช้ปลั๊กอินนี้ได้
  • workbox-cli: คุณยังใช้ CLI เพื่อสร้างรายการชิ้นงานและเพิ่มชิ้นงานเหล่านั้นลงใน Service Worker ได้ด้วย

คำขอขาเข้าสำหรับไฟล์ที่แคชไว้ล่วงหน้า

สิ่งหนึ่งที่ workbox-precaching จะทําได้ทันทีคือจัดการคําขอเครือข่ายขาเข้าเพื่อพยายามจับคู่กับไฟล์ที่แคชไว้ล่วงหน้า วิธีนี้รองรับแนวทางปฏิบัติทั่วไปบนเว็บ

ตัวอย่างเช่น คำขอ / มักจะได้รับการตอบสนองจากไฟล์ที่ /index.html

ด้านล่างนี้คือรายการการจัดการที่ workbox-precaching ดำเนินการโดยค่าเริ่มต้น และวิธีเปลี่ยนลักษณะการทำงานดังกล่าว

ละเว้นพารามิเตอร์ของ URL

คำขอที่มีพารามิเตอร์การค้นหาสามารถแก้ไขเพื่อนำค่าที่เฉพาะเจาะจงออก หรือนำค่าทั้งหมดออก

โดยค่าเริ่มต้น ระบบจะนำพารามิเตอร์การค้นหาที่ขึ้นต้นด้วย utm_ หรือตรงกับ fbclid ทั้งหมดออก ซึ่งหมายความว่าคำขอ /about.html?utm_campaign=abcd จะได้รับการตอบสนองด้วยรายการที่แคชไว้ล่วงหน้าสำหรับ /about.html

คุณละเว้นชุดพารามิเตอร์การค้นหาอื่นได้โดยใช้ ignoreURLParametersMatching ดังนี้

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

ดัชนีไดเรกทอรี

โดยค่าเริ่มต้น ระบบจะจับคู่คำขอที่ลงท้ายด้วย / กับรายการที่มี / ต่อท้ายindex.html ซึ่งหมายความว่าระบบจะจัดการคําขอ / ที่เข้ามาโดยอัตโนมัติด้วยรายการ /index.html ที่แคชไว้ล่วงหน้า

คุณเปลี่ยนชื่อเป็นอย่างอื่นหรือปิดใช้การตั้งค่านี้ไปเลยก็ได้โดยทำดังนี้ directoryIndex

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

URL ที่สั้นและกระชับ

หากคำขอไม่ตรงกับแคชล่วงหน้า เราจะเพิ่ม .html ต่อท้ายเพื่อรองรับ URL "สะอาด" (หรือที่เรียกว่า URL "สวย") ซึ่งหมายความว่าคําขออย่าง /about จะจัดการโดยรายการที่แคชไว้ล่วงหน้าสําหรับ /about.html

คุณปิดใช้ลักษณะการทำงานนี้ได้โดยการตั้งค่า cleanUrls ดังนี้

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

การจัดการที่กำหนดเอง

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

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

การใช้งานขั้นสูง

การใช้ PrecacheController โดยตรง

โดยค่าเริ่มต้น workbox-precaching จะตั้งค่าโปรแกรมฟัง install และ activate ให้คุณ สําหรับนักพัฒนาซอฟต์แวร์ที่คุ้นเคยกับ Service Worker ตัวเลือกนี้อาจไม่เหมาะหากคุณต้องการการควบคุมเพิ่มเติม

คุณสามารถใช้ PrecacheController โดยตรงเพื่อเพิ่มรายการลงในแคชล่วงหน้า กำหนดเวลาติดตั้งชิ้นงานเหล่านี้ และกำหนดเวลาการล้างข้อมูลแทนการใช้การส่งออกเริ่มต้น

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

การอ่านชิ้นงานที่แคชไว้ล่วงหน้าโดยตรง

บางครั้งคุณอาจต้องอ่านชิ้นงานที่แคชไว้ล่วงหน้าโดยตรง นอกบริบทของการกำหนดเส้นทางที่ workbox-precaching ดําเนินการโดยอัตโนมัติได้ เช่น คุณอาจต้องการแคชเทมเพลต HTML บางส่วนไว้ล่วงหน้า ซึ่งจะต้องดึงข้อมูลมาใช้เมื่อสร้างคำตอบแบบเต็ม

โดยทั่วไป คุณสามารถใช้ Cache Storage API เพื่อรับออบเจ็กต์ Response ที่แคชไว้ล่วงหน้าได้ แต่มีข้อจํากัดเล็กน้อยคือ คีย์แคช URL ที่ต้องใช้ในการเรียก cache.match() อาจมีพารามิเตอร์เวอร์ชันที่ workbox-precaching สร้างและดูแลรักษาโดยอัตโนมัติ

หากต้องการรับคีย์แคชที่ถูกต้อง คุณสามารถเรียกใช้ getCacheKeyForURL() โดยส่ง URL ต้นฉบับ แล้วใช้ผลลัพธ์เพื่อดำเนินการ cache.match() ในแคชที่เหมาะสม

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

หรือหากต้องการเพียงออบเจ็กต์ Response ที่แคชไว้ล่วงหน้า คุณสามารถเรียกใช้ matchPrecache() ซึ่งจะใช้คีย์แคชที่ถูกต้องและค้นหาในแคชที่ถูกต้องโดยอัตโนมัติ

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

ล้างข้อมูลการแคชล่วงหน้าเก่า

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

ข้อมูลล้าสมัยนี้จะไม่รบกวนการทำงานปกติ แต่จะมีผลกระทบต่อการใช้โควต้าพื้นที่เก็บข้อมูลโดยรวม และอาจทำให้ผู้ใช้ลบข้อมูลดังกล่าวได้สะดวกขึ้น ซึ่งทำได้โดยการเพิ่ม cleanupOutdatedCaches() ลงใน Service Worker หรือตั้งค่า cleanupOutdatedCaches: true หากคุณใช้เครื่องมือสร้างของ Workbox เพื่อสร้าง Service Worker

การใช้ความสมบูรณ์ของไฟล์ย่อย

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

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

การกำหนดรายการไฟล์ Manifest ที่ควรมีพร็อพเพอร์ตี้ integrity และการหาค่าที่เหมาะสมที่จะใช้อยู่นอกขอบเขตของเครื่องมือสร้างของ Workbox แต่นักพัฒนาแอปที่ต้องการเลือกใช้ฟังก์ชันนี้ควรแก้ไขไฟล์ Manifest สำหรับการแคชล่วงหน้าที่ Workbox สร้างขึ้นเพื่อเพิ่มข้อมูลที่เหมาะสมด้วยตนเอง ตัวเลือก manifestTransform ในการกำหนดค่าเครื่องมือสร้างของ Workbox ช่วยในเรื่องต่อไปนี้ได้

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

ประเภท

CleanupResult

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

  • deletedCacheRequests

    string[]

InstallResult

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

  • notUpdatedURLs

    string[]

  • updatedURLs

    string[]

PrecacheController

ทำการแคชเนื้อหาล่วงหน้าอย่างมีประสิทธิภาพ

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

  • เครื่องมือสร้าง

    โมฆะ

    สร้าง PrecacheController ใหม่

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (options?: PrecacheControllerOptions) => {...}

    • ตัวเลือก

      PrecacheControllerOptions ไม่บังคับ

  • กลยุทธ์

    กลยุทธ์

  • เปิดใช้งาน

    โมฆะ

    ลบชิ้นงานที่ไม่ได้อยู่ในไฟล์ Manifest แคชล่วงหน้าปัจจุบันอีกต่อไป เรียกใช้เมธอดนี้จากเหตุการณ์เปิดใช้งาน Service Worker

    หมายเหตุ: เมธอดนี้จะเรียก event.waitUntil() ให้ คุณจึงไม่ต้องเรียกใช้ด้วยตนเองในตัวแฮนเดิลเหตุการณ์

    ฟังก์ชัน activate มีรูปแบบดังนี้ 

    (event: ExtendableEvent) => {...}

    • เหตุการณ์

      ExtendableEvent

  • addToCacheList

    โมฆะ

    วิธีนี้จะเพิ่มรายการลงในรายการแคชล่วงหน้า นำรายการที่ซ้ำกันออก และตรวจสอบว่าข้อมูลถูกต้อง

    ฟังก์ชัน addToCacheList มีรูปแบบดังนี้ 

    (entries: (string | PrecacheEntry)[]) => {...}

    • รายการ

      (string | PrecacheEntry)[]

      อาร์เรย์ของรายการที่จะแคชไว้ล่วงหน้า

  • createHandlerBoundToURL

    โมฆะ

    แสดงผลฟังก์ชันที่ค้นหา url ในแคชล่วงหน้า (โดยพิจารณาข้อมูลการแก้ไข) และแสดงผล Response ที่เกี่ยวข้อง

    ฟังก์ชัน createHandlerBoundToURL มีรูปแบบดังนี้ 

    (url: string) => {...}

    • URL

      สตริง

      URL ที่แคชไว้ล่วงหน้าซึ่งจะใช้ค้นหา Response

  • getCacheKeyForURL

    โมฆะ

    แสดงคีย์แคชที่ใช้สำหรับจัดเก็บ URL ที่ระบุ หาก URL นั้นไม่มีเวอร์ชัน เช่น "/index.html" คีย์แคชจะเป็น URL เดิมที่มีพารามิเตอร์การค้นหาต่อท้าย

    ฟังก์ชัน getCacheKeyForURL มีรูปแบบดังนี้ 

    (url: string) => {...}

    • URL

      สตริง

      URL ของคีย์แคชที่คุณต้องการค้นหา

    • returns

      สตริง

      URL ที่มีเวอร์ชันซึ่งสอดคล้องกับคีย์แคชสําหรับ URL เดิม หรือ "ไม่ระบุ" หากไม่ได้แคช URL นั้นไว้ล่วงหน้า

  • getCachedURLs

    โมฆะ

    แสดงรายการ URL ทั้งหมดที่ Service Worker ปัจจุบันแคชไว้ล่วงหน้า

    ฟังก์ชัน getCachedURLs มีรูปแบบดังนี้ 

    () => {...}

    • returns

      string[]

      URL ที่แคชไว้ล่วงหน้า

  • getIntegrityForCacheKey

    โมฆะ

    ฟังก์ชัน getIntegrityForCacheKey มีรูปแบบดังนี้ 

    (cacheKey: string) => {...}

    • cacheKey

      สตริง

    • returns

      สตริง

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

  • getURLsToCacheKeys

    โมฆะ

    แสดงการแมป URL ที่แคชไว้ล่วงหน้ากับคีย์แคชที่เกี่ยวข้อง โดยพิจารณาจากข้อมูลการแก้ไขของ URL

    ฟังก์ชัน getURLsToCacheKeys มีรูปแบบดังนี้ 

    () => {...}

    • returns

      Map<stringstring>

      URL สำหรับแคชการแมปแป้นพิมพ์

  • ติดตั้ง

    โมฆะ

    แคชชิ้นงานใหม่และชิ้นงานที่อัปเดตไว้ล่วงหน้า เรียกใช้เมธอดนี้จากเหตุการณ์ install ของ Service Worker

    หมายเหตุ: เมธอดนี้จะเรียก event.waitUntil() ให้คุณ คุณจึงไม่ต้องเรียกใช้ด้วยตนเองในตัวแฮนเดิลเหตุการณ์

    ฟังก์ชัน install มีรูปแบบดังนี้ 

    (event: ExtendableEvent) => {...}

    • เหตุการณ์

      ExtendableEvent

  • matchPrecache

    โมฆะ

    ซึ่งจะทำหน้าที่แทน cache.match() โดยตรง โดยมีความแตกต่างดังนี้

    • ข้อมูลนี้ทราบชื่อของแคชล่วงหน้าและจะตรวจสอบในแคชนั้นเท่านั้น
    • ซึ่งช่วยให้คุณส่ง URL "ต้นฉบับ" ที่ไม่มีพารามิเตอร์เวอร์ชันได้ และระบบจะค้นหาคีย์แคชที่ถูกต้องสำหรับการแก้ไข URL นั้นๆ ที่ใช้งานอยู่ในปัจจุบันโดยอัตโนมัติ

    เช่น matchPrecache('index.html') จะค้นหาคำตอบที่ถูกต้องซึ่งแคชไว้ล่วงหน้าสำหรับ Service Worker ที่ใช้งานอยู่ในปัจจุบัน แม้ว่าคีย์แคชจริงจะเป็น '/index.html?__WB_REVISION__=1234abcd' ก็ตาม

    ฟังก์ชัน matchPrecache มีรูปแบบดังนี้ 

    (request: string | Request) => {...}

    • ส่งคำขอ

      string | คําขอ

      คีย์ (ไม่มีพารามิเตอร์การแก้ไข) เพื่อค้นหาในแคชล่วงหน้า

    • returns

      Promise<Response>

  • แคชล่วงหน้า

    โมฆะ

    เพิ่มรายการลงในรายการแคชล่วงหน้า นำรายการที่ซ้ำกันออก และเก็บไฟล์ไว้ในแคช" เมื่อติดตั้ง Service Worker

    เรียกเมธอดนี้ได้หลายครั้ง

    ฟังก์ชัน precache มีรูปแบบดังนี้ 

    (entries: (string | PrecacheEntry)[]) => {...}

PrecacheEntry

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

  • ความสมบูรณ์

    สตริง ไม่บังคับ

  • การแก้ไข

    สตริง ไม่บังคับ

  • URL

    สตริง

PrecacheFallbackPlugin

PrecacheFallbackPlugin ให้คุณระบุคำตอบ "สำรองสำหรับออฟไลน์" เพื่อใช้ในกรณีที่กลยุทธ์หนึ่งๆ สร้างคำตอบไม่ได้

โดยจะดำเนินการนี้โดยการขัดจังหวะการเรียกกลับของhandlerDidErrorปลั๊กอิน และแสดงการตอบกลับที่แคชไว้ล่วงหน้าโดยพิจารณาพารามิเตอร์การแก้ไขที่คาดไว้โดยอัตโนมัติ

ระบบจะใช้อินสแตนซ์เริ่มต้น เว้นแต่คุณจะส่งอินสแตนซ์ PrecacheController ไปยังคอนสตรคเตอร์อย่างชัดเจน โดยทั่วไป นักพัฒนาแอปส่วนใหญ่จะใช้ค่าเริ่มต้น

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

  • เครื่องมือสร้าง

    โมฆะ

    สร้าง PrecacheFallbackPlugin ใหม่ที่มี fallbackURL ที่เชื่อมโยง

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (config: object) => {...}

    • การกำหนดค่า

      ออบเจ็กต์

      • fallbackURL

        สตริง

        URL ที่แคชไว้ล่วงหน้าเพื่อใช้เป็นคำตอบสำรองในกรณีที่กลยุทธ์ที่เชื่อมโยงสร้างคำตอบไม่ได้

      • precacheController

        PrecacheController ไม่บังคับ

PrecacheRoute

ซับคลาสของ workbox-routing.Route ที่ใช้อินสแตนซ์ workbox-precaching.PrecacheController เพื่อจับคู่คําขอขาเข้าและจัดการการดึงข้อมูลคําตอบจากแคชล่วงหน้า

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

  • เครื่องมือสร้าง

    โมฆะ

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}

    • precacheController

      PrecacheController

      อินสแตนซ์ PrecacheController ใช้เพื่อจับคู่คําขอและตอบสนองต่อเหตุการณ์การดึงข้อมูล

    • ตัวเลือก

      PrecacheRouteOptions ไม่บังคับ

  • catchHandler

    RouteHandlerObject ไม่บังคับ

  • ตรงกัน

    RouteMatchCallback

  • method

    HTTPMethod

  • setCatchHandler

    โมฆะ

    ฟังก์ชัน setCatchHandler มีรูปแบบดังนี้ 

    (handler: RouteHandler) => {...}

    • handler

      RouteHandler

      ฟังก์ชันการเรียกกลับที่แสดงผล Promise ที่แก้ไขเป็น Response

PrecacheRouteOptions

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

  • cleanURLs

    บูลีน ไม่บังคับ

  • directoryIndex

    สตริง ไม่บังคับ

  • ignoreURLParametersMatching

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

  • urlManipulation

    urlManipulation ไม่บังคับ

PrecacheStrategy

การติดตั้งใช้งาน workbox-strategies.Strategy ที่ออกแบบมาโดยเฉพาะให้ทำงานร่วมกับ workbox-precaching.PrecacheController เพื่อแคชและดึงข้อมูลชิ้นงานที่แคชไว้ล่วงหน้า

หมายเหตุ: ระบบจะสร้างอินสแตนซ์ของคลาสนี้โดยอัตโนมัติเมื่อสร้าง PrecacheController โดยปกติแล้วคุณไม่จําเป็นต้องสร้างอินสแตนซ์นี้ด้วยตนเอง

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

  • เครื่องมือสร้าง

    โมฆะ

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

    (options?: PrecacheStrategyOptions) => {...}

    • ตัวเลือก

      PrecacheStrategyOptions ไม่บังคับ

  • cacheName

    สตริง

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    WorkboxPlugin

  • _awaitComplete

    โมฆะ

    ฟังก์ชัน _awaitComplete มีรูปแบบดังนี้ 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    โมฆะ

    ฟังก์ชัน _getResponse มีรูปแบบดังนี้ 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • handler

      StrategyHandler

    • ส่งคำขอ

      ส่งคำขอ

    • เหตุการณ์

      ExtendableEvent

    • returns

      Promise<Response>

  • _handleFetch

    โมฆะ

    ฟังก์ชัน _handleFetch มีรูปแบบดังนี้ 

    (request: Request, handler: StrategyHandler) => {...}

    • returns

      Promise<Response>

  • _handleInstall

    โมฆะ

    ฟังก์ชัน _handleInstall มีรูปแบบดังนี้ 

    (request: Request, handler: StrategyHandler) => {...}

    • returns

      Promise<Response>

  • แฮนเดิล

    โมฆะ

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

    เมื่ออินสแตนซ์กลยุทธ์ลงทะเบียนกับ Workbox workbox-routing.Route ระบบจะเรียกใช้เมธอดนี้โดยอัตโนมัติเมื่อเส้นทางตรงกัน

    หรือจะใช้เมธอดนี้ใน FetchEvent listener แบบสแตนด์อโลนโดยส่งไปยัง event.respondWith() ก็ได้

    ฟังก์ชัน handle มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      Promise<Response>

  • handleAll

    โมฆะ

    คล้ายกับ workbox-strategies.Strategy~handle แต่แทนที่จะแสดงผลแค่ Promise ที่แปลงเป็น Response แต่จะแสดงผลเป็นทูเปิลของ Promise [response, done] โดยที่รายการแรก (response) เทียบเท่ากับสิ่งที่ handle() แสดงผล และรายการที่ 2 คือ Promise ที่จะแสดงผลเมื่อ Promise ที่เพิ่มลงใน event.waitUntil() เสร็จสมบูรณ์แล้ว ซึ่งเป็นส่วนหนึ่งของการดำเนินการตามกลยุทธ์

    คุณสามารถรอdoneการยืนยันเพื่อให้แน่ใจว่างานเพิ่มเติมที่กลยุทธ์ทํา (โดยปกติคือการแคชคําตอบ) เสร็จสมบูรณ์

    ฟังก์ชัน handleAll มีรูปแบบดังนี้ 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • ตัวเลือก

      FetchEvent | HandlerCallbackOptions

      FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่าง

    • returns

      [Promise<Response>, Promise<void>]

      มัดข้อมูลของ [response, done] promise ที่ใช้ระบุได้ว่าเมื่อใดที่การตอบสนองจะได้รับการแก้ไข และเมื่อใดที่ตัวแฮนเดิลทํางานเสร็จแล้ว

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

ประเภท

ฟังก์ชัน

พารามิเตอร์

  • { url }

    ออบเจ็กต์

    • URL

      URL

การคืนสินค้า

  • URL[]

เมธอด

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

เพิ่มปลั๊กอินลงในกลยุทธ์การแคชล่วงหน้า

พารามิเตอร์

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

เพิ่ม fetch listener ไปยัง Service Worker ที่จะตอบสนองต่อ [คำขอเครือข่าย]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests ด้วยเนื้อหาที่แคชไว้ล่วงหน้า

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

พารามิเตอร์

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

เพิ่ม activate event listener ซึ่งจะล้างข้อมูลแคชล่วงหน้าที่เข้ากันไม่ได้ซึ่งสร้างโดย Workbox เวอร์ชันเก่า

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

ฟังก์ชันตัวช่วยที่เรียกใช้ PrecacheController#createHandlerBoundToURL ในอินสแตนซ์ PrecacheController เริ่มต้น

หากคุณสร้าง PrecacheController ของคุณเอง ให้เรียกใช้ PrecacheController#createHandlerBoundToURL ในอินสแตนซ์นั้นแทนการใช้ฟังก์ชันนี้

พารามิเตอร์

  • URL

    สตริง

    URL ที่แคชไว้ล่วงหน้าซึ่งจะใช้ค้นหา Response

การคืนสินค้า

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

รับ URL และแสดงผล URL ที่เกี่ยวข้องซึ่งสามารถใช้เพื่อค้นหารายการในการแคชล่วงหน้า

หากระบุ URL แบบสัมพัทธ์ ระบบจะใช้ตำแหน่งของไฟล์ Service Worker เป็นฐาน

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

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

พารามิเตอร์

  • URL

    สตริง

    URL ที่มีคีย์แคชที่จะค้นหา

การคืนสินค้า

  • string | undefined

    คีย์แคชที่สอดคล้องกับ URL นั้น

matchPrecache()

workbox-precaching.matchPrecache(
  request: string | Request,
)

ฟังก์ชันตัวช่วยที่เรียกใช้ PrecacheController#matchPrecache ในอินสแตนซ์ PrecacheController เริ่มต้น

หากคุณสร้าง PrecacheController ของคุณเอง ให้เรียกใช้ PrecacheController#matchPrecache ในอินสแตนซ์นั้นแทนการใช้ฟังก์ชันนี้

พารามิเตอร์

  • ส่งคำขอ

    string | คําขอ

    คีย์ (ไม่มีพารามิเตอร์การแก้ไข) เพื่อค้นหาในแคชล่วงหน้า

การคืนสินค้า

  • Promise<Response | undefined>

precache()

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

เพิ่มรายการลงในรายการแคชล่วงหน้า นำรายการที่ซ้ำกันออก และเก็บไฟล์ไว้ในแคช" เมื่อติดตั้ง Service Worker

เรียกเมธอดนี้ได้หลายครั้ง

โปรดทราบว่าวิธีนี้จะไม่แสดงไฟล์ที่แคชไว้ให้คุณ โดยจะแคชไฟล์ไว้ล่วงหน้าเท่านั้น หากต้องการตอบกลับคําขอเครือข่าย ให้โทรไปที่ workbox-precaching.addRoute

หากมีอาร์เรย์ไฟล์เดียวที่จะแคชไว้ล่วงหน้า เพียงเรียกใช้ workbox-precaching.precacheAndRoute

พารามิเตอร์

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

วิธีนี้จะเพิ่มรายการลงในรายการแคชล่วงหน้าและเพิ่มเส้นทางเพื่อตอบสนองต่อเหตุการณ์การดึงข้อมูล

นี่เป็นเมธอดที่สะดวกซึ่งจะเรียกใช้ workbox-precaching.precache และ workbox-precaching.addRoute ในสายเดียว

พารามิเตอร์

  • รายการ

    (string | PrecacheEntry)[]

    อาร์เรย์ของรายการที่จะแคชไว้ล่วงหน้า

  • ตัวเลือก

    PrecacheRouteOptions ไม่บังคับ