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

ฟีเจอร์หนึ่งของ 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 มีเครื่องมือที่จะช่วยสร้างรายชื่อต่อไปนี้

  • workbox-build: นี่คือแพ็กเกจโหนดที่ใช้ในงาน Gulp หรือใช้เป็นสคริปต์การเรียกใช้ NPM ได้
  • 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 จะตั้งค่า 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');

ล้างแคชเก่าล่วงหน้า

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

  • กลยุทธ์

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

  • เปิดใช้งาน

    void

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

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

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

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

    • event

      ExtendableEvent

  • addToCacheList

    void

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

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

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

    • รายการ

      (สตริง | PrecacheEntry)[]

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

  • createHandlerBoundToURL

    void

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

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

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

    • url

      string

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

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

    • event

      ExtendableEvent

  • 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

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

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

    string ไม่บังคับ

  • การแก้ไข

    string ไม่บังคับ

  • url

    string

PrecacheFallbackPlugin

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

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

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

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

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

    void

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

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

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

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

      ออบเจ็กต์

      • fallbackURL

        string

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

      • precacheController

        PrecacheController ไม่บังคับ

PrecacheRoute

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

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

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

    void

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

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

    • precacheController

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

    • ตัวเลือก

      PrecacheRouteOptions ไม่บังคับ

  • catchHandler

    RouteHandlerObject ไม่บังคับ

  • ตัวแฮนเดิล
  • ตรงกัน
  • method

    HTTPMethod

  • setCatchHandler

    void

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

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

    • ตัวแฮนเดิล

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

PrecacheRouteOptions

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

  • cleanURLs

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

  • directoryIndex

    string ไม่บังคับ

  • ignoreURLParametersMatching

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

  • urlManipulation

    urlManipulation ไม่บังคับ

PrecacheStrategy

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

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

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

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

    void

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

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

    • ตัวเลือก

      PrecacheStrategyOptions ไม่บังคับ

  • cacheName

    string

  • fetchOptions

    RequestInit ไม่บังคับ

  • matchOptions

    CacheQueryOptions ไม่บังคับ

  • ปลั๊กอิน
  • copyRedirectedCacheableResponsesPlugin
  • defaultPrecacheCacheabilityPlugin
  • _awaitComplete

    void

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

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

    • responseDone

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

    • ตัวแฮนเดิล
    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

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

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

    • ตัวแฮนเดิล
    • ส่งคำขอ

      ส่งคำขอ

    • event

      ExtendableEvent

    • returns

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

  • _handleFetch

    void

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

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

    • ส่งคำขอ

      ส่งคำขอ

    • ตัวแฮนเดิล
    • returns

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

  • ติดตั้ง _handle

    void

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

    (request: Request, handler: 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[],
)

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

พารามิเตอร์

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 อื่นๆ

พารามิเตอร์

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

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

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

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

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

พารามิเตอร์

  • url

    string

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

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

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 ในอินสแตนซ์นั้นแทนการใช้ฟังก์ชันนี้

พารามิเตอร์

  • ส่งคำขอ

    สตริง | คำขอ

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

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

  • Promise<Response | undefined>

precache()

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

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

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

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

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

พารามิเตอร์

precacheAndRoute()

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

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

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

พารามิเตอร์

  • รายการ

    (สตริง | PrecacheEntry)[]

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

  • ตัวเลือก

    PrecacheRouteOptions ไม่บังคับ