אילוץ של זמן קצוב לתפוגה של רשת

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

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

שימוש ב-networkTimeoutSeconds

אפשר לאלץ את הזמן הקצוב לתפוגה של בקשות רשת כשמשתמשים בשיטות NetworkFirst או NetworkOnly. באסטרטגיות האלה יש אפשרות networkTimeoutSeconds, שמציינת את מספר השניות שבהן ה-service worker צריך להמתין לתגובת הרשת לפני שהיא מתפנה ומחזירה את הגרסה האחרונה שלה שנשמרה במטמון:

// sw.js
import { NetworkFirst } from 'workbox-strategies';
import { registerRoute, NavigationRoute } from 'workbox-routing';

// Only wait for three seconds before returning the last
// cached version of the requested page.
const navigationRoute = new NavigationRoute(new NetworkFirst({
  networkTimeoutSeconds: 3,
  cacheName: 'navigations'
}));

registerRoute(navigationRoute);

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

עם זאת, מה קורה אם לדף שאליו אתם נכנסים אין תגובה ישנה יותר במטמון? במקרים כאלה, אפשר ליצור תגובת גיבוי לדף HTML גנרי אופליין:

import {registerRoute, NavigationRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

// Hardcode the fallback cache name and the offline
// HTML fallback's URL for failed responses
const FALLBACK_CACHE_NAME = 'offline-fallback';
const FALLBACK_HTML = '/offline.html';

// Cache the fallback HTML during installation.
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(FALLBACK_CACHE_NAME).then((cache) => cache.add(FALLBACK_HTML)),
  );
});

// Apply a network-only strategy to navigation requests.
// If offline, or if more than five seconds pass before there's a
// network response, fall back to the cached offline HTML.
const networkWithFallbackStrategy = new NetworkOnly({
  networkTimeoutSeconds: 5,
  plugins: [
    {
      handlerDidError: async () => {
        return await caches.match(FALLBACK_HTML, {
          cacheName: FALLBACK_CACHE_NAME,
        });
      },
    },
  ],
});

// Register the route to handle all navigations.
registerRoute(new NavigationRoute(networkWithFallbackStrategy));

הסיבה לכך היא שכאשר משתמשים ב-networkTimeoutSeconds באסטרטגיה NetworkFirst, ה-handler יחזיר תגובת שגיאה אם הזמן הקצוב לתפוגה יחלוף ואין התאמה במטמון לגבי כתובת ה-URL. במקרה כזה, הפלאגין handlerDidError של Workbox יכול לספק תשובה כללית כחלופה.

כמה זמן נדרש להמתין?

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

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

אם אתם מתעדים מדדים בשדה, כדאי לבחון את האחוזון ה-75 של הציונים Time to First Byte (TTFB) ו-First Contentful Paint (FCP) כדי להבין מתי זמני המתנה ארוכים יותר לבקשות ניווט עשויים להיות בין בסיס המשתמשים שלכם. זה עשוי לתת לכם תובנות לגבי המיקום של הקו.