עדכון תיבת עבודה-שידור

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

החבילה workbox-broadcast-update מספקת דרך סטנדרטית לשליחת הודעות לקוחות חלון שתגובה שנשמרה במטמון עודכנה. בדרך כלל משתמשים במדיניות הזו יחד עם השיטה StaleWhileRevalidate.

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

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

איך נקבעים העדכונים?

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

כברירת מחדל, הכותרות Content-Length, ETag ו-Last-Modified הן בהשוואה.

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

שימוש בעדכון שידור

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

כדי לשדר עדכונים, פשוט מוסיפים broadcastUpdate.BroadcastUpdatePlugin לאפשרויות האסטרטגיה.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [new BroadcastUpdatePlugin()],
  })
);

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

navigator.serviceWorker.addEventListener('message', async event => {
  // Optional: ensure the message came from workbox-broadcast-update
  if (event.data.meta === 'workbox-broadcast-update') {
    const {cacheName, updatedURL} = event.data.payload;

    // Do something with cacheName and updatedURL.
    // For example, get the cached content and update
    // the content on the page.
    const cache = await caches.open(cacheName);
    const updatedResponse = await cache.match(updatedURL);
    const updatedText = await updatedResponse.text();
  }
});

פורמט הודעה

כשמתבצעת הפעלה של מאזין לאירועים מסוג message באפליקציית האינטרנט, לנכס event.data יהיה הפורמט הבא:

{
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  // The two payload values vary depending on the actual update:
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}

התאמה אישית של הכותרות לבדיקה

אפשר להתאים אישית את הכותרות לבדיקה באמצעות הגדרת headersToCheck לנכס.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [
      new BroadcastUpdatePlugin({
        headersToCheck: ['X-My-Custom-Header'],
      }),
    ],
  })
);

שימוש מתקדם

רוב המפתחים ישתמשו ב-workbox-broadcast-update כפלאגין של אסטרטגיה מסוימת, כפי שמוצג למעלה, אבל אפשר להשתמש בלוגיקה הבסיסית בקוד של ה-service worker.

import {BroadcastCacheUpdate} from 'workbox-broadcast-update';

const broadcastUpdate = new BroadcastCacheUpdate({
  headersToCheck: ['X-My-Custom-Header'],
});

const cacheName = 'api-cache';
const request = new Request('https://example.com/api');

const cache = await caches.open(cacheName);
const oldResponse = await cache.match(request);
const newResponse = await fetch(request);

broadcastUpdate.notifyIfUpdated({
  cacheName,
  oldResponse,
  newResponse,
  request,
);

סוגים

BroadcastCacheUpdate

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

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

מאפיינים

  • constructor

    ריק

    יצירה של מופע של BroadcastCacheUpdate עם channelName ספציפי כדי לשדר הודעות

    הפונקציה constructor נראית כך: 

    (options?: BroadcastCacheUpdateOptions) => {...}

  • notifyIfUpdated

    void

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

    ההודעה שפורסמה היא בפורמט הבא (כאשר payload יכול אפשרות להתאמה אישית generatePayload שהמכונה נוצרת עם):

    {
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}

    הפונקציה notifyIfUpdated נראית כך: 

    (options: CacheDidUpdateCallbackParam) => {...}

    • החזרות

      Promise<void>

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

BroadcastCacheUpdateOptions

מאפיינים

  • headersToCheck

    string[] אופציונלי

  • notifyAllClients

    בוליאני אופציונלי

  • generatePayload

    void optional

    הפונקציה generatePayload נראית כך: 

    (options: CacheDidUpdateCallbackParam) => {...}

    • החזרות

      הקלטה<stringany>

BroadcastUpdatePlugin

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

מאפיינים

  • constructor

    ריק

    יוצרים מופע workbox-broadcast-update.BroadcastUpdate עם האפשרויות שהועברו, ומפעילים את השיטה notifyIfUpdated שלו בכל פעם שמפעילים את הפונקציה הלא חוזרת cacheDidUpdate של הפלאגין.

    הפונקציה constructor נראית כך: 

    (options?: BroadcastCacheUpdateOptions) => {...}

שיטות

responsesAreSame()

workbox-broadcast-update.responsesAreSame(
  firstResponse: Response,
  secondResponse: Response,
  headersToCheck: string[],
)

נתונים שני Response's, הפונקציה משווה בין כמה ערכים של כותרות כדי לבדוק אם הם זהים או לא.

פרמטרים

  • firstResponse

    תשובה

  • secondResponse

    תשובה

  • headersToCheck

    string[]

החזרות

  • בוליאני