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

ฟีเจอร์หนึ่งของ 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.

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

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

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

workbox-precaching.cleanupOutdatedCaches()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

workbox-precaching.getCacheKeyForURL(
  url: string,
)

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

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

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