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

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

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

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

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

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

workbox-precaching จะดำเนินการทั้งหมดนี้ในระหว่างเหตุการณ์ install ของ 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() ก่อน และเส้นทางนั้นตรงกับคำขอที่เข้ามาใหม่ ระบบจะใช้กลยุทธ์ใดก็ตามที่คุณกำหนดในเส้นทางเพิ่มเติมในการตอบกลับแทนการใช้กลยุทธ์ที่เน้นแคชเป็นอันดับแรกที่ 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: นี่คือแพ็กเกจโหนดที่ใช้ในงาน Gulp หรือใช้เป็นสคริปต์การเรียกใช้ NPM ได้
• 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 จะตั้งค่า Listener 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 ที่แคชล่วงหน้าได้ แต่ยังมีข้อบกพร่องอยู่ 1 อย่างคือ คีย์แคช 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 และการหาค่าที่เหมาะสมที่จะใช้นั้นอยู่นอกเหนือขอบเขตของเครื่องมือสร้างของกล่องจดหมาย นักพัฒนาซอฟต์แวร์ที่ต้องการเลือกใช้ฟังก์ชันการทำงานนี้ควรแก้ไขไฟล์ 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

  สตริง[]

InstallResult

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

• notUpdatedURLs

  สตริง[]

• updatedURLs

  สตริง[]

PrecacheController

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

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

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

  void

  สร้าง PrecacheController ใหม่

  ฟังก์ชัน constructor มีลักษณะดังนี้

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

  • ตัวเลือก

    PrecacheControllerOptions ไม่บังคับ

  • returns

    PrecacheController

• ยุทธศาสตร์

  การพากย์เสียง

• เปิดใช้งาน

  void

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

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

  ฟังก์ชัน activate มีลักษณะดังนี้

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

  • เหตุการณ์

    ExtendableEvent

  • returns

    Promise<CleanupResult>

• addToCacheList

  void

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

  ฟังก์ชัน addToCacheList มีลักษณะดังนี้

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

  • รายการ

    (สตริง|PrecacheEntry)[]

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

• createHandlerBoundToURL

  void

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

  ฟังก์ชัน createHandlerBoundToURL มีลักษณะดังนี้

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

  • url

    string

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

  • returns

    RouteHandlerCallback

• getCacheKeyForURL

  void

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

  ฟังก์ชัน getCacheKeyForURL มีลักษณะดังนี้

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

  • url

    string

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

  • returns

    string

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

• getCachedURLs

  void

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

  ฟังก์ชัน getCachedURLs มีลักษณะดังนี้

  ()=> {...}

  • returns

    สตริง[]

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

• getIntegrityForCacheKey

  void

  ฟังก์ชัน getIntegrityForCacheKey มีลักษณะดังนี้

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

  • cacheKey

    string

  • returns

    string

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

• getURLsToCacheKeys

  void

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

  ฟังก์ชัน getURLsToCacheKeys มีลักษณะดังนี้

  ()=> {...}

  • returns

    แผนที่<สตริง>

    URL สำหรับแคชการแมปคีย์

• ติดตั้ง

  void

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

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

  ฟังก์ชัน install มีลักษณะดังนี้

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

  • เหตุการณ์

    ExtendableEvent

  • returns

    Promise<InstallResult>

• matchPrecache

  void

  การดำเนินการนี้เป็นการแทนที่ cache.match() แบบดรอปอินที่มีความแตกต่างดังต่อไปนี้

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

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

  ฟังก์ชัน matchPrecache มีลักษณะดังนี้

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

  • ส่งคำขอ

    สตริง|คำขอ

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

  • returns

    สัญญา<การตอบกลับ>

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

  void

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

  วิธีการนี้สามารถเรียกใช้ได้หลายครั้ง

  ฟังก์ชัน precache มีลักษณะดังนี้

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

  • รายการ

    (สตริง|PrecacheEntry)[]

PrecacheEntry

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

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

  string ไม่บังคับ

• การแก้ไข

  string ไม่บังคับ

• url

  string

PrecacheFallbackPlugin

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

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

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

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

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

  void

  สร้าง PrecacheFallbackPlugin ใหม่ที่มี fallbackURL ที่เกี่ยวข้อง

  ฟังก์ชัน constructor มีลักษณะดังนี้

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

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

    ออบเจ็กต์

    • fallbackURL

      string

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

    • precacheController

      PrecacheController ไม่บังคับ

  • returns

    PrecacheFallbackPlugin

PrecacheRoute

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

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

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

  void

  ฟังก์ชัน constructor มีลักษณะดังนี้

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

  • precacheController

    PrecacheController

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

  • ตัวเลือก

    PrecacheRouteOptions ไม่บังคับ

  • returns

    PrecacheRoute

• catchHandler

  RouteHandlerObject ไม่บังคับ

• ตัวแฮนเดิล

  RouteHandlerObject

• ตรงกัน

  RouteMatchCallback

• method

  HTTPMethod

• setCatchHandler

  void

  ฟังก์ชัน setCatchHandler มีลักษณะดังนี้

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

  • ตัวแฮนเดิล

    RouteHandler

    ฟังก์ชันเรียกกลับที่จะแสดงผลการคืนค่า "สัญญาว่า" เป็นการตอบกลับ

PrecacheRouteOptions

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

• cleanURLs

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

• directoryIndex

  string ไม่บังคับ

• ignoreURLParametersMatching

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

• urlManipulation

  urlManipulation ไม่บังคับ

PrecacheStrategy

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

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

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

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

  void

  ฟังก์ชัน constructor มีลักษณะดังนี้

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

  • ตัวเลือก

    PrecacheStrategyOptions ไม่บังคับ

  • returns

    PrecacheStrategy

• cacheName

  string

• fetchOptions

  RequestInit ไม่บังคับ

• matchOptions

  CacheQueryOptions ไม่บังคับ

• ปลั๊กอิน

  WorkboxPlugin[]

• copyRedirectedCacheableResponsesPlugin

  WorkboxPlugin

• defaultPrecacheCacheabilityPlugin

  WorkboxPlugin

• _awaitComplete

  void

  ฟังก์ชัน _awaitComplete มีลักษณะดังนี้

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

  • responseDone

    สัญญา<การตอบกลับ>

  • ตัวแฮนเดิล

    StrategyHandler

  • ส่งคำขอ

    ส่งคำขอ

  • เหตุการณ์

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

  ฟังก์ชัน _getResponse มีลักษณะดังนี้

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

  • ตัวแฮนเดิล

    StrategyHandler

  • ส่งคำขอ

    ส่งคำขอ

  • เหตุการณ์

    ExtendableEvent

  • returns

    สัญญา<การตอบกลับ>

• _handleFetch

  void

  ฟังก์ชัน _handleFetch มีลักษณะดังนี้

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

  • ส่งคำขอ

    ส่งคำขอ

  • ตัวแฮนเดิล

    StrategyHandler

  • returns

    สัญญา<การตอบกลับ>

• ติดตั้ง _handle

  void

  ฟังก์ชัน _handleInstall มีลักษณะดังนี้

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

  • ส่งคำขอ

    ส่งคำขอ

  • ตัวแฮนเดิล

    StrategyHandler

  • returns

    สัญญา<การตอบกลับ>

• แฮนเดิล

  void

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

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

  หรือคุณจะใช้วิธีนี้ในตัวฟัง FetchEvent แบบสแตนด์อโลนได้โดยส่งผ่านไปยัง event.respondWith()

  ฟังก์ชัน handle มีลักษณะดังนี้

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

  • ตัวเลือก

    FetchEvent|HandlerCallbackOptions

    FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง

  • returns

    สัญญา<การตอบกลับ>

• handleAll

  void

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

  รอให้กลยุทธ์ done ทำงานเพิ่มเติมได้สำเร็จ (โดยปกติแล้วการแคชคำตอบ)

  ฟังก์ชัน handleAll มีลักษณะดังนี้

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

  • ตัวเลือก

    FetchEvent|HandlerCallbackOptions

    FetchEvent หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ในรายการด้านล่าง

  • returns

    [Promise<Response>,Promise<void>]

    แพ็กเกจของ [response, Done] คำสัญญาที่สามารถใช้กำหนดได้ว่าการตอบกลับจะได้รับการแก้ไขเมื่อใด เช่นเดียวกับเมื่อตัวแฮนเดิลทำงานทั้งหมดเสร็จสิ้น

urlManipulation()

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

ประเภท

ฟังก์ชัน

พารามิเตอร์

• { URL }

  ออบเจ็กต์

  • url

    URL

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

• URL[]

วิธีการ

addPlugins()

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

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

พารามิเตอร์

• ปลั๊กอิน

  WorkboxPlugin[]

addRoute()

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

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

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

พารามิเตอร์

• ตัวเลือก

  PrecacheRouteOptions ไม่บังคับ

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

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

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

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

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

พารามิเตอร์

• url

  string

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

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

• RouteHandlerCallback

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

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

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

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

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

พารามิเตอร์

• url

  string

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

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

• สตริง|ไม่ระบุ

  คีย์แคชที่ตรงกับ URL นั้น

matchPrecache()

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

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

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

พารามิเตอร์

• ส่งคำขอ

  สตริง|คำขอ

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

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

• คำมั่นสัญญา<คำตอบ|undefined>

precache()

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

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

วิธีการนี้สามารถเรียกใช้ได้หลายครั้ง

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

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

พารามิเตอร์

• รายการ

  (สตริง|PrecacheEntry)[]

precacheAndRoute()

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

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

นี่คือวิธีอำนวยความสะดวกที่จะเรียกใช้ workbox-precaching.precache และ workbox-precaching.addRoute ในการโทรสายเดียว

พารามิเตอร์

• รายการ

  (สตริง|PrecacheEntry)[]

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

• ตัวเลือก

  PrecacheRouteOptions ไม่บังคับ