workbox-Navigate-preload

במאמר האצת קובץ השירות (service worker) באמצעות טעינה מראש של רכיבי ניווט מוסבר בצורה מעולה מהי טעינה מראש של רכיבי ניווט, ואילו יתרונות היא מספקת לאפליקציות אינטרנט שבהן קובץ השירות לא מטפל באופן מפורש בבקשות ניווט.

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

workbox-navigation-preload יטפל בבדיקת זמן הריצה כדי לבדוק אם הדפדפן הנוכחי תומך בחיבור מראש של נתוני הניווט. אם כן, הוא ייצור באופן אוטומטי בורר אירועים מסוג activate כדי להפעיל אותו.

גם הקוד המשותף ב-workbox-core שמטפל ביצירת בקשות לרשת בכל Workbox עודכן, כדי לנצל באופן אוטומטי תגובה של טעינה מראש, אם היא זמינה. כלומר, כל אחת מהשיטות המובנות יכולה לנצל באופן אוטומטי את הטעינה מראש של הניווט, ברגע שהיא מופעלת.

למי כדאי להפעיל טעינה מראש של מסלולי ניווט?

מפתחים שכבר מטפלים בניווטים על ידי מענה עם HTML שנשמר במטמון מראש (שעשוי להיות מוגדר עם חלופה של פגז אפליקציה) לא צריכים להפעיל את הטעינה מראש של הניווט! התכונה הזו נועדה לצמצם את זמן האחזור של הניווט למפתחים שלא יכולים לשמור מראש את קובצי ה-HTML שלהם, אבל עדיין רוצים להשתמש ב-Workbox כדי לטפל בשמירת נכסים אחרים באתרים שלהם במטמון.

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

חשוב לדעת שהדפדפנים האלה לא ייהנו מהפחתת זמן האחזור של הניווט, ומומלץ למדוד בקפידה את ההשפעה על הביצועים של שליחת עובד שירות שלא מטפל בבקשות ניווט ולא משתמש בחיוב מראש של ניווט.

Methods

disable()

workbox-navigation-preload.disable()

אם הדפדפן תומך בעומס נתונים מראש של ניווט, הפעולה הזו תשבית אותו.

enable()

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

אם הדפדפן תומך בעומס מראש של ניווט, האפשרות הזו תפעיל אותו.

פרמטרים

• headerValue

  מחרוזת אופציונלי

isSupported()

workbox-navigation-preload.isSupported()

החזרות

• בוליאני

  האם הדפדפן הנוכחי תומך בהפעלת טעינה מראש של הניווט.