Progressive Web App: Service Worker มี

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

ในแล็บนี้ คุณจะได้ใช้เว็บแอปพลิเคชันที่มีอยู่แล้วและเพิ่มการตอบกลับเส้นทางการสตรีมเพื่อปรับปรุงประสิทธิภาพ นี่คือ Codelab ที่เป็นคู่มือชุดที่ 7 สำหรับเวิร์กชอป Progressive Web App Codelab ก่อนหน้านี้คือ Empowering your PWA ในชุดนี้ยังมี Codelab อีก 1 รายการ

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

  • เพิ่มการตอบกลับแบบสตรีมมิงไปยัง Service Worker

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

  • JavaScript

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

2. เตรียมตัว

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

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

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

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

ไฟล์สำคัญ

  • js/preview.js - ดูตัวอย่างไฟล์ JavaScript ของหน้าเว็บ
  • service-worker.js - ไฟล์ Service Worker ของ PWA

3. ตัวอย่างการสตรีม

หน้าตัวอย่างแบ่งออกเป็น 3 ส่วนที่ชัดเจน ได้แก่ ส่วนหัว ส่วนเนื้อหาที่คอมไพล์แล้ว และส่วนท้าย ปัจจุบันระบบแสดงเนื้อหาที่คอมไพล์แล้วทางฝั่งไคลเอ็นต์ แต่ไม่มีเหตุผลที่จะต้องทำเช่นนั้น มาเปลี่ยนไปใช้ Service Worker กัน

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

โดยให้ล้างเนื้อหาใน js/preview.js ก่อนเพื่อให้แน่ใจว่าระบบจะไม่คอมไพล์อีกต่อไป จากนั้นใน service-worker.js ให้ทำดังนี้

  • นำเข้าการส่งออกที่มีชื่อ strategy จาก workbox-streams เป็น streamsStrategy
  • นำเข้าการส่งออกที่มีชื่อ openDB จาก idb และนำเข้าการส่งออกที่มีชื่อ marked จาก marked
  • ก่อนการลงทะเบียนเส้นทางสำหรับการนำทาง ให้เพิ่มการลงทะเบียนเส้นทางใหม่
    • โดยควรตรวจสอบว่า pathname ของ URL คือ /preview
    • โดยควรใช้กลยุทธ์การสตรีมที่
      1. ตอบกลับด้วยเนื้อหาของ preview/index.html ผ่านเนื้อหาของแท็ก main
      2. ตอบกลับด้วยฟังก์ชันที่เปิด settings-store IndexedDB รับเนื้อหาจากที่เก็บออบเจ็กต์ settings และแสดงผลเวอร์ชัน Markdown ของเนื้อหานั้น
      3. ตอบกลับด้วยแท็กปิด main, body และ html

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

4. ยินดีด้วย

คุณได้เรียนรู้วิธีทำให้เว็บแอปทำงานแบบออฟไลน์ได้โดยใช้ Service Worker และ Cache Storage API

Codelab ถัดไปในชุดนี้คือการทำงานกับ Worker