workbox-sw

โมดูล workbox-sw เป็นวิธีที่ง่ายสุดๆ ในการเริ่มต้นใช้งาน ด้วยโมดูล Workbox จะทำให้การโหลดโมดูล Workbox ง่ายขึ้น และ จึงนำเสนอวิธีการช่วยแนะนำแบบง่ายๆ

คุณสามารถใช้ workbox-sw ผ่าน CDN ของเรา หรือใช้กับชุดไฟล์ Workbox บนเซิร์ฟเวอร์ของคุณเอง

การใช้ Workbox SW ผ่าน CDN

วิธีที่ง่ายที่สุดในการเริ่มต้นใช้งานโมดูลนี้คือผ่านทาง CDN คุณเพียงแค่ต้อง เพิ่มค่าต่อไปนี้ลงใน Service Worker

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

จากรายการนี้ คุณจะมีเนมสเปซ workbox ใน Service Worker ซึ่งจะ เพื่อให้สิทธิ์เข้าถึงโมดูล Workbox ทั้งหมด

workbox.precaching.*
workbox.routing.*
etc

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

เมื่ออ้างอิงโมดูลเป็นครั้งแรก workbox-sw จะตรวจหาโมดูลนี้ และโหลดโมดูลก่อนเผยแพร่ คุณจะเห็นสิ่งนี้เกิดขึ้นใน แท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บ

เบราว์เซอร์จะจัดเก็บไฟล์เหล่านี้ไว้ในแคชเพื่อให้พร้อมใช้งานในอนาคต การใช้งานแบบออฟไลน์

การใช้ไฟล์ Workbox ในเครื่องแทน CDN

หากไม่ต้องการใช้ CDN คุณก็เปลี่ยนไปใช้ไฟล์ Workbox ได้ง่ายๆ ที่โฮสต์บนโดเมนของคุณเอง

วิธีการที่ง่ายที่สุดคือการรับไฟล์ผ่านคำสั่ง copyLibraries ของ workbox-cli แล้วบอก workbox-sw ตำแหน่งของไฟล์เหล่านี้ผ่านทางตัวเลือกการกำหนดค่า modulePathPrefix

หากคุณวางไฟล์ไว้ใต้ /third_party/workbox-vX.Y.Z/ คุณควรใช้งานในลักษณะดังต่อไปนี้

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});

หลีกเลี่ยงการนำเข้าแบบไม่พร้อมกัน

เบื้องหลัง การโหลดโมดูลใหม่เป็นครั้งแรกจะต้องมีการเรียกใช้ importScripts() พร้อมเส้นทางไปยังไฟล์ JavaScript ที่เกี่ยวข้อง (โฮสต์บน CDN หรือผ่าน URL ในเครื่อง) ไม่ว่ากรณีใดจะมีข้อจำกัดที่สำคัญ: การเรียกไปยัง importScripts() โดยนัยจะทำได้เพียง เกิดขึ้นภายในเครื่องจัดการ install ของ Service Worker หรือในระหว่างการซิงโครนัส การดำเนินการเริ่มต้นของสคริปต์ Service Worker

เพื่อหลีกเลี่ยงการละเมิดข้อจำกัดนี้ แนวทางปฏิบัติที่ดีที่สุดก็คือการอ้างอิง เนมสเปซ workbox.* รายการที่อยู่นอกตัวแฮนเดิลเหตุการณ์หรือฟังก์ชันแบบไม่พร้อมกัน

ตัวอย่างเช่น รหัสโปรแกรมทำงานของบริการระดับบนสุดต่อไปนี้สามารถใช้ได้

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will work!
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst()
);

แต่โค้ดด้านล่างอาจมีปัญหาถ้าคุณไม่ได้อ้างอิง workbox.strategies ไว้ที่อื่นใน Service Worker:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
    // outside of the initial, synchronous service worker execution.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

หากคุณจำเป็นต้องเขียนโค้ดที่อาจเป็นการละเมิดข้อจำกัดนี้ คุณสามารถ ทริกเกอร์การเรียก importScripts() นอกเครื่องจัดการเหตุการณ์โดยใช้เมธอด เมธอด workbox.loadModule():

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Referencing workbox.strategies will now work as expected.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

หรือจะสร้างการอ้างอิงไปยังเนมสเปซที่เกี่ยวข้องนอกเครื่องจัดการเหตุการณ์ก็ได้ จากนั้นใช้การอ้างอิงนั้นในภายหลัง:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Using the previously-initialized strategies will work as expected.
    const cacheFirst = new strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

บังคับให้ใช้การแก้ไขข้อบกพร่องหรือบิลด์เวอร์ชันที่ใช้งานจริง

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

โดยค่าเริ่มต้น workbox-sw จะใช้บิลด์การแก้ไขข้อบกพร่องสำหรับเว็บไซต์ใน localhost แต่สำหรับต้นทางอื่นๆ โมเดลจะใช้เวอร์ชันที่ใช้งานจริง

หากต้องการบังคับให้แก้ไขข้อบกพร่องหรือบิลด์เวอร์ชันที่ใช้งานจริง ให้ตั้งค่าการกำหนดค่า debug ตัวเลือก:

workbox.setConfig({
  debug: true,
});

แปลงโค้ดโดยใช้คำสั่งการนำเข้าเพื่อใช้ workbox-sw

เมื่อโหลด Workbox โดยใช้ workbox-sw แพ็กเกจ Workbox ทั้งหมดจะเข้าถึงได้ผ่าน เนมสเปซ workbox.* ทั่วโลก

หากคุณมีตัวอย่างโค้ดที่ใช้คำสั่ง import ที่ต้องการแปลง หากต้องการใช้ workbox-sw คุณเพียงแค่โหลด workbox-sw และแทนที่คำสั่ง import ทั้งหมดด้วยตัวแปรภายในที่อ้างอิง โมดูลดังกล่าวในเนมสเปซสากล

วิธีนี้ได้ผลเนื่องจากแพ็กเกจ Service Worker ของ Workbox ทั้งหมดที่เผยแพร่ไปยัง NPM ก็เช่นเดียวกัน ใช้ได้ในเนมสเปซ workbox ทั่วโลกผ่าน ชื่อเวอร์ชัน camelCase (เช่น คุณสามารถดูโมดูลทั้งหมดที่ส่งออกจากแพ็กเกจ workbox-precaching npm ได้ที่ workbox.precaching.* และโมดูลทั้งหมดที่ส่งออกจาก ดูแพ็กเกจ workbox-background-sync npm ได้ที่ workbox.backgroundSync.*)

ลองดูตัวอย่างโค้ดที่ใช้คำสั่ง import ที่อ้างอิง โมดูลกล่องงาน:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);

และก็ได้โค้ดเดียวกันนี้เขียนใหม่เพื่อใช้ workbox-sw (โปรดสังเกตว่ามีเพียง คำสั่งนำเข้ามีการเปลี่ยนแปลง เนื่องจากไม่มีการแก้ไขตรรกะ):

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);