API จำนวน 2 รายการมีบทบาทสำคัญในการสร้างเว็บแอปที่เชื่อถือได้ ได้แก่ Service Worker และพื้นที่เก็บข้อมูลแคช แต่การใช้สิ่งต่างๆ อย่างมีประสิทธิภาพโดยไม่นำข้อบกพร่องเล็กๆ น้อยๆ ไปใช้ประโยชน์เป็นเรื่องท้าทาย เช่น ข้อผิดพลาดในโค้ดโปรแกรมทำงานของบริการอาจทำให้เกิดปัญหาในการแคช และผู้ใช้อาจเห็นเนื้อหาที่ล้าสมัยหรือลิงก์เสีย
Workbox คือชุดเครื่องมือ Service Worker ระดับสูงที่สร้างต่อยอด Service Worker และ API สำหรับ Cache Storage โดยมีชุดไลบรารีที่พร้อมสำหรับการใช้งานจริงสำหรับการเพิ่มการรองรับแบบออฟไลน์ลงในเว็บแอป ชุดเครื่องมือมีโครงสร้างเป็น 2 คอลเล็กชัน ได้แก่ เครื่องมือที่จะช่วยจัดการโค้ดที่ทำงานภายใน Service Worker และเครื่องมือที่ผสานรวมกับกระบวนการสร้างของคุณ
รหัสรันไทม์
ซึ่งเป็นโค้ดที่ทำงานภายในสคริปต์ Service Worker และควบคุมวิธีที่สคริปต์สกัดกั้นคำขอขาออกและโต้ตอบกับ Cache Storage API Workbox มีโมดูลไลบรารีทั้งหมดประมาณ 10 รายการ ซึ่งแต่ละโมดูลจะรองรับกรณีการใช้งานเฉพาะที่หลากหลาย โมดูลที่สำคัญที่สุดจะกำหนดว่า Service Worker จะตอบสนองหรือไม่ (หรือที่เรียกว่าการกำหนดเส้นทาง) และวิธีตอบสนอง (หรือที่เรียกว่ากลยุทธ์การแคช)
สร้างการผสานรวม
Workbox มีเครื่องมือ บรรทัดคำสั่ง, โมดูล Node.js และปลั๊กอิน Webpack นำเสนอ 2 วิธีที่ช่วยให้คุณทำ 2 อย่างได้ ดังนี้
- สร้างสคริปต์ Service Worker ตามชุดตัวเลือกการกำหนดค่า โปรแกรมทำงานของบริการที่สร้างขึ้นจะใช้ไลบรารีรันไทม์ของ Workbox "ขั้นสูง" เพื่อนำกลยุทธ์การแคชที่คุณกำหนดค่ามาใช้
- สร้างรายการ URL ที่ควรจะเป็น "precached" ตามรูปแบบที่กำหนดค่าได้ เพื่อรวมและยกเว้นไฟล์ที่สร้างขึ้นระหว่างกระบวนการบิลด์
เหตุใดจึงควรใช้ Workbox
คุณจะใช้ Workbox เมื่อสร้าง Service Worker หรือไม่ก็ได้ โดยจะมีคำแนะนำจำนวนหนึ่งที่แนะนำกลยุทธ์การแคชทั่วไปจากมุมมองของ Service Worker แบบ "วานิลลา" หากคุณเลือกใช้ 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 หากเป็นไปได้ และหากไม่ได้ใช้ จะกลับไปลองจัดคิวกิจกรรมอีกครั้งทุกครั้งที่โปรแกรมทำงานของบริการเริ่มต้นทำงาน
คุณควรใช้ 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 อยู่แล้วและต้องการลองใช้ไลบรารีรันไทม์ของ 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',
})
);