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

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

بسته 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,
);

انواع

BroadcastCacheUpdate

از API postMessage() برای اطلاع رسانی به پنجره‌ها/برگه‌های باز هنگام به‌روزرسانی پاسخ ذخیره شده در حافظه پنهان استفاده می‌کند.

به خاطر کارایی، بدنه‌های پاسخ زیربنایی با هم مقایسه نمی‌شوند. فقط سرصفحه های پاسخ خاص بررسی می شوند.

خواص

  • سازنده

    خالی

    یک نمونه BroadcastCacheUpdate با یک channelName خاص برای پخش پیام‌ها در

    تابع constructor به نظر می رسد:

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

  • notifyIfUpdated

    خالی

    دو پاسخ را با هم مقایسه می کند و در صورتی که پاسخ ها متفاوت باشد، پیامی (از طریق postMessage() ) به همه سرویس گیرندگان پنجره ارسال می کند. هیچ یک از پاسخ ها نمی تواند مبهم باشد.

    پیام ارسال شده دارای قالب زیر است (که در آن payload می توان از طریق گزینه generatePayload که نمونه با آن ایجاد می شود سفارشی کرد):

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

    تابع notifyIfUpdated به نظر می رسد:

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

    • برمی گرداند

      قول<باطل>

      پس از ارسال به روز رسانی برطرف می شود.

BroadcastCacheUpdateOptions

خواص

  • headersToCheck

    رشته[] اختیاری است

  • اطلاع رسانی به همه مشتریان

    بولی اختیاری

  • تولید Payload

    باطل اختیاری

    تابع generatePayload به نظر می رسد:

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

    • برمی گرداند

      رکورد<stringy>

BroadcastUpdatePlugin

این افزونه هر زمان که پاسخ ذخیره شده در حافظه پنهان به روز شود، به طور خودکار پیامی را پخش می کند.

خواص

  • سازنده

    خالی

    یک نمونه workbox-broadcast-update.BroadcastUpdate با گزینه‌های پاس شده بسازید و هر زمان که cacheDidUpdate فراخوانی افزونه فراخوانی شد، متد notifyIfUpdated آن را فراخوانی می‌کند.

    تابع constructor به نظر می رسد:

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

مواد و روش ها

responsesAreSame()

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

با توجه به دو Response's ، چندین مقدار هدر را با هم مقایسه می کند تا ببیند آیا آنها یکسان هستند یا نه.

مولفه های

  • اولین پاسخ

    واکنش

  • پاسخ دوم

    واکنش

  • headersToCheck

    رشته[]

برمی گرداند

  • بولی