इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

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

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

कैश मेमोरी में सेव किए गए और नए Response ऑब्जेक्ट के कुछ हेडर की तुलना की जाती है. अगर किसी भी हेडर की वैल्यू अलग-अलग होती है, तो उसे अपडेट माना जाता है.

डिफ़ॉल्ट रूप से, Content-Length, ETag, और Last-Modified हेडर की तुलना की जाती है.

ज़्यादा कुशल होने के लिए, खास तौर पर संभावित रूप से बड़े जवाबों के लिए वर्कबॉक्स, रिस्पॉन्स बॉडी की बाइट-टू-बाइट तुलना के बजाय हेडर वैल्यू का इस्तेमाल करता है

ब्रॉडकास्ट अपडेट का इस्तेमाल करना

लाइब्रेरी को StaleWhileRevalidate कैश मेमोरी की रणनीति के साथ इस्तेमाल करने के लिए बनाया गया है. ऐसा इसलिए है, क्योंकि इस रणनीति में कैश मेमोरी में सेव किया गया रिस्पॉन्स तुरंत देना शामिल होता है. हालांकि, यह कैश मेमोरी को एसिंक्रोनस रूप से अपडेट करने का तरीका भी देती है.

ध्यान दें:workbox-precaching के अपडेट के बारे में जानकारी ब्रॉडकास्ट करने के लिए, BroadcastUpdatePlugin का इस्तेमाल नहीं किया जा सकता. BroadcastUpdatePlugin यह पता लगाता है कि पहले कैश मेमोरी में सेव किए गए यूआरएल को नए कॉन्टेंट से बदल दिया गया है. workbox-precaching उन यूआरएल का इस्तेमाल करके कैश मेमोरी में एंट्री करता है जो कॉन्टेंट से मिलते-जुलते होते हैं. इससे यह कभी भी मौजूदा कैश एंट्री को ओवरराइट नहीं करेगा.

अपडेट ब्रॉडकास्ट करने के लिए, आपको रणनीति के विकल्पों में 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();
  }
});

ध्यान दें:DOMContentLoaded इवेंट से पहले, ब्राउज़र message इवेंट लिसनर को जोड़ें. इससे, ब्राउज़र को पेज लोड में ही मैसेज मिलने से पहले (आपके JavaScript कोड को चलने से पहले) मिल जाएगा, लेकिन DOMContentLoaded इवेंट के बाद नहीं.

मैसेज का फ़ॉर्मैट

आपके वेब ऐप्लिकेशन में 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)=> {...}
```
- विकल्प
  
  BroadcastCacheUpdateOptions ज़रूरी नहीं
- returns
  BroadcastCacheUpdate
notifyIfUpdated

void

यह दो जवाबों की तुलना करता है और अलग-अलग विंडो क्लाइंट को एक मैसेज (postMessage() के ज़रिए) भेजता है. इनमें से कोई भी जवाब ओपेक नहीं हो सकता.

पोस्ट किए गए मैसेज का फ़ॉर्मैट इस तरह होता है (इसमें payload को generatePayload विकल्प की मदद से अपनी पसंद के मुताबिक बनाया जा सकता है. इसके लिए, इंस्टेंस बनाया जाता है):
```
{
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}
```
notifyIfUpdated फ़ंक्शन ऐसा दिखता है:
```
(options: CacheDidUpdateCallbackParam)=> {...}
```
- विकल्प
  
  CacheDidUpdateCallbackParam
- returns
  Promise<void>
  
  अपडेट भेजने के बाद, यह समस्या हल हो जाती है.

BroadcastCacheUpdateOptions

प्रॉपर्टी

headersToCheck

स्ट्रिंग[] ज़रूरी नहीं है
notifyAllClients

बूलियन ज़रूरी नहीं
generatePayload

अमान्य ज़रूरी नहीं

generatePayload फ़ंक्शन ऐसा दिखता है:
```
(options: CacheDidUpdateCallbackParam)=> {...}
```
- विकल्प
  
  CacheDidUpdateCallbackParam
- returns
  रिकॉर्ड करें<stringany>

BroadcastUpdatePlugin

कैश मेमोरी में सेव किया गया कोई जवाब अपडेट होने पर, यह प्लगिन अपने-आप एक मैसेज ब्रॉडकास्ट करेगा.

प्रॉपर्टी

कंस्ट्रक्टर

void

पास किए गए विकल्पों के साथ workbox-broadcast-update.BroadcastUpdate इंस्टेंस बनाएं. साथ ही, प्लगिन के cacheDidUpdate कॉलबैक को शुरू करने पर, इसके notifyIfUpdated तरीके को कॉल करें.

constructor फ़ंक्शन ऐसा दिखता है:
```
(options?: BroadcastCacheUpdateOptions)=> {...}
```
- विकल्प
  
  BroadcastCacheUpdateOptions ज़रूरी नहीं
- returns
  BroadcastUpdatePlugin

तरीके

responsesAreSame()

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

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

पैरामीटर

firstResponse

जवाब
secondResponse

जवाब
headersToCheck

स्ट्रिंग[]

रिटर्न

boolean