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

"เพิ่มความเร็วของ 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 จึงปลอดภัย

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

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()