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

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

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,
);

टाइप

BroadcastCacheUpdate

कैश मेमोरी में सेव किए गए किसी जवाब के अपडेट होने पर, यह किसी खुली विंडो/टैब को जानकारी देने के लिए postMessage() API का इस्तेमाल करता है.

परफ़ॉर्मेंस को ठीक करने के लिए, दिए गए रिस्पॉन्स बॉडी की तुलना नहीं की जाती है. सिर्फ़ खास रिस्पॉन्स हेडर की जांच की जाती है.

प्रॉपर्टी

  • कंस्ट्रक्टर

    void

    मैसेज ब्रॉडकास्ट करने के लिए, किसी खास channelName के साथ Broadcast cacheUpdate इंस्टेंस बनाएं

    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 इंस्टेंस बनाएं. साथ ही, प्लगिन के cacheDidUpdate कॉलबैक को शुरू करने पर, इसके notifyIfUpdated तरीके को कॉल करें.

    constructor फ़ंक्शन ऐसा दिखता है:

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

तरीके

responsesAreSame()

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

दिए गए दो Response's में, हेडर की कई वैल्यू की तुलना की जाती है. इससे यह पता चलता है कि वे एक जैसे हैं या नहीं.

पैरामीटर

  • firstResponse

    जवाब

  • secondResponse

    जवाब

  • headersToCheck

    स्ट्रिंग[]

रिटर्न

  • boolean