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

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

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

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

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

המצב הזה לא אידיאלי, אבל אפשר לפתור את הבעיה על ידי הפעלת טעינה מראש של ניווט, וכך להבטיח הפעלה בו-זמנית של קובץ השירות (service worker) ובקשת הניווט:

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

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

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

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

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

לאחר מכן, היתרונות של טעינה מראש של הניווט מתממשים בתמיכה בדפדפנים באמצעות שימוש בתיבת עבודה כדי לטפל בבקשות ניווט באמצעות 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);

כשמופעלת טעינה מראש של ניווט, התגובה שכתובה מראש היא לבקשות ניווט שמשתמשות באסטרטגיות NetworkFirst או NetworkOnly.

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

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

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

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

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

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

Service-Worker-Navigation-Preload: true

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

סיכום

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