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