جعبه کاری-پخش-به روز رسانی

هنگام پاسخ دادن به درخواست‌ها با ورودی‌های ذخیره‌سازی شده، در عین حال که سریع است، با یک معاوضه همراه است که کاربران ممکن است در نهایت داده‌های قدیمی را ببینند.

بسته workbox-broadcast-update یک راه استاندارد برای اطلاع رسانی به Windows Client از به روز رسانی پاسخ ذخیره شده در حافظه پنهان را ارائه می دهد. این معمولاً همراه با استراتژی StaleWhileRevalidate استفاده می شود.

هر زمان که مرحله "تأیید مجدد" آن استراتژی پاسخی را از شبکه بازیابی می کند که با آنچه قبلاً در حافظه پنهان شده بود متفاوت است، این ماژول یک پیام (از طریق postMessage() ) به همه سرویس گیرندگان پنجره در محدوده سرویس کارگر فعلی ارسال می کند.

Windows Clients می‌تواند به به‌روزرسانی‌ها گوش دهد و اقدامات لازم را انجام دهد، مانند نمایش خودکار پیامی به کاربر که به او اطلاع می‌دهد به‌روزرسانی‌ها در دسترس هستند.

به روز رسانی چگونه تعیین می شود؟

هدرهای خاصی از اشیای ذخیره شده در حافظه پنهان و جدید Response با هم مقایسه می شوند و اگر هر یک از هدرها مقادیر متفاوتی داشته باشند، به‌روزرسانی در نظر گرفته می‌شود.

به طور پیش فرض، هدرهای Content-Length ، ETag و Last-Modified مقایسه می شوند.

Workbox از مقادیر هدر به جای مقایسه بایت به بایت بدنه های پاسخ استفاده می کند تا کارآمدتر باشد، به ویژه برای پاسخ های بالقوه بزرگ.

با استفاده از Broadcast Update

این کتابخانه در نظر گرفته شده است که همراه با استراتژی ذخیره سازی 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 به عنوان افزونه یک استراتژی خاص همانطور که در بالا نشان داده شده است استفاده می کنند، ممکن است از منطق اساسی در کد سرویس کارگر استفاده شود.

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,
);

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