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

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

توفّر حزمة 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,
);

الأنواع

BroadcastCacheUpdate

تستخدِم واجهة برمجة التطبيقات postMessage() API لإبلاغ أي نوافذ/علامات تبويب مفتوحة عند تعديل استجابة مخزَّنة مؤقتًا.

ولأغراض تتعلّق بالكفاءة، لا تتم مقارنة نصوص الاستجابة الأساسية، بل تتم مراجعة عناوين الاستجابة المحدّدة فقط.

أماكن إقامة

  • الدالة الإنشائية

    void

    يمكنك إنشاء مثيل 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)=> {...}

    • returns

      Promise<void>

      يتم حلّ المشكلة عند إرسال التحديث.

BroadcastCacheUpdateOptions

أماكن إقامة

  • headersToCheck

    سلسلة[] اختيارية

  • notifyAllClients

    منطقية اختيارية

  • generatePayload

    باطل اختياري

    تبدو الدالة generatePayload على النحو التالي: 

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

    • returns

      تسجيل<stringany>

BroadcastUpdatePlugin

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

أماكن إقامة

  • الدالة الإنشائية

    void

    يمكنك إنشاء مثيل 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

    سلسلة[]

المرتجعات

  • boolean