การโหลดการนำทางล่วงหน้าสำหรับ HTML ที่เน้นเครือข่ายเป็นหลัก

เมื่อโปรแกรมทำงานของบริการจัดการเหตุการณ์ fetch เบราว์เซอร์จะรอให้โปรแกรมทำงานของบริการตอบกลับ แม้ว่าเวลาในการตอบสนองของคำขอเครือข่ายจะเป็นส่วนสำคัญที่ต้องรอ แต่เบราว์เซอร์อาจต้องรอให้ Service Worker เปิดเครื่องและเริ่มการทำงานของ Callback เหตุการณ์ fetch ด้วย

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

เข้าสู่การโหลดการนำทางล่วงหน้า

การโหลดล่วงหน้าของการนำทางเป็นฟีเจอร์ของ Service Worker ที่แก้ไขความล่าช้าที่เกิดจากเวลาเปิดเครื่องของ Service Worker หากไม่ได้เปิดใช้การโหลดการนำทางล่วงหน้า ทั้งการเปิดเครื่องของ Service Worker และคำขอการนำทางที่โปรแกรมทำงานดังกล่าวจัดการจะเกิดขึ้นติดต่อกัน

วิธีนี้ไม่ได้ผล แต่คุณแก้ไขได้โดยการเปิดใช้การโหลดการนำทางล่วงหน้า ซึ่งจะช่วยให้แน่ใจว่าการเปิดเครื่องโปรแกรมทำงานของบริการและคำขอการนำทางเกิดขึ้นพร้อมกัน:

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

เวลาที่เหมาะสมที่สุดในการใช้การโหลดล่วงหน้าสำหรับการนำทางคือเมื่อเว็บไซต์ไม่สามารถแคช HTML ล่วงหน้าได้ ลองนึกถึงเว็บไซต์ที่การตอบกลับของมาร์กอัปเป็นแบบไดนามิกและแตกต่างกันไปตามปัจจัยต่างๆ เช่น สถานะการตรวจสอบสิทธิ์ คำขอการนำทางสำหรับคำขอเหล่านี้อาจใช้กลยุทธ์ที่เน้นเครือข่ายเป็นหลัก (หรือแม้กระทั่งแบบเครือข่ายเท่านั้น) ซึ่งเป็นจุดที่การโหลดการนำทางล่วงหน้าสามารถสร้างความแตกต่างได้อย่างมาก

การใช้การโหลดการนำทางล่วงหน้าใน Workbox

การใช้การโหลดการนำทางล่วงหน้าโดยตรงในโปรแกรมทำงานของบริการที่ไม่ได้ขับเคลื่อนโดย Workbox อาจเป็นเรื่องยาก ข้อแรก เบราว์เซอร์บางประเภทไม่รองรับ ประการที่ 2 อาจเป็นสิ่งที่ทำได้ยาก คุณดูวิธีใช้ฟีเจอร์นี้ได้โดยตรงในคำอธิบายที่ยอดเยี่ยมนี้จาก 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 โปรดดูเอกสารอ้างอิงของโมดูลนี้