ฟีเจอร์หนึ่งของ Service Worker คือบันทึกไฟล์ไปยังแคชเมื่อ กำลังติดตั้งโปรแกรมทำงานของบริการ วิธีนี้เรียกว่า "การแคชล่วงหน้า" การแคชล่วงหน้าช่วยให้สามารถแสดงไฟล์ที่แคชไว้ไปยังเบราว์เซอร์ได้โดยไม่ต้อง กับเครือข่าย ใช้การแคชล่วงหน้าสำหรับเนื้อหาสำคัญที่เว็บไซต์ของคุณต้องการ เมื่อออฟไลน์: หน้าหลัก สไตล์ ภาพสำรอง และสคริปต์ที่สำคัญ
ทำไมจึงควรใช้ Workbox
คุณจะใช้ Workbox เพื่อการแคชล่วงหน้าหรือไม่ก็ได้ คุณสามารถเขียนโค้ดของคุณเองเพื่อ แคชเนื้อหาที่สำคัญล่วงหน้าขณะที่โปรแกรมทำงานของบริการกำลังติดตั้ง ประโยชน์หลักของการใช้ Workbox คือการควบคุมเวอร์ชันที่พร้อมใช้งานทันที คุณจะพบปัญหาในการอัปเดตเนื้อหาที่เก็บไว้ล่วงหน้าโดยใช้ Workbox เป็นอย่างมาก หากคุณต้องจัดการการกำหนดเวอร์ชันและการอัปเดตไฟล์เหล่านี้ด้วยตัวเอง
ไฟล์ Manifest ของแคชล่วงหน้า
การแคชล่วงหน้าขับเคลื่อนโดยรายการ URL และข้อมูลการกำหนดเวอร์ชันที่เกี่ยวข้องสำหรับ แต่ละ URL เมื่อพิจารณารวมกันแล้ว ข้อมูลนี้เรียกว่า ไฟล์ Manifest ในการแคชล่วงหน้า ไฟล์ Manifest เป็น "แหล่งข้อมูลที่ถูกต้อง" สำหรับสถานะของทุกอย่างที่ควรจะเป็น แคชล่วงหน้าสำหรับเว็บแอปเวอร์ชันหนึ่งๆ ไฟล์ Manifest ของแคชล่วงหน้าในไฟล์ รูปแบบที่กล่องงานใช้ มีลักษณะดังนี้
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
เมื่อติดตั้งโปรแกรมทำงานของบริการแล้ว ระบบจะสร้างรายการแคช 3 รายการใน
พื้นที่เก็บข้อมูลแคช สำหรับแต่ละ URL ในรายการทั้ง 3 รายการ เนื้อหาแรกมีการกำหนดเวอร์ชัน
ข้อมูลที่รวมอยู่ใน URL อยู่แล้ว (app คือชื่อไฟล์จริง และ
.abcd1234 มีข้อมูลการกำหนดเวอร์ชันอยู่ก่อนนามสกุลไฟล์
.js) เครื่องมือสร้างของ Workbox สามารถตรวจหารายการนี้และยกเว้นช่องการแก้ไข
เนื้อหาอีก 2 รายการจะไม่มีข้อมูลการกำหนดเวอร์ชันใน URL ดังนั้นช่องทำเครื่องหมาย
เครื่องมือบิลด์จะสร้างฟิลด์ revision แยกต่างหาก ซึ่งมีแฮชของในเครื่อง
ของเนื้อหาในไฟล์
การแสดงทรัพยากรที่แคชล่วงหน้า
การเพิ่มเนื้อหาลงในแคชเป็นเพียงส่วนหนึ่งของเรื่องราวก่อนการแคช
มีการแคชเนื้อหาไว้ และจำเป็นต้องตอบสนองต่อคำขอขาออก สิ่งที่ต้องมี
Listener เหตุการณ์ fetch ใน Service Worker ที่ตรวจสอบได้ว่า URL ใดมี
มีการแคชล่วงหน้า และแสดงผลการตอบกลับที่แคชไว้เหล่านั้นอย่างถูกต้อง โดยข้ามผ่าน
เครือข่ายในกระบวนการนี้ เนื่องจาก Service Worker ตรวจสอบแคชเพื่อดูการตอบกลับ
(และใช้สิ่งเหล่านี้ก่อนเครือข่าย) สิ่งนี้เรียกว่า
กลยุทธ์ที่ใช้แคชเป็นอันดับแรก
การอัปเดตที่มีประสิทธิภาพ
ไฟล์ Manifest ของแคชล่วงหน้าแสดงแคชที่คาดไว้ state; หากชุดค่าผสม URL/การแก้ไขในไฟล์ Manifest มีการเปลี่ยนแปลง โปรแกรมทำงานของบริการ ทราบว่ารายการที่แคชไว้ก่อนหน้านี้ใช้ไม่ได้แล้ว และ อัปเดตแล้ว ใช้เวลาเพียงคำขอเครือข่ายเดียวซึ่งสร้างขึ้นโดยอัตโนมัติโดย เบราว์เซอร์ซึ่งเป็นส่วนหนึ่งของโปรแกรมทำงานของบริการ ตรวจหาการอัปเดต เพื่อระบุว่าต้องรีเฟรช URL ที่แคชล่วงหน้ารายการใดบ้าง
การอัปเดตทรัพยากรที่แคชล่วงหน้า
เมื่อคุณเปิดตัวเว็บแอปเวอร์ชันใหม่เมื่อเวลาผ่านไป คุณต้อง URL ที่แคชล่วงหน้าไว้ก่อนหน้านี้เป็นปัจจุบัน แคชเนื้อหาใหม่ล่วงหน้า และลบที่ล้าสมัย รายการ ตราบใดที่คุณยังคงสร้างไฟล์ Manifest สำหรับแคชล่วงหน้าแบบเต็มในแต่ละครั้ง คุณสร้างเว็บไซต์ขึ้นใหม่ ไฟล์ Manifest นั้นจะทำหน้าที่เป็น "แหล่งข้อมูลที่เชื่อถือได้" สำหรับ สถานะการแคชล่วงหน้าได้ทุกเมื่อ
ถ้ามี URL เดิมอยู่ พร้อมกับช่องการแก้ไขใหม่ หรือมี URL ใด
มีการเพิ่มหรือลบออกจากไฟล์ Manifest นั่นเป็นสัญญาณบ่งบอกถึง Service Worker ของคุณว่า
จำเป็นต้องดำเนินการ
install
และ
activate
เครื่องจัดการเหตุการณ์ เช่น หากคุณทำการเปลี่ยนแปลงบางอย่างในเว็บไซต์และ
ไฟล์ Manifest สำหรับแคชล่วงหน้าล่าสุดของคุณอาจมีลักษณะดังต่อไปนี้
การเปลี่ยนแปลง:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
การเปลี่ยนแปลงแต่ละรายการจะบอกโปรแกรมทำงานของคุณว่าต้องส่งคำขอใหม่
ทำเพื่ออัปเดตรายการที่แคชไว้ก่อนหน้านี้ ('offline.svg' และ 'index.html')
และแคช URL ใหม่ ('app.ffaa4455.js') และการลบเพื่อล้าง URL
ที่ไม่ได้ใช้แล้ว ('app.abcd1234.js')
"App Store" ที่แท้จริง ประสบการณ์การติดตั้ง
ประโยชน์อีกอย่างหนึ่งของการแคชล่วงหน้าคือคุณสามารถมอบประสบการณ์ ก็ทำได้ยากหากไม่ได้อยู่ใน "App Store" ของคุณ เมื่อผู้ใช้เข้าชมหน้าเว็บใดๆ บนเว็บแอปเป็นครั้งแรก คุณอาจสามารถแคช URL ทั้งหมดที่จำเป็นไว้ล่วงหน้าเพื่อแสดง URL ใดก็ได้ การดูของเว็บแอปล่วงหน้า โดยไม่ต้องรอจนกว่าจะเข้าชมแต่ละรายการ แต่ละมุมมอง
เมื่อติดตั้งแอปแล้ว ก็คาดหวังว่าทุกส่วนจะแสดงขึ้นอย่างรวดเร็ว ไม่ใช่แค่ยอดดูที่ เข้าชมในช่วงที่ผ่านมา การแคชล่วงหน้าทำให้เกิดสิ่งเดียวกัน กับเว็บแอปมากขึ้น
เนื้อหาใดที่ควรแคชล่วงหน้า
โปรดดูกลับไปที่คอลัมน์ระบุว่าสิ่งใดเกิดขึ้นบ้าง โหลดแล้วสำหรับการ ภาพของ URL ที่เหมาะจะแคชล่วงหน้ามากที่สุด กฎทั่วไปคือการ แคช HTML, JavaScript หรือ CSS ที่โหลดล่วงหน้าและมีความสำคัญต่อ เพื่อแสดงโครงสร้างพื้นฐานของหน้าเว็บหนึ่งๆ
ขอแนะนำให้หลีกเลี่ยงการแคชสื่อล่วงหน้าหรือเนื้อหาอื่นๆ ที่โหลดในภายหลัง (ยกเว้นกรณีที่มีความสำคัญต่อฟังก์ชันการทำงานของเว็บแอป) ให้ใช้รันไทม์แทน การแคชเพื่อให้แน่ใจว่ารายการเหล่านี้ เนื้อหาจะถูกแคชไว้ขณะใช้งาน
โปรดระลึกไว้เสมอว่าการแคชล่วงหน้าจะต้องใช้แบนด์วิดท์และพื้นที่เก็บข้อมูลของเครือข่าย ในอุปกรณ์ของผู้ใช้ (เช่นเดียวกับการติดตั้งแอปจาก App Store) คุณในฐานะนักพัฒนาซอฟต์แวร์จะเป็นผู้เลือกแคชล่วงหน้าอย่างรอบคอบและหลีกเลี่ยงข้อผิดพลาด ไฟล์ Manifest ของแคชล่วงหน้า
เครื่องมือสร้างของ Workbox ช่วยคุณบอกจำนวนรายการในแคชล่วงหน้า ไฟล์ Manifest และขนาดทั้งหมดของเพย์โหลดล่วงหน้า
ผู้เข้าชมเว็บแอปของคุณจะได้รับประโยชน์ในระยะยาวจากค่าใช้จ่ายล่วงหน้า ล่วงหน้า เนื่องจากความสามารถในการหลีกเลี่ยงเครือข่ายทำให้ ในแบนด์วิดท์ที่ประหยัดได้เมื่อเวลาผ่านไป