वर्कबॉक्स-ब्रॉडकास्ट-अपडेट

कैश मेमोरी में सेव की गई एंट्री वाले अनुरोधों का जवाब देते समय, इसके साथ-साथ कम फ़ायदे भी मिलते हैं. इससे उपयोगकर्ताओं को पुराना डेटा दिख सकता है.

workbox-broadcast-update पैकेज, विंडो क्लाइंट को यह सूचना देने का एक स्टैंडर्ड तरीका है कि कैश मेमोरी में सेव किए गए रिस्पॉन्स को अपडेट कर दिया गया है. इसे आम तौर पर, StaleWhileRevalidate रणनीति के साथ इस्तेमाल किया जाता है.

जब भी उस रणनीति के "फिर से पुष्टि करें" चरण को, पहले से कैश मेमोरी में सेव किए गए नेटवर्क से अलग नेटवर्क का रिस्पॉन्स मिलता है, तो यह मॉड्यूल postMessage() की मदद से, मौजूदा सर्विस वर्कर के दायरे में आने वाले सभी विंडो क्लाइंट को एक मैसेज भेजेगा.

विंडो क्लाइंट, अपडेट सुन सकते हैं और ज़रूरी कार्रवाई कर सकते हैं. जैसे, उपयोगकर्ता को अपडेट उपलब्ध होने की जानकारी देने के लिए, अपने-आप मैसेज दिखाया जाना.

अपडेट कैसे तय किए जाते हैं?

कैश मेमोरी में सेव किए गए और नए 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[],
)