कैश मेमोरी में सेव की गई एंट्री के साथ अनुरोधों का जवाब देने पर, अनुरोधों को तेज़ी से पूरा किया जा सकता है. हालांकि, इसकी एक समस्या यह है कि उपयोगकर्ताओं को पुराना डेटा दिख सकता है.
workbox-broadcast-update
पैकेज, विंडो क्लाइंट को सूचना देने का एक स्टैंडर्ड तरीका उपलब्ध कराता है कि कैश मेमोरी में सेव किया गया जवाब अपडेट हो गया है. इसका इस्तेमाल आम तौर पर StaleWhileRevalidate
रणनीति के साथ किया जाता है.
जब भी उस रणनीति का "फिर से पुष्टि करें" चरण, नेटवर्क से ऐसा जवाब पाता है जो पहले से कैश मेमोरी में सेव किए गए जवाब से अलग होता है, तो यह मॉड्यूल मौजूदा सर्विस वर्कर के दायरे में आने वाले सभी विंडो क्लाइंट को एक मैसेज भेजेगा. यह मैसेज, postMessage()
के ज़रिए भेजा जाएगा.
विंडो क्लाइंट, अपडेट सुन सकते हैं और ज़रूरी कार्रवाई कर सकते हैं. जैसे, उपयोगकर्ता को अपने-आप मैसेज दिखाकर, उन्हें अपडेट उपलब्ध होने की जानकारी देना.
अपडेट कैसे तय किए जाते हैं?
कैश मेमोरी में सेव किए गए और नए
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()
एपीआई का इस्तेमाल करता है.
बेहतर परफ़ॉर्मेंस के लिए, रिस्पॉन्स बॉडी की तुलना नहीं की जाती. सिर्फ़ रिस्पॉन्स के खास हेडर की जांच की जाती है.
प्रॉपर्टी
-
कंस्ट्रक्टर
अमान्य
किसी खास
channelName
के साथ BroadcastCacheUpdate इंस्टेंस बनाएं, ताकिconstructor
फ़ंक्शन इस तरह दिखता है:(options?: BroadcastCacheUpdateOptions) => {...}
-
विकल्प
BroadcastCacheUpdateOptions optional
-
returns
-
-
notifyIfUpdated
अमान्य
दो जवाबों की तुलना करता है और सभी विंडो क्लाइंट को (
postMessage()
के ज़रिए) एक संदेश भेजता है, अगर अलग-अलग जवाब हो सकते हैं. दोनों में से कोई भी जवाब ओपेक.पोस्ट किए गए मैसेज का फ़ॉर्मैट यहां दिया गया है. इसमें
payload
कोgeneratePayload
विकल्प की मदद से पसंद के मुताबिक बनाया जा सकता है. इस विकल्प का इस्तेमाल करके ही इंस्टेंस बनाया जाता है:{ type: 'CACHE_UPDATED', meta: 'workbox-broadcast-update', payload: { cacheName: 'the-cache-name', updatedURL: 'https://example.com/' } }
notifyIfUpdated
फ़ंक्शन इस तरह दिखता है:(options: CacheDidUpdateCallbackParam) => {...}
-
विकल्प
-
returns
प्रॉमिस<void>
अपडेट भेजे जाने के बाद, यह समस्या हल हो जाती है.
-
BroadcastCacheUpdateOptions
प्रॉपर्टी
-
headersToCheck
string[] ज़रूरी नहीं
-
notifyAllClients
बूलियन ज़रूरी नहीं
-
generatePayload
void ज़रूरी नहीं
generatePayload
फ़ंक्शन इस तरह दिखता है:(options: CacheDidUpdateCallbackParam) => {...}
-
विकल्प
-
returns
रिकॉर्ड करें<string किसी>
-
BroadcastUpdatePlugin
कैश मेमोरी में सेव किए गए जवाब का इस्तेमाल करने पर, यह प्लगिन अपने-आप मैसेज ब्रॉडकास्ट करेगा को अपडेट किया जाता है.
प्रॉपर्टी
-
कंस्ट्रक्टर
अमान्य
दिए गए विकल्पों के साथ
workbox-broadcast-update.BroadcastUpdate
इंस्टेंस बनाएं और जब भी प्लग इन काcacheDidUpdate
कॉलबैक फ़ंक्शन शुरू किया जाए, तब उसकेnotifyIfUpdated
तरीके को कॉल करें.constructor
फ़ंक्शन इस तरह दिखता है:(options?: BroadcastCacheUpdateOptions) => {...}
-
विकल्प
BroadcastCacheUpdateOptions ज़रूरी नहीं
-
returns
-
तरीके
responsesAreSame()
workbox-broadcast-update.responsesAreSame(
firstResponse: Response,
secondResponse: Response,
headersToCheck: string[],
)
दो Response's
दिए जाने पर, कई हेडर वैल्यू की तुलना करके पता चलता है कि वे
एक जैसी है या नहीं.
पैरामीटर
-
firstResponse
जवाब
-
secondResponse
जवाब
-
headersToCheck
string[]
रिटर्न
-
बूलियन