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

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

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

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

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

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

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

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

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

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

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

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

ध्यान दें:BroadcastUpdatePlugin का इस्तेमाल, workbox-precaching के अपडेट के बारे में जानकारी ब्रॉडकास्ट करने के लिए नहीं किया जा सकता. 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() एपीआई का इस्तेमाल करता है.

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

प्रॉपर्टी

कंस्ट्रक्टर

अमान्य

किसी खास channelName के साथ BroadcastCacheUpdate इंस्टेंस बनाएं, ताकि

constructor फ़ंक्शन इस तरह दिखता है:
```
(options?: BroadcastCacheUpdateOptions) => {...}
```
- विकल्प
  
  BroadcastCacheUpdateOptions optional
- returns
  BroadcastCacheUpdate
notifyIfUpdated

अमान्य

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

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

BroadcastCacheUpdateOptions

प्रॉपर्टी

headersToCheck

string[] ज़रूरी नहीं
notifyAllClients

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

void ज़रूरी नहीं

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

BroadcastUpdatePlugin

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

प्रॉपर्टी

कंस्ट्रक्टर

अमान्य

दिए गए विकल्पों के साथ 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

string[]

रिटर्न

बूलियन