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

عند الاستجابة للطلبات باستخدام الإدخالات المخزّنة مؤقتًا، على الرغم من أنّها سريعة، فإنّه ينتج عنها تنازل قد يؤدي إلى ظهور بيانات قديمة للمستخدمين.

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

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

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

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

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

تكون العناوين 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 كمكوّن إضافي لاستراتيجية معينة كما هو موضح أعلاه، فمن الممكن استخدام الطريقة الأساسية المنطق في رمز عامل الخدمات.

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() لإعلام أي نوافذ أو علامات تبويب مفتوحة عندما يتم تخزينها مؤقتًا. تم تحديث الرد.

من أجل الكفاءة، لا تتم مقارنة أجسام الاستجابة الأساسية، وإنما يتم التحقّق من رؤوس استجابة محدّدة فقط.

أماكن إقامة

  • طريقة وضع التصميم

    غير صالح

    أنشئ مثيلًا من 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) => {...}

    • returns

      وعود <باطلة>

      يتم حله بعد إرسال التحديث.

BroadcastCacheUpdateOptions

أماكن إقامة

  • headersToCheck

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

  • notifyAllClients

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

  • generatePayload

    void اختياري

    تبدو دالة generatePayload كما يلي: 

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

    • returns

      سجلّ<stringany>

BroadcastUpdatePlugin

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

أماكن إقامة

  • طريقة وضع التصميم

    فراغ

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

المرتجعات

  • منطقي