API 2 รายการที่มีบทบาทสำคัญในการสร้างเว็บแอปที่เชื่อถือได้ ได้แก่ Service Worker และพื้นที่เก็บข้อมูลแคช แต่การใช้เครื่องมือเหล่านี้อย่างมีประสิทธิภาพโดยไม่ทำให้เกิดข้อบกพร่องเล็กๆ น้อยๆ หรือพบกับกรณีที่เกิดขึ้นไม่บ่อยนักอาจเป็นเรื่องที่ท้าทาย ตัวอย่างเช่น ข้อผิดพลาดในโค้ด Service Worker อาจทำให้เกิดปัญหาการแคช ผู้ใช้อาจเห็นเนื้อหาที่ล้าสมัยหรือลิงก์เสีย
Workbox เป็นชุดเครื่องมือ Service Worker ระดับสูงที่สร้างขึ้นบน Service Worker และ Cache Storage API โดยมีชุดไลบรารีที่พร้อมใช้งานจริงสำหรับการเพิ่มการรองรับการทำงานแบบออฟไลน์ลงในเว็บแอป ชุดเครื่องมือนี้แบ่งออกเป็น 2 คอลเล็กชัน ได้แก่ เครื่องมือที่ช่วยจัดการโค้ดที่ทำงานภายใน Service Worker และเครื่องมือที่ผสานรวมกับกระบวนการบิลด์
โค้ดรันไทม์
นี่คือโค้ดที่ทำงานภายในสคริปต์ Service Worker และควบคุมวิธีที่สคริปต์ดักจับคำขอขาออกและโต้ตอบกับ Cache Storage API Workbox มีโมดูลไลบรารีทั้งหมดประมาณ 12 โมดูล ซึ่งแต่ละโมดูลจะจัดการกรณีการใช้งานเฉพาะทางที่หลากหลาย โมดูลที่สำคัญที่สุดจะกำหนดว่า Service Worker จะตอบสนองหรือไม่ (เรียกว่าการกำหนดเส้นทาง) และจะตอบสนองอย่างไร (เรียกว่ากลยุทธ์การแคช)
สร้างการผสานรวม
Workbox มีเครื่องมือบรรทัดคำสั่ง, โมดูล Node.js และปลั๊กอิน webpack ซึ่งเป็นทางเลือกในการทำ 2 สิ่งต่อไปนี้
- สร้างสคริปต์ Service Worker โดยอิงตามชุดตัวเลือกการกำหนดค่า Service Worker ที่สร้างขึ้นจะใช้ไลบรารีรันไทม์ของ Workbox "เบื้องหลัง" เพื่อนำกลยุทธ์การแคชที่คุณกำหนดค่าไว้ไปใช้
- สร้างรายการ URL ที่ควร "แคชล่วงหน้า" โดยอิงตามรูปแบบที่กำหนดค่าได้เพื่อรวมและยกเว้นไฟล์ที่สร้างขึ้นระหว่างกระบวนการบิลด์
เหตุใดคุณจึงควรใช้ Workbox
การใช้ Workbox เมื่อสร้าง Service Worker เป็นตัวเลือกเสริม โดยมีคำแนะนำมากมายที่อธิบายกลยุทธ์การแคชทั่วไปจากมุมมองของ Service Worker แบบ "Vanilla" หากคุณตัดสินใจใช้ Workbox ประโยชน์บางส่วนมีดังนี้
การจัดการแคช
Workbox จะจัดการการอัปเดตแคชให้คุณ ไม่ว่าจะเชื่อมโยงกับกระบวนการบิลด์เมื่อใช้การแคชล่วงหน้า หรือผ่านนโยบายขนาด/อายุที่กำหนดค่าได้เมื่อใช้การแคชรันไทม์ Cache Storage API ที่สำคัญมีประสิทธิภาพสูง แต่ไม่มีการรองรับการหมดอายุของแคชในตัว เครื่องมืออย่าง Workbox จะช่วยเติมเต็มช่องว่างดังกล่าว
การบันทึกและการรายงานข้อผิดพลาดอย่างครอบคลุม
เมื่อเริ่มใช้ Service Worker การหาสาเหตุว่าทำไมจึงมีการแคชบางอย่าง (หรือที่น่าหงุดหงิดพอๆ กันคือทำไมจึงไม่มีการแคช) ถือเป็นเรื่องท้าทาย
Workbox จะตรวจหาโดยอัตโนมัติเมื่อคุณเรียกใช้เว็บไซต์เวอร์ชันพัฒนาใน localhost และเปิดการบันทึกแก้ไขข้อบกพร่องในคอนโซล JavaScript ของเบราว์เซอร์
การติดตามข้อความในบันทึกจะช่วยให้คุณทราบสาเหตุของปัญหาการกำหนดค่าหรือการทำให้เป็นโมฆะได้เร็วกว่าการดำเนินการด้วยตนเอง
ฐานของโค้ดที่ผ่านการทดสอบและใช้ได้กับหลายเบราว์เซอร์
Workbox ได้รับการพัฒนาขึ้นโดยใช้ชุดโปรแกรมทดสอบข้ามเบราว์เซอร์ และเมื่อเป็นไปได้ ระบบจะเปลี่ยนไปใช้การใช้งานฟีเจอร์อื่นๆ ที่ไม่มีในเบราว์เซอร์บางรุ่นโดยอัตโนมัติ
workbox-broadcast-cache-update moduleจะใช้ Broadcast Channel API เมื่อพร้อมใช้งาน และจะกลับไปใช้การติดตั้งใช้งานที่อิงตามpostMessage()ในเบราว์เซอร์ที่ไม่มีการรองรับ- โมดูล workbox-background-sync จะใช้ Background Sync API หากเป็นไปได้ และหากไม่ได้ ก็จะกลับไปลองส่งเหตุการณ์ที่อยู่ในคิวอีกครั้งทุกครั้งที่ Service Worker เริ่มทำงาน
คุณควรใช้ Workbox อย่างไร
การผสานรวมเฟรมเวิร์ก
หากคุณเริ่มโปรเจ็กต์ใหม่ตั้งแต่ต้น คุณสามารถใช้ประโยชน์จากการผสานรวม Workbox ที่พบในชุดเริ่มต้นและปลั๊กอินเสริมยอดนิยมหลายรายการได้ ดังนี้
เพิ่ม Workbox ลงในกระบวนการบิลด์ที่มีอยู่
หากคุณมีกระบวนการสร้างเว็บไซต์อยู่แล้ว การใช้เครื่องมือบรรทัดคำสั่ง, โมดูล Node.js หรือปลั๊กอิน webpack ที่เหมาะสมอาจเป็นสิ่งเดียวที่คุณต้องทำเพื่อเริ่มใช้ Workbox
โดยเฉพาะอย่างยิ่ง อินเทอร์เฟซบรรทัดคำสั่งของ Workbox ช่วยให้เริ่มต้นใช้งานได้ง่าย โดยมีโหมด wizard ที่จะตรวจสอบสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ในเครื่องและแนะนำการกำหนดค่าเริ่มต้นที่เหมาะสมซึ่งคุณสามารถใช้ต่อไปได้ ดังนี้
workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js
หากต้องการสร้าง Service Worker ให้เรียกใช้ workbox generateSW workbox-config.js เป็นส่วนหนึ่งของกระบวนการสร้าง ดูรายละเอียดได้ที่เอกสารประกอบgenerateSW
คุณปรับแต่ง Service Worker เพิ่มเติมได้โดยทำการเปลี่ยนแปลงใน workbox-config.js
ดูรายละเอียดได้ที่เอกสารประกอบของตัวเลือก
ใช้ Workbox ที่รันไทม์ใน Service Worker ที่มีอยู่
หากคุณมี Service Worker อยู่แล้วและต้องการลองใช้ไลบรารีรันไทม์ของ Workbox ให้นำเข้า Workbox จาก CDN อย่างเป็นทางการ แล้วเริ่มใช้สำหรับการแคชรันไทม์ได้ทันที กรณีการใช้งานนี้หมายความว่าคุณจะไม่สามารถใช้ประโยชน์จากการแคชล่วงหน้า (ซึ่งต้องมีการผสานรวมเวลาบิลด์) แต่เหมาะสำหรับการสร้างต้นแบบและลองใช้กลยุทธ์การแคชต่างๆ ได้ทันที
// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst({
cacheName: 'images-cache',
})
);