ภาระงาน-การนำทาง-การโหลดล่วงหน้า

บทความ "เพิ่มความเร็วของ Service Worker ด้วยการโหลดการนําทางล่วงหน้า" อธิบายความหมายของการโหลดการนําทางล่วงหน้าและประโยชน์ที่เว็บแอปได้รับเมื่อ Service Worker ไม่ได้จัดการคําขอการนําทางอย่างชัดเจน

โมดูลนี้ทํางานอย่างไร

workbox-navigation-preload จะจัดการการตรวจสอบที่รันไทม์เพื่อดูว่าเบราว์เซอร์ปัจจุบันรองรับหรือไม่ การโหลดการนำทางล่วงหน้า และหากดำเนินการแล้ว เครื่องมือจะสร้างเครื่องจัดการเหตุการณ์ activate โดยอัตโนมัติเพื่อ เปิดใช้ได้เลย

โค้ดที่แชร์ภายใน workbox-core ที่จัดการการสร้างคำขอเครือข่ายใน Workbox ทั้งหมด และยังได้รับการอัปเดตให้ใช้ประโยชน์จากการตอบกลับการโหลดล่วงหน้าโดยอัตโนมัติ หากมี ซึ่งหมายความว่ากลยุทธ์ใดก็ตามที่มีให้ในตัวจะใช้ประโยชน์จากการโหลดการนําทางล่วงหน้าโดยอัตโนมัติเมื่อเปิดใช้

ใครควรเปิดใช้การโหลดเส้นทางล่วงหน้า

นักพัฒนาแอปที่จัดการการนําทางอยู่แล้วโดยการตอบกลับด้วย HTML ที่แคชไว้ล่วงหน้า (อาจมีการกําหนดค่าด้วย App Shell สำรอง) ไม่จำเป็นต้องเปิดใช้การโหลดการนําทางล่วงหน้า ฟีเจอร์นี้ เพื่อลดเวลาในการตอบสนองของการไปยังส่วนต่างๆ สำหรับนักพัฒนาซอฟต์แวร์ที่ไม่สามารถแคช HTML ล่วงหน้าได้ แต่ยังต้องการ ใช้ Workbox ในการแคชเนื้อหาอื่นๆ บนเว็บไซต์

เช่น หากคุณใช้รูปแบบ App Shell และตั้งค่าเส้นทางการนําทางไว้ให้ใช้ HTML ที่แคชไว้ล่วงหน้าแล้ว การเปิดใช้การโหลดการนําทางล่วงหน้าจะเสียเปล่า ระบบจะไม่ใช้การตอบสนองของเครือข่ายที่เชื่อมโยงกับคำขอการโหลดล่วงหน้า เนื่องจากระบบจะใช้ HTML ที่แคชไว้ล่วงหน้าโดยไม่มีเงื่อนไข

การใช้งานพื้นฐาน

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

เรื่องราวการสนับสนุนเบราว์เซอร์

ปัจจุบัน Google Chrome เป็นเบราว์เซอร์เดียวที่รองรับการโหลดการนําทางล่วงหน้า enable() จะตรวจหาการอัปเดตเบราว์เซอร์ขณะรันไทม์ และจะพยายาม เปิดใช้งานการโหลดล่วงหน้าสำหรับการนำทาง หากเบราว์เซอร์ปัจจุบันรองรับ คุณจึงเรียก enable() โดยไม่มีข้อกำหนดใน Service Worker ได้

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

workbox-navigation-preload.disable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

workbox-navigation-preload.isSupported()