טעינה מראש של ניווט ל-HTML עם עדיפות לרשת

כש-Service Worker מטפל באירועי fetch, הדפדפן ימתין לתשובה מה-Service Worker. זמן האחזור של בקשת הרשת הוא חלק גדול מההמתנה, אבל יכול להיות שהדפדפן יצטרך לחכות עד שה-Service Worker יאתחל ויפעיל קריאות חוזרות לאירוע fetch.

זמן האתחול משתנה בהתאם למכשיר וליכולות שלו, אבל הזמן הכולל עשוי להיות משמעותי, לפעמים עד חצי שנייה כשהמעבד איטי, או שהוא עובד במצב של ויסות נתונים (throttle) עקב תנאי הסביבה. שיפור הביצועים של הימנעות מהרשת צפוי לעלות על זמן ההפעלה בזמן שתגובות הניווט מוצגות ממופע Cache. בבקשות ניווט שמגיעות לרשת, הצגת קובץ שירות (service worker) יכולה לגרום לעיכוב ניכר.

הזנת טעינה מראש של הניווט

טעינה מראש של ניווט היא תכונה של קובץ שירות (service worker) שפותרת את העיכוב שנובע מזמן האתחול של ה-Service Worker. אם הטעינה מראש של הניווט לא מופעלת, האתחול של ה-Service Worker ובקשת הניווט שהוא מטפל יטופלו ברצף:

זה לא אידיאלי, אבל אפשר לתקן את זה על ידי הפעלת טעינה מראש של ניווט, שמבטיחה שהאתחול של ה-Service Worker ובקשת הניווט תתבצע בו-זמנית:

טעינה מראש של ניווט היא אופטימיזציה מעולה של ביצועים באתרים שמשתמשים ב-Service Worker, אבל זו לא תכונה שכדאי להפעיל בכל המצבים. באופן ספציפי, אתרים שמשתמשים במעטפת של אפליקציה שנשמרה מראש במטמון לא צריכים טעינה מראש של ניווט, כי המטמון שולח את בקשת הניווט לתגי העיצוב של מעטפת האפליקציה ללא זמן אחזור של הניווט. במקרים כאלה, התגובה שנטענה מראש תימחק, וזה לא טוב.

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

שימוש בטעינה מראש של ניווט ב-Workbox

לא קל להשתמש בטעינה מראש של ניווט ישירות ב-Service Worker שלא מופעל על ידי Workbox. ראשית, הוא לא נתמך בכל הדפדפנים. שנית, לפעמים קשה להבין את המידע באופן הנכון. תוכלו ללמוד איך להשתמש בו ישירות בהסבר המעולה הזה של ג'ייק ארצ'יבלד.

פישוט של תיבת העבודה באמצעות טעינה מראש של ניווט, כי ה-method enable של המודול workbox-navigation-preload מבצעת את בדיקות התמיכה בתכונות הנדרשות, וכן יוצרת את ה-event listener activate כדי להפעיל אותו עבורך.

מכאן, היתרונות של הטעינה מראש של הניווט מתממשים בדפדפנים תומכים באמצעות שימוש ב-Workbox כדי לטפל בבקשות ניווט באמצעות handler של אסטרטגיה שמתמקדת ברשת:

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 עם התגובה שנטענה מראש.

אזהרה: אם לא תרשום נתיב לטיפול בתגובה שנטענה מראש באמצעות אסטרטגיה שמתמקדת ברשת (או אפילו ברשת בלבד), התגובה שנטענה מראש לא תהיה בשימוש.

איך אפשר לדעת אם הטעינה מראש של הניווט פועלת?

בגרסאות build של פיתוח, מערכת Workbox רושמת הרבה מידע על מה שהיא עושה. כדי לבדוק אם הטעינה מראש של הניווט פועלת ב-Workbox, פותחים את המסוף בדפדפן תומך במהלך בקשת ניווט ורואים הודעת יומן עם הכיתוב הבא:

הרישום ביומן לא יהיה גלוי כברירת מחדל בגרסאות build לסביבת הייצור, כך שלא תראו אותו כשתפרסו את Service Worker בסביבת הייצור, אבל זו דרך מצוינת לוודא שהטעינה מראש של הניווט פועלת (בין היתר).

התאמה אישית של התשובות שנטענו מראש

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

במקרים כאלה, משתלם לדעת שבקשות לטעינה מראש נשלחות עם כותרת Service-Worker-Navigation-Preload שמוגדרת עם ערך ברירת המחדל של true:

Service-Worker-Navigation-Preload: true

לאחר מכן, בקצה העורפי לבחירתכם, תוכלו לבדוק את הכותרת הזו ולשנות את התגובה בהתאם לצרכים שלכם. אם ערך ברירת המחדל של הכותרת בעייתי מסיבה כלשהי, אפשר לשנות אותו בהקשר של החלון. עם זאת, חשוב לדעת שכל העבודה שאתם מבצעים בשרת לקריאת הכותרת הזו תלויה בכם, מחוץ למסגרת Workbox.

סיכום

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