Workbox: ชุดเครื่องมือ Service Worker ระดับสูง

Jeff Posnick

API 2 รายการมีบทบาทสำคัญในการสร้างเว็บแอปที่เชื่อถือได้ ดังนี้ ผู้ปฏิบัติงานบริการ และพื้นที่เก็บข้อมูลแคช แต่ การใช้แอปเหล่านั้นอย่างมีประสิทธิภาพ โดยไม่ทำให้เกิดข้อบกพร่องเล็กๆ น้อยๆ หรือทำให้กลายเป็นช่องโหว่ อาจเป็นเรื่องท้าทาย ตัวอย่างเช่น ข้อผิดพลาดในรหัสโปรแกรมทำงานของบริการอาจ ทำให้เกิดปัญหาในการแคช ผู้ใช้อาจเห็นเนื้อหาที่ล้าสมัยหรือเสียหาย ลิงก์

กล่องทำงาน คือข้อมูลระดับสูง ชุดเครื่องมือ Service Worker ที่สร้างขึ้นจาก Service Worker และพื้นที่เก็บข้อมูลแคช API โดยมีชุดไลบรารีที่พร้อมใช้งานจริงเพื่อเพิ่มการสนับสนุนแบบออฟไลน์ เว็บแอป ชุดเครื่องมือมีโครงสร้างเป็น 2 คอลเล็กชัน ได้แก่ เครื่องมือที่ช่วยจัดการ ที่ทำงานภายใน Service Worker ของคุณ และเครื่องมือที่จะทำงานร่วมกับ สร้างกระบวนการสร้าง

รหัสรันไทม์

นี่คือโค้ดที่ทำงานภายในสคริปต์ Service Worker ของคุณและควบคุมวิธีการ กฎนี้จะสกัดกั้นคำขอขาออกและโต้ตอบกับ Cache Storage API กล่องงานมี โมดูลไลบรารีทั้งหมดรวมกันประมาณ 10 รายการ ซึ่งแต่ละแบบรองรับ Use Case เฉพาะทางที่หลากหลาย โมดูลที่สำคัญที่สุด กำหนดว่าโปรแกรมทำงานของบริการจะตอบสนองหรือไม่ (หรือที่เรียกว่า การกำหนดเส้นทาง) และวิธีการที่โมเดลจะตอบสนอง (หรือที่เรียกว่า กลยุทธ์การแคช)

สร้างการผสานรวม

ข้อเสนอ Workbox บรรทัดคำสั่ง โมดูล Node.js และ ปลั๊กอิน Webpack เครื่องมือที่มอบทางเลือกในการบรรลุ 2 สิ่งต่อไปนี้

  • สร้างสคริปต์ Service Worker ตามชุดการกำหนดค่า ตัวเลือก Service Worker ที่สร้างขึ้นจะใช้ไลบรารีรันไทม์ของ Workbox "ขั้นสูง" เพื่อนำกลยุทธ์การแคชที่คุณกำหนดค่าไปใช้
  • สร้างรายการ URL ที่ควรระบุ "precached" ตามรูปแบบที่กำหนดค่าได้เพื่อรวมและยกเว้นไฟล์ที่สร้างขึ้น ระหว่างขั้นตอนการสร้าง

ทำไมจึงควรใช้ Workbox

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

การจัดการแคช

กล่องงานจะจัดการการอัปเดตแคชให้คุณ ซึ่งจะเชื่อมโยงกับกระบวนการสร้างของคุณเมื่อ โดยใช้การแคชล่วงหน้าหรือผ่านนโยบายขนาด/อายุที่กำหนดค่าได้เมื่อใช้รันไทม์ การแคช API พื้นที่เก็บข้อมูลแคชที่สำคัญมีประสิทธิภาพ แต่ไม่มี การสนับสนุนในตัวสำหรับการหมดอายุของแคช เครื่องมืออย่างกล่องงานจะเข้ามาเติมเต็มช่องว่างนั้น

การบันทึกและการรายงานข้อผิดพลาดอย่างครอบคลุม

เมื่อเริ่มต้นใช้งานโปรแกรมทำงานของบริการ (Service Worker) กำลังสงสัยว่ามีสาเหตุอะไร มีการแคช (หรือน่าหงุดหงิดพอๆ กันว่าทำไมไม่ได้แคชไว้) จึงเป็นเรื่องที่ท้าทาย กล่องงานจะตรวจจับโดยอัตโนมัติเมื่อคุณใช้เวอร์ชันพัฒนา เว็บไซต์ใน localhost และเปิดการบันทึกการแก้ไขข้อบกพร่องใน JavaScript ของเบราว์เซอร์ คอนโซลผู้ดูแลระบบ

การบันทึกพื้นที่ทำงานไปยังคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ

เมื่อติดตามไปพร้อมกับข้อความในบันทึก คุณจะสามารถไปที่ระดับรูทของ การกำหนดค่าหรือการทำให้เป็นโมฆะได้อย่างรวดเร็วกว่า ได้คนเดียว

ฐานของโค้ดข้ามเบราว์เซอร์ที่ผ่านการทดสอบแล้ว

เวิร์กบ็อกซ์จะได้รับการพัฒนาโดยเทียบกับชุดทดสอบข้ามเบราว์เซอร์ และหากเป็นไปได้ กลับไปใช้คุณลักษณะอื่นๆ ที่ หายไปจากบางเบราว์เซอร์

คุณควรใช้ 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

หากต้องการสร้างโปรแกรมทำงานของบริการ ให้เรียกใช้ 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',
  })
);