Workbox

การดูแล 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

CLI ของ Workbox กำลังทำงานในเทอร์มินัล

การแคชและการแสดงผลด้วย 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 ได้ทันทีโดยใช้ห้องทดลองโค้ดต่อไปนี้

แหล่งข้อมูล