Progressive Web App: การทำงานกับ Workbox

1. ยินดีต้อนรับ

ใน Lab นี้ คุณจะได้นำเว็บไซต์ที่มี Service Worker อยู่แล้วมาแปลงให้ใช้ Workbox นี่คือบทที่ 2 ในชุด Codelab ที่เป็นคู่มือสำหรับเวิร์กชอป Progressive Web App Codelab ก่อนหน้านี้คือ Going Offline ยังมี Codelab อีก 6 รายการในชุดนี้

สิ่งที่คุณจะได้เรียนรู้

  • แปลง Service Worker ที่มีอยู่ให้ใช้ Workbox
  • เพิ่มการสำรองข้อมูลออฟไลน์ลงใน PWA

สิ่งที่ควรทราบ

  • HTML และ JavaScript พื้นฐาน

สิ่งที่คุณจะต้องมี

2. เตรียมตัว

เริ่มต้นด้วยการโคลนหรือดาวน์โหลดโค้ดเริ่มต้นที่จำเป็นต่อการทำ Codelab นี้ให้เสร็จสมบูรณ์

หากโคลนที่เก็บ โปรดตรวจสอบว่าคุณอยู่ในสาขา pwa03--workbox ไฟล์ ZIP มีโค้ดสำหรับสาขานั้นด้วย

โค้ดเบสนี้ต้องใช้ Node.js 14 ขึ้นไป เมื่อมีโค้ดแล้ว ให้เรียกใช้ npm ci จากบรรทัดคำสั่งในโฟลเดอร์ของโค้ดเพื่อติดตั้งการอ้างอิงทั้งหมดที่คุณต้องใช้ จากนั้นเรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์สำหรับพัฒนาสำหรับโค้ดแล็บ

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

ไฟล์สำคัญ

  • service-worker.js - ไฟล์ Service Worker ของแอปพลิเคชัน
  • offline.html - HTML แบบออฟไลน์ที่จะใช้เมื่อหน้าเว็บไม่พร้อมใช้งาน

3. ย้ายข้อมูลไปยัง Workbox

เมื่อดูที่ Service Worker ที่มีอยู่ การแคชล่วงหน้าจะแบ่งออกเป็น 2 ขั้นตอน ดังนี้

  • แคชไฟล์ที่เกี่ยวข้องระหว่างการติดตั้ง Service Worker
  • แสดงไฟล์เหล่านั้นอีกครั้งด้วยกลยุทธ์ "แคชเท่านั้น"

ทั้งไฟล์ index.html และเส้นทาง / ยังคงสมเหตุสมผลที่จะแคชล่วงหน้า เนื่องจาก HTML ของเว็บแอปนี้จะไม่เปลี่ยนแปลงมากนัก แต่ไฟล์อื่นๆ เช่น CSS และ JavaScript อาจเปลี่ยนแปลง และเราไม่ต้องการที่จะต้องผ่านวงจรทั้งหมดของ Service Worker ทุกครั้งที่มีการเปลี่ยนแปลง นอกจากนี้ Service Worker ปัจจุบันยังพิจารณาเฉพาะส่วนย่อยของ CSS และ JavaScript เราต้องการให้ครอบคลุมทั้งหมด การแคชรายการเหล่านี้ด้วยกลยุทธ์ "ล้าสมัยขณะตรวจสอบซ้ำ" จะสมเหตุสมผลกว่า เนื่องจากเป็นการตอบกลับอย่างรวดเร็วที่อัปเดตได้ในเบื้องหลังตามต้องการ

การแคชล่วงหน้าอีกครั้ง

เมื่อย้ายข้อมูลไปยัง Workbox เราไม่จำเป็นต้องเก็บโค้ดที่มีอยู่ ดังนั้นให้ลบทุกอย่างใน service-worker.js ใน Lab ก่อนหน้า เราได้ตั้งค่า Service Worker นี้ให้คอมไพล์ เพื่อให้เราใช้การนำเข้า ESModule ที่นี่เพื่อนำ Workbox จากโมดูล NPM มาใช้ได้ มาเริ่มด้วยการทบทวนการแคชล่วงหน้ากัน ใน service-worker.js ให้เพิ่มโค้ดต่อไปนี้

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

คำอธิบาย

หากต้องการตั้งค่าการแคชล่วงหน้าสำหรับ /index.html และ / คุณจะต้องดึงข้อมูลจาก 5 โมดูล แม้ว่าโค้ดนี้อาจดูเหมือนมีจำนวนมาก แต่ก็มีประสิทธิภาพมากกว่าโค้ดที่เขียนก่อนหน้านี้มาก

โดยเริ่มจากการตั้งค่ากลยุทธ์การแคชแบบ Cache First ใหม่ ซึ่งเลือกแทนกลยุทธ์ Cache Only เพื่อให้เพิ่มหน้าอื่นๆ ลงในแคชได้ตามต้องการ โดยมีชื่อว่า page-cache กลยุทธ์ Workbox สามารถใช้ปลั๊กอินจำนวนมากที่อาจส่งผลต่อวงจรการบันทึกและการดึงเนื้อหาจากแคช ในที่นี้ เราใช้ปลั๊กอิน 2 ตัว ได้แก่ ปลั๊กอินการตอบกลับที่แคชได้และปลั๊กอินการหมดอายุ เพื่อให้มั่นใจว่าระบบจะแคชเฉพาะการตอบกลับของเซิร์ฟเวอร์ที่ดี และล้างข้อมูลแต่ละรายการในแคชหลังจากผ่านไป 30 วัน

จากนั้นแคชของกลยุทธ์จะได้รับการอุ่นด้วย /index.html และ / โดยใช้สูตร Workbox สำหรับแคชของกลยุทธ์ที่อุ่น ซึ่งจะเพิ่มรายการเหล่านั้นลงในแคชนี้ระหว่างเหตุการณ์การติดตั้งของ Service Worker

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

แคชชิ้นงาน

เมื่อจัดการการแคชล่วงหน้าของเส้นทางแล้ว ก็ถึงเวลาที่จะนำการแคชไปใช้กับชิ้นงานของเว็บไซต์อีกครั้ง ซึ่งก็คือ CSS และ JavaScript โดยให้เพิ่ม StaleWhileRevalidate ไปยังworkbox-strategiesการนำเข้าก่อน จากนั้นเพิ่มโค้ดต่อไปนี้ที่ด้านล่างของ Service Worker

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

คำอธิบาย

เส้นทางนี้เริ่มต้นด้วยการพิจารณาว่าประเภทคำขอเป็นสไตล์ สคริปต์ หรือ Worker ซึ่งสอดคล้องกับ CSS, JavaScript หรือ Web Worker หากเป็นเช่นนั้น ระบบจะใช้กลยุทธ์ "ล้าสมัยขณะตรวจสอบซ้ำ" โดยพยายามแสดงจากแคชก่อน หากไม่พร้อมใช้งานก็จะกลับไปใช้เครือข่าย และพยายามอัปเดตเวอร์ชันในแคชจากเครือข่ายหากเป็นไปได้ กลยุทธ์นี้จะแคชเฉพาะการตอบสนองที่ดีเช่นเดียวกับกลยุทธ์หน้าเว็บ

4. เพิ่มรายการสำรองออฟไลน์

เมื่อย้ายข้อมูล Service Worker เดิมไปยัง Workbox แล้ว ก็ยังมีอีกสิ่งหนึ่งที่ต้องทำเพื่อป้องกันไม่ให้ PWA ขัดข้องเมื่อออฟไลน์ นั่นคือการเพิ่มการสำรองข้อมูลแบบออฟไลน์

คุณตั้งค่าสำรองออฟไลน์สำหรับทุกอย่างที่อาจไม่พร้อมใช้งานเมื่อออฟไลน์ได้ เช่น หน้าเว็บ, แบบอักษร, CSS, JavaScript, รูปภาพ ฯลฯ คุณควรกำหนดการสำรองหน้าเว็บสำหรับ PWA ทั้งหมดอย่างน้อยที่สุด เพื่อให้ผู้ใช้ยังคงอยู่ในบริบทของแอปหากไปยังหน้าเว็บที่ไม่ได้อยู่ในแคช

สูตร Workbox มีสูตรการสำรองข้อมูลออฟไลน์ที่ใช้เพื่อทำสิ่งนี้ได้ หากต้องการใช้ ให้เพิ่ม offlineFallback ลงใน workbox-recipes ก่อน จากนั้นเพิ่มโค้ดต่อไปนี้ที่ด้านล่างของ Service Worker

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

คำอธิบาย

สูตรโฆษณาสำรองแบบออฟไลน์จะตั้งค่ากลยุทธ์แคชเท่านั้นซึ่งจะได้รับการวอร์มด้วยโฆษณาสำรองที่ระบุ จากนั้นจะตั้งค่าตัวแฮนเดิลการจับค่าเริ่มต้นของ Workbox เพื่อจับคำขอการกำหนดเส้นทางที่ไม่สำเร็จ (หากไม่มีอะไรในแคชและเข้าถึงบางอย่างในเครือข่ายไม่ได้) โดยดึงเนื้อหาของไฟล์ที่เกี่ยวข้องจากแคชและแสดงเป็นเนื้อหาตราบใดที่คำขอไม่สำเร็จ

5. ยินดีด้วย

คุณได้เรียนรู้วิธีใช้ Workbox เพื่อตั้งค่ากลยุทธ์การแคชสำหรับเส้นทางและระบุการสำรองข้อมูลแบบออฟไลน์สำหรับ PWA แล้ว

Codelab ถัดไปในซีรีส์นี้คือ IndexedDB