workbox-Navigate-preload

"האצה של Service Worker בעזרת טעינות מראש של ניווט" מסבירה היטב מהי הטעינה מראש של הניווט, ומה היתרונות שלה לאפליקציות אינטרנט ש-service worker שלהן לא מטפל במפורש בבקשות ניווט.

מה המודול הזה עושה?

workbox-navigation-preload יטפל בבדיקה בזמן הריצה כדי לראות אם הדפדפן הנוכחי תומך בטעינה מראש לניווט. אם הוא תומך, הוא ייצור באופן אוטומטי handler של אירועים מסוג 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()