تحديث البث-مربع العمل

عند الاستجابة للطلبات التي تتضمن إدخالات مُخزَّنة مؤقتًا، وفي الوقت الذي تكون فيه سريعة، يكون الأمر للمفاضلة حيث قد ينتهي الأمر برؤية بيانات قديمة للمستخدمين.

توفّر حزمة workbox-broadcast-update طريقة عادية لإشعار Window Clients بأنه تم تعديل استجابة مخزَّنة مؤقتًا. يشيع استخدام هذا الإجراء مع استراتيجية StaleWhileRevalidate.

عندما تسترد خطوة "إعادة التحقق" ضمن هذه الاستراتيجية ردًّا من الشبكة يختلف عن الشبكة التي تم تخزينها مؤقتًا، سترسل هذه الوحدة رسالة (من خلال postMessage()) إلى جميع برامج عملاء النوافذ ضمن نطاق مشغّل الخدمات الحالي.

ويمكن لبرامج Window Clients الاستماع إلى التحديثات واتخاذ الإجراءات المناسبة، مثل عرض رسالة تلقائية للمستخدم لإعلامه بتوفّر التحديثات.

كيف يتم تحديد التحديثات؟

تتم مقارنة بعض العناوين للكائنات المخزَّنة مؤقتًا والجديدة Response، وإذا كان أي من العناوين يحتوي على قيم مختلفة، يتم اعتباره تعديلاً.

تتم تلقائيًا المقارنة بين عناوين Content-Length وETag وLast-Modified.

يستخدم "مربع العمل" قيم العنوان بدلاً من مقارنة البايت مقابل نصوص الاستجابة ليكون أكثر كفاءة، لا سيما للاستجابات الكبيرة التي يُحتمل أن تكون كبيرة.

استخدام "تحديث البث"

تم تصميم المكتبة لاستخدامها مع استراتيجية التخزين المؤقت 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[],
)