เมื่อ Service Worker จัดการเหตุการณ์ fetch เบราว์เซอร์จะรอให้ Service Worker ตอบกลับ แม้ว่าเวลาในการตอบสนองของคำขอเครือข่ายจะเป็นส่วนสำคัญในการรอ แต่เบราว์เซอร์อาจต้องรอให้โปรแกรมทำงานของบริการเปิดเครื่องและเริ่มการทำงานของโค้ดเรียกกลับของเหตุการณ์ fetch
เวลาเปิดเครื่องจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์และความสามารถของอุปกรณ์ แต่ระยะเวลาที่เกี่ยวข้องอาจนานพอสมควร บางครั้งอาจนานถึงครึ่งวินาทีเมื่อ CPU ทำงานช้า หรือทำงานในสถานะที่มีการควบคุมเนื่องจากสภาวะแวดล้อม ประสิทธิภาพที่เพิ่มขึ้นจากการหลีกเลี่ยงเครือข่ายมีแนวโน้มที่จะให้น้ำหนักมากกว่าเวลาเริ่มต้นนี้เมื่อแสดงการตอบสนองการนำทางจากอินสแตนซ์ Cache สำหรับคำขอการนำทางที่ไปยังเครือข่าย การใช้โปรแกรมทำงานของบริการอาจสร้างความล่าช้าที่รับรู้ได้
ป้อนการโหลดการนำทางล่วงหน้า
การโหลดการนำทางล่วงหน้าเป็นฟีเจอร์สำหรับ Service Worker ที่จะแก้ปัญหาความล่าช้าที่เกิดจากเวลาเปิดเครื่องของ Service Worker หากไม่เปิดใช้การโหลดล่วงหน้าสำหรับการนำทาง ทั้งการเปิดเครื่องของโปรแกรมทำงานของบริการและคำขอการนำทางที่โปรแกรมทำงานของบริการจะจัดการจะเกิดขึ้นต่อเนื่องกัน
วิธีนี้ไม่ใช่วิธีที่ดีที่สุด แต่คุณแก้ไขได้โดยเปิดใช้การโหลดการนำทางล่วงหน้า เพื่อให้โปรแกรมทำงานของบริการเริ่มทำงานและคำขอการนำทางจะเกิดขึ้นพร้อมกัน
แม้ว่าการโหลดล่วงหน้าสำหรับการนำทางจะเพิ่มประสิทธิภาพการทำงานที่ยอดเยี่ยมสำหรับเว็บไซต์ที่ใช้โปรแกรมทำงานของบริการ แต่ก็ไม่ใช่ฟีเจอร์ที่คุณควรเปิดใช้ในทุกสถานการณ์ โดยเฉพาะอย่างยิ่ง เว็บไซต์ที่ใช้ App Shell ที่แคชไว้ล่วงหน้าจะไม่ต้องมีการโหลดการนำทางล่วงหน้า เนื่องจากแคชจะส่งคำขอการนำทางสำหรับมาร์กอัป App Shell โดยไม่มีเวลาในการตอบสนองของการนำทาง ในกรณีเหล่านี้ การตอบกลับที่โหลดไว้ล่วงหน้าอาจสูญเปล่า ซึ่งไม่มีที่น่าพอใจ
เวลาที่ดีที่สุดในการใช้การโหลดการนำทางล่วงหน้าคือเมื่อเว็บไซต์ไม่สามารถแคช HTML ล่วงหน้าได้ ลองนึกถึงเว็บไซต์ที่การตอบกลับมาร์กอัปเป็นแบบไดนามิกและแตกต่างกันไปตามปัจจัยต่างๆ เช่น สถานะการตรวจสอบสิทธิ์ คำขอการนำทางสำหรับสิ่งเหล่านี้อาจใช้กลยุทธ์ที่เน้นเครือข่ายเป็นหลัก (หรือแม้แต่กลยุทธ์แบบเครือข่ายเท่านั้น) และนี่คือที่ที่การโหลดการนำทางล่วงหน้าสามารถสร้างความแตกต่างได้อย่างมาก
การใช้การโหลดการนำทางล่วงหน้าใน Workbox
การใช้การโหลดล่วงหน้าสำหรับการนำทางโดยตรงใน Service Worker ที่ไม่ได้ขับเคลื่อนด้วย Workbox นั้นเป็นเรื่องยาก ข้อแรกอาจใช้ไม่ได้กับทุกเบราว์เซอร์ อย่างที่สอง อาจทำให้ตัดสินใจได้ไม่สะดวก คุณเรียนรู้วิธีใช้ได้โดยตรงในคำอธิบายดีๆ นี้ของ Jake Archibald
Workbox ช่วยลดความยุ่งยากในการใช้การนำทางล่วงหน้า เนื่องจากเมธอด enable ของโมดูล workbox-navigation-preload ได้ทำการตรวจสอบการสนับสนุนฟีเจอร์ที่จำเป็น รวมถึงการสร้าง Listener เหตุการณ์ activate เพื่อเปิดใช้ให้คุณ
จากจุดนี้ ประโยชน์ที่ได้รับจากการโหลดล่วงหน้าสำหรับการนำทางรองรับเบราว์เซอร์ต่างๆ โดยใช้ Workbox ในการจัดการคำขอการนำทางด้วยเครื่องจัดการกลยุทธ์ที่เน้นเครือข่ายเป็นอันดับแรก
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';
// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload
navigationPreload.enable();
// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
// Register the navigation route
registerRoute(navigationRoute);
// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
cacheName: 'static-assets'
}));
// Register the route handling static assets
registerRoute(staticAssetsRoute);
เมื่อเปิดใช้การโหลดล่วงหน้าสำหรับการนำทาง Workbox จะตอบสนองคำขอการนำทางที่ใช้กลยุทธ์ NetworkFirst หรือ NetworkOnly ด้วยการตอบสนองที่โหลดล่วงหน้า
ฉันจะทราบได้อย่างไรว่าการโหลดการนำทางล่วงหน้าใช้งานได้
ในเวอร์ชันการพัฒนา Workbox จะบันทึกข้อมูลจำนวนมากเกี่ยวกับการทำงานของช่อง หากต้องการตรวจสอบว่าการโหลดการนำทางล่วงหน้าใช้งานได้หรือไม่ใน Workbox ให้เปิดคอนโซลในเบราว์เซอร์ที่รองรับในระหว่างส่งคำขอการนำทาง และคุณจะเห็นข้อความบันทึกที่ระบุข้อมูลต่อไปนี้
การบันทึกนี้จะไม่แสดงในบิลด์เวอร์ชันที่ใช้งานจริงโดยค่าเริ่มต้น ดังนั้นคุณจะไม่เห็นการบันทึกนี้เมื่อทำให้ Service Worker เป็นเวอร์ชันที่ใช้งานจริง แต่นี่เป็นวิธีที่ยอดเยี่ยมในการยืนยันว่าการโหลดการนำทางล่วงหน้าทำงานอยู่ (และปัจจัยอื่นๆ)
การกำหนดค่าการตอบกลับที่โหลดล่วงหน้า
เมื่อใช้การโหลดการนำทางล่วงหน้า อาจมีบางสถานการณ์ที่จำเป็นต้องปรับแต่งการตอบกลับที่โหลดล่วงหน้าในระบบแบ็คเอนด์ของแอปพลิเคชัน โปรแกรมทำงานของบริการที่สตรีมเนื้อหาบางส่วนจากเครือข่ายคือสถานการณ์หนึ่งที่อาจมีประโยชน์
ในกรณีเช่นนี้ การทราบว่ามีการส่งคำขอโหลดล่วงหน้าพร้อมส่วนหัว Service-Worker-Navigation-Preload ที่มีค่าเริ่มต้นเป็น true ก็หมายความว่า
Service-Worker-Navigation-Preload: true
จากนั้นในแบ็กเอนด์ของแอปพลิเคชันที่คุณเลือก คุณสามารถตรวจสอบส่วนหัวนี้และแก้ไขการตอบสนองให้เหมาะกับความต้องการของคุณ หากค่าเริ่มต้นของส่วนหัวมีปัญหาไม่ว่าด้วยเหตุผลใดก็ตาม คุณสามารถเปลี่ยนค่าได้ในบริบทของหน้าต่าง โปรดทราบว่างานใดๆ ที่คุณทำในเซิร์ฟเวอร์เพื่ออ่านส่วนหัวนี้จะขึ้นอยู่กับคุณ และอยู่นอกขอบเขตของ Workbox
บทสรุป
การโหลดการนำทางล่วงหน้าล่วงหน้าจะกระทำได้ยากเมื่อใช้โดยตรง แต่การทำงานหนักนั้นคุ้มค่า เพื่อให้มั่นใจว่าโปรแกรมทำงานของบริการจะไม่ขัดขวางเบราว์เซอร์ในการส่งคำขอการนำทาง Workbox ช่วยให้คุณได้รับประโยชน์จากการโหลดการนำทางล่วงหน้าโดยไม่ต้องทำงานมากมาย หากต้องการดูรายละเอียดเพิ่มเติมเกี่ยวกับโมดูล workbox-navigation-preload ให้ดูเอกสารอ้างอิง