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

ฟีเจอร์หนึ่งของ 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-precaching เวอร์ชันก่อนหน้าอนุญาตให้ไฟล์ Manifest แคชล่วงหน้ามี URL สตริงในออบเจ็กต์เพิ่มเติมที่มีพร็อพเพอร์ตี้ url และ revision การดำเนินการนี้เลิกใช้งานแล้วในเวอร์ชัน 5 ตอนนี้คุณต้องส่งออบเจ็กต์เสมอ และเพื่อป้องกันไม่ให้ Workbox แก้ไข URL ในแคช คุณต้องตั้งค่าพร็อพเพอร์ตี้ revision เป็น null อย่างชัดแจ้ง การผ่านสตริงจะยังคงใช้งานได้ (พร้อมคำเตือน) ในเวอร์ชัน 5 แต่เวอร์ชัน 6 จะไม่รองรับการดำเนินการนี้อีกต่อไป

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

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

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

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

สิ่งหนึ่งที่ 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');

หมายเหตุ: หากคุณใช้อินสแตนซ์ PrecacheController ของคุณเองแทนการใช้อินสแตนซ์เริ่มต้นผ่าน precacheAndRoute คุณควรเรียกใช้เมธอด matchPrecache() หรือ getCacheKeyForURL() ในอินสแตนซ์นั้นโดยตรง

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

เวอร์ชันส่วนใหญ่ของ 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 ไม่บังคับ

  • returns

    PrecacheController

• กลยุทธ์

  กลยุทธ์

• เปิดใช้งาน

  โมฆะ

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

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

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

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

  • เหตุการณ์

    ExtendableEvent

  • returns

    Promise<CleanupResult>

• addToCacheList

  โมฆะ

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

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

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

  • รายการ

    (string | PrecacheEntry)[]

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

• createHandlerBoundToURL

  โมฆะ

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

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

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

  • URL

    สตริง

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

  • returns

    RouteHandlerCallback

• 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

  • returns

    Promise<InstallResult>

• 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)[]) => {...}

  • รายการ

    (string | PrecacheEntry)[]

PrecacheEntry

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

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

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

• การแก้ไข

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

• URL

  สตริง

PrecacheFallbackPlugin

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

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

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

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

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

  โมฆะ

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

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

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

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

    ออบเจ็กต์

    • fallbackURL

      สตริง

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

    • precacheController

      PrecacheController ไม่บังคับ

  • returns

    PrecacheFallbackPlugin

PrecacheRoute

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

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

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

  โมฆะ

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

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

  • precacheController

    PrecacheController

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

  • ตัวเลือก

    PrecacheRouteOptions ไม่บังคับ

  • returns

    PrecacheRoute

• catchHandler

  RouteHandlerObject ไม่บังคับ

• handler

  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 ไม่บังคับ

  • returns

    PrecacheStrategy

• 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) => {...}

  • ส่งคำขอ

    ส่งคำขอ

  • handler

    StrategyHandler

  • returns

    Promise<Response>

• _handleInstall

  โมฆะ

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

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

  • ส่งคำขอ

    ส่งคำขอ

  • 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[],
)

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

พารามิเตอร์

• ปลั๊กอิน

  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 รายการอื่นๆ

พารามิเตอร์

• ตัวเลือก

  PrecacheRouteOptions ไม่บังคับ

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

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

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

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

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

พารามิเตอร์

• URL

  สตริง

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

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

• RouteHandlerCallback

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

พารามิเตอร์

• รายการ

  (string | PrecacheEntry)[]

precacheAndRoute()

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

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

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

พารามิเตอร์

• รายการ

  (string | PrecacheEntry)[]

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

• ตัวเลือก

  PrecacheRouteOptions ไม่บังคับ