การดูแล Service Worker และตรรกะพื้นที่เก็บข้อมูลแคชอาจเป็นเรื่องที่ท้าทายเนื่องจาก PWA เติบโตขึ้น Workbox คือชุดไลบรารีแบบโอเพนซอร์สที่จะช่วยดำเนินการในเรื่องนี้ Workbox จะสรุป API ระดับล่าง เช่น Service Worker API และ Cache Storage API และเผยให้เห็นอินเทอร์เฟซที่เหมาะกับนักพัฒนาซอฟต์แวร์มากขึ้น
งานบางอย่างที่อาจช่วยได้คือการจับคู่กลยุทธ์การแคชกับเส้นทาง (หรือรูปแบบการกำหนดเส้นทาง) การทำงานกับสตรีม และการใช้ฟีเจอร์ต่างๆ เช่น การซิงค์ในเบื้องหลังกับวิดีโอสำรองที่เหมาะสม
Workbox ช่วยคุณจัดการความต้องการในการแคชเนื้อหาและการแสดงโฆษณา นอกจากนี้ยังเป็นไลบรารีที่โปรแกรมทำงานของบริการใช้มากที่สุด โดยมีเว็บไซต์ในอุปกรณ์เคลื่อนที่ 54% ที่นำไปใช้ในเครื่องมือสร้างและ CLI จำนวนมาก เช่น Angular CLI, Create-React-App และ Vue CLI และยังมีปลั๊กอินสำหรับไลบรารีและเฟรมเวิร์กอื่นๆ ส่วนใหญ่ด้วย เช่น Next.js
54%
เว็บไซต์บนอุปกรณ์เคลื่อนที่ที่มีโปรแกรมทำงานของบริการจะใช้ไลบรารี Workbox
โมดูล Workbox
Workbox มีไลบรารีหลายรายการ ซึ่งเรียกว่าโมดูลที่ใช้ภายในองค์กร ซึ่งแต่ละโมดูลจะมุ่งเน้นการจัดการเนื้อหาและพฤติกรรมการทำงานของ Service Worker ในแง่มุมที่แตกต่างกัน
โมดูล Workbox ทำงานในบริบทที่แตกต่างกัน เช่น
- ในบริบทของ Service Worker: คุณนำเข้าโมดูลที่ต้องการและใช้จากไฟล์ Service Worker เช่น เพื่อช่วยจัดการการแคชและแสดงไฟล์ด้วยกลยุทธ์ต่างๆ
- ในบริบทหลักของ
window
: ช่วยลงทะเบียน Service Worker และสื่อสารกับโปรแกรมทำงานนั้น - เป็นส่วนหนึ่งของระบบบิลด์ เช่น Webpack เพื่อวัตถุประสงค์ต่างๆ เช่น การสร้างไฟล์ Manifest ของเนื้อหา หรือแม้กระทั่งการสร้าง Service Worker ทั้งหมด
โมดูลที่ได้รับความนิยมมีดังนี้
- การเปลี่ยนเส้นทาง Workbox: เมื่อโปรแกรมทำงานของบริการสกัดกั้นคำขอโมดูลนี้กำหนดเส้นทางคำขอเหล่านั้นไปยังฟังก์ชันต่างๆ ที่มีการตอบกลับ ซึ่งเป็นการใช้งานเครื่องจัดการเหตุการณ์
fetch
ตามที่ระบุไว้ในส่วนการแสดงผล - workbox-strategies: ชุดกลยุทธ์การแคชรันไทม์ที่ใช้จัดการกับคำขอ เช่น แคชก่อนและไม่มีอัปเดตขณะตรวจสอบใหม่ โดยเป็นการนำกลยุทธ์ต่างๆ ที่ระบุไว้ในส่วนเนื้อหามาใช้
- workbox-precaching: เป็นการใช้งานการแคชไฟล์ในตัวแฮนเดิลเหตุการณ์
install
ของ Service Worker (หรือที่เรียกว่าการแคชล่วงหน้า) ดังที่กล่าวไว้ในส่วนการแคช โมดูลนี้ช่วยให้คุณแคชชุดไฟล์ล่วงหน้าและจัดการการอัปเดตเนื้อหาเหล่านั้นได้อย่างมีประสิทธิภาพ เราจะอธิบายเกี่ยวกับการอัปเดตเนื้อหาในส่วนการอัปเดต - workbox-expiration: เป็นปลั๊กอินที่ใช้กับกลยุทธ์การแคชเพื่อนำคำขอที่แคชไว้ออกตามจำนวนรายการในแคชหรือขึ้นอยู่กับอายุของคำขอที่แคชไว้ ซึ่งจะช่วยจัดการแคชของคุณและกำหนดขีดจำกัดเวลาและจำนวนรายการในแคชแต่ละรายการ
- workbox-window: ชุดโมดูลที่ตั้งใจให้ทำงานในบริบทหน้าต่าง กล่าวคือภายในหน้าเว็บ PWA คุณสามารถลดความซับซ้อนของการลงทะเบียนและอัปเดตโปรแกรมทำงานของบริการ และช่วยให้การสื่อสารระหว่างโค้ดที่ทำงานในบริบทของ Service Worker และบริบทของหน้าต่างได้ง่ายขึ้น
การใช้ Workbox
Workbox มีวิธีต่างๆ ในการผสานรวมกับ PWA คุณเลือกได้ว่าเครื่องมือใดเหมาะกับสถาปัตยกรรมของแอปที่สุด ดังนี้
- Workbox CLI: ยูทิลิตีบรรทัดคำสั่งที่สร้าง Service Worker ที่สมบูรณ์ แทรกไฟล์ Manifest สำหรับแคชล่วงหน้า หรือคัดลอกไฟล์ Workbox ที่จำเป็น
- Workbox Build: โมดูล npm ที่สร้าง Service Worker ที่สมบูรณ์ แทรกไฟล์ Manifest สำหรับแคชล่วงหน้า และคัดลอกไฟล์ Workbox ซึ่งจะผสานรวมกับกระบวนการบิลด์ของคุณเอง
- workbox-sw: วิธีโหลดแพ็กเกจ Workbox สำหรับ Workbox จาก CDN ที่ไม่ได้ใช้กระบวนการบิลด์
Workbox CLI มีวิซาร์ดที่จะช่วยคุณทำขั้นตอนต่างๆ ในการสร้าง Service Worker หากต้องการเรียกใช้วิซาร์ด ให้พิมพ์ข้อมูลต่อไปนี้ในบรรทัดคำสั่ง
npx workbox-cli wizard
การแคชและการแสดงผลด้วย Workbox
การใช้งานโดยทั่วไปของ Workbox คือการใช้โมดูลการกำหนดเส้นทางและกลยุทธ์ร่วมกันเพื่อแคชและแสดงไฟล์
โมดูล workbox-strategies จะระบุกลยุทธ์การแคชซึ่งกล่าวถึงในบทเนื้อหาและข้อมูลและการแสดงผลทันที
โมดูลการกำหนดเส้นทางเวิร์กโฟลว์จะช่วยจัดเรียงคำขอขาเข้าไปยัง Service Worker และจับคู่กับกลยุทธ์หรือฟังก์ชันการแคชเพื่อรับการตอบกลับสำหรับคำขอเหล่านั้น
หลังจากจับคู่เส้นทางกับกลยุทธ์แล้ว Workbox ยังมอบความสามารถในการกรองการตอบกลับที่จะเพิ่มลงในแคชด้วยปลั๊กอิน workbox-cacheable-response คุณสามารถใช้ปลั๊กอินนี้ เช่น แคชเฉพาะการตอบกลับที่ส่งกลับโดยไม่มีข้อผิดพลาด
ตัวอย่างโค้ดต่อไปนี้ใช้กลยุทธ์ที่ใช้แคชเป็นอันดับแรก (ผ่านโมดูล CacheFirst
) เพื่อแคชและแสดงการนำทางหน้าเว็บ
import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
const pageStrategy = new CacheFirst({
// Put all cached files in a cache named 'pages'
cacheName: 'pages',
plugins: [
// Only requests that return with a 200 status are cached
new CacheableResponsePlugin({
statuses: [200],
}),
],
});
ปลั๊กอินช่วยให้คุณสามารถใช้ประโยชน์จากวงจรการแคชและคำขอการแก้ปัญหาของ Workbox ในที่นี้ CacheableResponsePlugin
จะใช้แคชเฉพาะคำขอที่ส่งผลให้มีสถานะ 200 เท่านั้น ซึ่งป้องกันไม่ให้บันทึกคำขอที่ไม่ถูกต้องลงในแคช
หลังจากสร้างกลยุทธ์ขึ้นแล้ว ได้เวลาลงทะเบียนเส้นทางเพื่อใช้งาน ตัวอย่างต่อไปนี้เรียก registerRoute()
ซึ่งส่งผ่านออบเจ็กต์คำขอไปยังโค้ดเรียกกลับ หาก request.mode
คือ "navigate"
ก็จะใช้กลยุทธ์ CacheFirst
(ในที่นี้เรียกว่า pageStrategy
) ที่กำหนดไว้ในตัวอย่างโค้ดก่อนหน้านี้
// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
pageStrategy );
อ่านเอกสารเกี่ยวกับกล่องจดหมายเพื่อดูตัวอย่างเพิ่มเติมและแนวทางปฏิบัติแนะนำ
วิดีโอสำรองแบบออฟไลน์
นอกจากนี้ โมดูลการกำหนดเส้นทางของกล่องงานยังมี setCatchHandler()
ที่ส่งออกที่จะระบุการจัดการในกรณีที่เส้นทางมีข้อผิดพลาด คุณใช้วิธีนี้เพื่อตั้งค่าเส้นทางสำรองแบบออฟไลน์เพื่อแจ้งให้ผู้ใช้ทราบว่าเส้นทางที่ต้องการยังไม่พร้อมใช้งานในขณะนี้
การใช้ Workbox และ Cache Storage API ร่วมกันในที่นี้จะมีข้อมูลสำรองออฟไลน์โดยใช้กลยุทธ์เฉพาะแคช
ก่อนอื่น ในระหว่างวงจรการติดตั้งของ Service Worker ระบบจะเปิดแคช offline-fallbacks
และเพิ่มอาร์เรย์ของโฆษณาสำรองแบบออฟไลน์ลงในแคช
import { setCatchHandler } from 'workbox-routing';
// Warm the cache when the service worker installs
self.addEventListener('install', event => {
const files = ['/offline.html']; // you can add more resources here
event.waitUntil(
self.caches.open('offline-fallbacks')
.then(cache => cache.addAll(files))
);
});
จากนั้นใน setCatchHandler()
ระบบจะกำหนดปลายทางของคำขอที่แสดงข้อผิดพลาด และเปิดแคช offline-fallbacks
หากปลายทางเป็นเอกสาร เนื้อหาของวิดีโอสำรองแบบออฟไลน์จะถูกส่งคืนไปยังผู้ใช้ หากไม่มีหรือปลายทางไม่ใช่เอกสาร (เช่น รูปภาพหรือสไตล์ชีต) ระบบจะแสดงการตอบกลับข้อผิดพลาด คุณสามารถขยายรูปแบบนี้ไม่เพียงสำหรับเอกสาร แต่สำหรับรูปภาพ วิดีโอ แบบอักษร หรืออะไรก็ตามที่คุณต้องการกำหนดให้เป็นข้อมูลสำรองแบบออฟไลน์
// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
const destination = options.request.destination;
const cache = await self.caches.open('offline-fallbacks');
if (destination === 'document') {
return (await cache.match('/offline.html')) || Response.error();
}
return Response.error();
});
สูตรอาหาร
รูปแบบการกำหนดเส้นทางและการแคชหลายรูปแบบ เช่น การไปยังส่วนต่างๆ ของ NetworkFirst
และการใช้ทางเลือกสำรองแบบออฟไลน์ ก็เป็นเรื่องปกติที่จะมีการรวมไว้ในสูตรอาหารที่นำกลับมาใช้ใหม่ได้ เลือกสูตรแบบกล่องงานเพราะจะช่วยได้ถ้าสูตรนั้นให้โซลูชันที่เหมาะกับสถาปัตยกรรมของคุณ ซึ่งปกติแล้วจะปรากฏเป็นโค้ดหนึ่งบรรทัดที่คุณต้องเพิ่มลงในโค้ดของ Service Worker
การแคชและการอัปเดตเนื้อหา
การแคชเนื้อหายังรวมถึงการอัปเดตเนื้อหาด้วย Workbox ช่วยอัปเดตชิ้นงานด้วยวิธีใดก็ตามที่คุณเลือกภาพที่ดีที่สุด ระบบอาจอัปเดตให้อัปเดตอยู่เสมอหากมีการเปลี่ยนแปลงบนเซิร์ฟเวอร์ หรือรอจนกว่าคุณมีแอปเวอร์ชันใหม่ ดูข้อมูลเพิ่มเติมเกี่ยวกับการอัปเดตในส่วนการอัปเดต
Play กับ Workbox
คุณสามารถเล่นกับ Workbox ได้ทันทีโดยใช้ห้องทดลองโค้ดต่อไปนี้