ניהול התשובות החלופיות

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

אפשרות חלופית היא תגובה כללית שמתאימה לכולם, שהיא placeholder טוב יותר ממה שהדפדפן יספק כברירת מחדל כשבקשה נכשלת. לפניכם מספר דוגמאות:

• חלופה ל-placeholder של 'תמונה חסרה'.
• חלופה ב-HTML לדף הרגיל 'אין חיבור לרשת'.

רק דף אופליין

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

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

בקוד שלמעלה נעשה שימוש ב-setDefaultHandler כדי להשתמש באסטרטגיית רשת בלבד כברירת המחדל לכל המסלולים. לאחר מכן, המערכת מריצה את המתכון offlineFallback כדי להציג את החלופה במצב אופליין במקרה של שגיאה. המתכון מתבסס על ההנחה שקובץ ה-HTML החלופי הלא מקוון ייכתב בשם offline.html ויוגש מהשורש של שרת האינטרנט.

חלופות מקיפות

בכל פעם שמתרחש כשל ברשת או החמצה של מטמון, אסטרטגיות השמירה במטמון שמוצעות על ידי workbox-strategies יידחו באופן עקבי. פעולה זו מקדם את הדפוס של הגדרת handler גלובלי "catch" (תפיסה) כדי לטפל בכשלים בפונקציית handler אחת, וכך להציע חלופות שונות לערכי request.destination שונים.

בדוגמה הבאה נעשה שימוש במתכון של warmStrategyCache מ-workbox-recipes ומגדיר handler של תופסן כדי להציג פריטים שנשמרו במטמון לפני זמן הריצה במטמון של זמן הריצה. עם זאת, חלופות לשמירה במטמון עשויות להתאים יותר לאפליקציה שלכם:

import {warmStrategyCache} from 'workbox-recipes';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';

// Fallback assets to cache
const FALLBACK_HTML_URL = '/offline.html';
const FALLBACK_IMAGE_URL = '/images/image-not-found.jpg';
const FALLBACK_STRATEGY = new CacheFirst();

// Warm the runtime cache with a list of asset URLs
warmStrategyCache({
  urls: [FALLBACK_HTML_URL, FALLBACK_IMAGE_URL],
  strategy: FALLBACK_STRATEGY,
});

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // The warmStrategyCache recipe is used to add the fallback assets ahead of
  // time to the runtime cache, and are served in the event of an error below.
  // Use `event`, `request`, and `url` to figure out how to respond, or
  // use request.destination to match requests for specific resource types.
  switch (request.destination) {
    case 'document':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_HTML_URL});

    case 'image':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_IMAGE_URL});

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

בשלב הבא, תגובות חלופיות נשמרות מראש במטמון באמצעות injectManifest בכלי ה-build של Workbox, והן משמשות כחלופה במקרה של שגיאה ב-method matchPrecache.

import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

// Optional: use the injectManifest mode of one of the Workbox
// build tools to precache a list of URLs, including fallbacks.
precacheAndRoute(self.__WB_MANIFEST);

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // Fallback assets are precached when the service worker is installed, and are
  // served in the event of an error below. Use `event`, `request`, and `url` to
  // figure out how to respond, or use request.destination to match requests for
  // specific resource types.
  switch (request.destination) {
    case 'document':
      // FALLBACK_HTML_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_HTML_URL);

    case 'image':
      // FALLBACK_IMAGE_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_IMAGE_URL);

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

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

התחממות המטמון של זמן הריצה

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

כדי למלא מראש את המטמון של זמן הריצה עם נכסים, אפשר להשתמש במתכון של warmStrategyCache מ-workbox-recipes. מאחורי הקלעים, השיטה הזו מפעילה את Cache.addAll באירוע install של קובץ שירות (service worker).

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = [
  '/offline.html',
];

warmStrategyCache({urls, strategy});

סיכום

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