เข้าถึงแคชจากหน้าต่าง

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

กรณีการใช้งานหนึ่งที่เป็นไปได้คือการนำเสนอคุณลักษณะ "บันทึกสำหรับออฟไลน์" สำหรับหน้าเว็บที่ผู้ใช้อาจต้องการอ่านในภายหลัง แต่ทราบว่าหน้าเว็บอาจออฟไลน์ในขณะนั้น การฝังกลิทช์ด้านล่างแสดงวิธีดำเนินการใน Workbox

ในการฝังด้านบน คุณจะเห็นว่าสคริปต์ app.js เขียนไปยังแคชออฟไลน์จากบริบท window เมื่อมีการคลิกปุ่ม "บันทึกสำหรับออฟไลน์" ในโปรแกรมทำงานของบริการ จะมีการแคชเนื้อหาแบบคงที่ของหน้าเว็บไว้ล่วงหน้าสำหรับการเข้าถึงแบบออฟไลน์ กลยุทธ์ NetworkOnly จะใช้กับเครื่องจัดการพิเศษที่จัดการการเข้าถึงแบบออฟไลน์สำหรับหน้าที่แคชไว้และส่งต่อไปยัง NavigationRoute

หากต้องการทดสอบฟังก์ชันการทำงานในการฝัง Glitch ให้ดำเนินการดังนี้

  1. เปิดหน้าต่างเบราว์เซอร์ใหม่แล้วไปยัง https://save-for-offline-test.glitch.me/
  2. คลิกปุ่มเพิ่มไปยังเรื่องรออ่านแบบออฟไลน์
  3. เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ใน Firefox หรือ Chrome หากใช้ Chrome ให้ไปที่แผงแอปพลิเคชัน ไปที่แผงพื้นที่เก็บข้อมูลใน Firefox
  4. ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ทั้งสองโปรแกรม คุณจะเห็นรายการ Cache Storage ในแผงด้านซ้าย คลิกเพื่อขยาย ในรายการ offline-cache คุณควรจะเห็น URL ของหน้าเว็บที่เพิ่งเพิ่มในหน้าต่างด้านขวา
  5. คลิกลิงก์อื่นๆ ของหน้าเว็บที่ด้านล่างของหน้า
  6. เปิด/ปิดโหมดออฟไลน์ในเบราว์เซอร์ใดก็ได้เพื่อจำลองการเชื่อมต่อแบบออฟไลน์
  7. คลิกที่ลิงก์ของหน้าที่คุณเพิ่มลงในแคชออฟไลน์ URL ควรจะปรากฏขึ้นแม้ว่าคุณจะออฟไลน์อยู่ก็ตาม
  8. คลิกลิงก์สำหรับหน้าเว็บที่คุณไม่ได้เพิ่มลงในแคชออฟไลน์ คำขอจะดำเนินการไม่สำเร็จ

นี่ไม่ใช่กรณีการใช้งานเดียวสำหรับการทำงานกับอินสแตนซ์ Cache ใน window ตัวอย่างเช่น คุณสามารถคาดการณ์ล่วงหน้าและแคชเนื้อหาที่คุณทราบว่าผู้ใช้ต้องดำเนินการบางอย่าง วิธีนี้จะลดหรือหลีกเลี่ยงเวลาในการตอบสนองของการดาวน์โหลดเนื้อหาเหล่านั้นตามคำขอ

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