कुछ मामलों में, सर्विस वर्कर को किसी इवेंट के बारे में बताने के लिए, अपने कंट्रोल में मौजूद किसी भी चालू टैब से पहले से ही संपर्क करना पड़ सकता है. उदाहरण के लिए:
- जब सर्विस वर्कर का नया वर्शन इंस्टॉल हो जाता है, तो पेज को इसकी सूचना देना. इससे पेज उपयोगकर्ता को "रीफ़्रेश करके अपडेट करें" बटन दिखा सकता है, ताकि उपयोगकर्ता तुरंत नई सुविधाओं को ऐक्सेस कर सके.
- कैश मेमोरी में सेव किए गए डेटा में हुए बदलाव के बारे में उपयोगकर्ता को बताना. इसके लिए, कोई संकेत दिखाना. जैसे: "ऐप्लिकेशन अब ऑफ़लाइन काम करने के लिए तैयार है" या "कॉन्टेंट का नया वर्शन उपलब्ध है".
हम इस तरह के इस्तेमाल के मामलों को "ब्रॉडकास्ट अपडेट" कहेंगे. इनमें, सर्विस वर्कर को बातचीत शुरू करने के लिए, पेज से मैसेज पाने की ज़रूरत नहीं होती. इस गाइड में, हम स्टैंडर्ड ब्राउज़र एपीआई और Workbox लाइब्रेरी का इस्तेमाल करके, पेजों और सर्विस वर्कर के बीच इस तरह के कम्यूनिकेशन को लागू करने के अलग-अलग तरीकों की समीक्षा करेंगे.
प्रॉडक्शन के मामले
Tinder
Tinder PWA, पेज से सर्विस वर्कर के लाइफ़साइकल के अहम मोमेंट ("इंस्टॉल किया गया", "कंट्रोल किया गया", और"चालू किया गया") के बारे में सुनने के लिए, workbox-window का इस्तेमाल करता है. इस तरह, जब कोई नया सर्विस वर्कर काम करना शुरू करता है, तो वह "अपडेट उपलब्ध है"
बैनर दिखाता है. इससे उपयोगकर्ता PWA को रीफ़्रेश कर सकते हैं और नई सुविधाओं को ऐक्सेस कर सकते हैं:
Squoosh
Squoosh PWA में, जब सर्विस वर्कर ने ऑफ़लाइन काम करने के लिए ज़रूरी सभी ऐसेट को कैश मेमोरी में सेव कर लिया है, तो वह पेज को एक मैसेज भेजता है. इससे पेज, "ऑफ़लाइन काम करने के लिए तैयार है" सूचना दिखाता है. इससे उपयोगकर्ता को इस सुविधा के बारे में पता चलता है:
Workbox का इस्तेमाल करना
सर्विस वर्कर के लाइफ़साइकल इवेंट सुनना
workbox-window सर्विस वर्कर के लाइफ़साइकल के अहम इवेंट सुनने के लिए, एक आसान इंटरफ़ेस उपलब्ध कराता है.
यह लाइब्रेरी, क्लाइंट-साइड एपीआई का इस्तेमाल करती है. जैसे,
updatefound
और statechange
साथ ही, workbox-window ऑब्जेक्ट में, ज़्यादा लेवल के इवेंट लिसनर उपलब्ध कराती है. इससे
उपयोगकर्ता के लिए इन इवेंट का इस्तेमाल करना आसान हो जाता है.
पेज के इस कोड से, हर बार सर्विस वर्कर का नया वर्शन इंस्टॉल होने का पता लगाया जा सकता है. इससे उपयोगकर्ता को इसकी सूचना दी जा सकती है:
const wb = new Workbox('/sw.js');
wb.addEventListener('installed', (event) => {
if (event.isUpdate) {
// Show "Update App" banner
}
});
wb.register();
कैश मेमोरी में सेव किए गए डेटा में हुए बदलावों के बारे में पेज को सूचना देना
Workbox पैकेज
workbox-broadcast-update
, विंडो क्लाइंट को यह सूचना देने का एक स्टैंडर्ड तरीका उपलब्ध कराता है कि कैश मेमोरी में सेव किया गया जवाब अपडेट हो गया है. इसका इस्तेमाल
आम तौर पर, 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(),
],
})
);
अपने वेब ऐप्लिकेशन में, इन इवेंट को इस तरह सुना जा सकता है:
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();
}
});
ब्राउज़र एपीआई का इस्तेमाल करना
अगर Workbox की उपलब्ध कराई गई सुविधाएं आपकी ज़रूरतों के लिए काफ़ी नहीं हैं, तो "ब्रॉडकास्ट अपडेट" लागू करने के लिए, ब्राउज़र के इन एपीआई का इस्तेमाल करें:
Broadcast Channel API
सर्विस वर्कर, BroadcastChannel
ऑब्जेक्ट बनाता है और उसे मैसेज भेजने
लगता है. कोई भी कॉन्टेक्स्ट (जैसे, पेज) इन मैसेज को पाने के लिए, BroadcastChannel ऑब्जेक्ट को इंस्टैंशिएट कर सकता है और मैसेज पाने के लिए, मैसेज हैंडलर को लागू कर सकता है.
जब कोई नया सर्विस वर्कर इंस्टॉल हो जाता है, तो पेज को इसकी सूचना देने के लिए, यह कोड इस्तेमाल करें:
// Create Broadcast Channel to send messages to the page
const broadcast = new BroadcastChannel('sw-update-channel');
self.addEventListener('install', function (event) {
// Inform the page every time a new service worker is installed
broadcast.postMessage({type: 'CRITICAL_SW_UPDATE'});
});
sw-update-channel की सदस्यता लेकर, पेज इन इवेंट को सुनता है:
// Create Broadcast Channel and listen to messages sent to it
const broadcast = new BroadcastChannel('sw-update-channel');
broadcast.onmessage = (event) => {
if (event.data && event.data.type === 'CRITICAL_SW_UPDATE') {
// Show "update to refresh" banner to the user.
}
};
यह एक आसान तरीका है, लेकिन इसकी सीमा ब्राउज़र का साथ है. इस एपीआई को फ़िलहाल Safari पर इस्तेमाल नहीं किया जा सकता.
Client API
Client API, Client ऑब्जेक्ट की किसी कलेक्शन पर बार-बार कार्रवाई करके, सर्विस वर्कर से कई क्लाइंट के साथ कम्यूनिकेट करने का एक आसान तरीका उपलब्ध कराता है.
हाल ही में फ़ोकस किए गए टैब को मैसेज भेजने के लिए, सर्विस वर्कर का यह कोड इस्तेमाल करें:
// Obtain an array of Window client objects
self.clients.matchAll(options).then(function (clients) {
if (clients && clients.length) {
// Respond to last focused tab
clients[0].postMessage({type: 'MSG_ID'});
}
});
पेज, इन मैसेज को इंटरसेप्ट करने के लिए, मैसेज हैंडलर को लागू करता है:
// Listen to messages
navigator.serviceWorker.onmessage = (event) => {
if (event.data && event.data.type === 'MSG_ID') {
// Process response
}
};
Client API, कई चालू टैब पर जानकारी ब्रॉडकास्ट करने जैसे मामलों के लिए एक बेहतरीन विकल्प है. यह एपीआई सभी मुख्य ब्राउज़र पर काम करता है, लेकिन इसके सभी तरीके काम नहीं करते. इसका इस्तेमाल करने से पहले, ब्राउज़र के साथ इसकी काम करने की क्षमता की जांच करें.
मैसेज चैनल
मैसेज चैनल के लिए, शुरुआती कॉन्फ़िगरेशन का एक चरण ज़रूरी है. इसके लिए, पेज से सर्विस वर्कर को एक पोर्ट पास करना होता है, ताकि उनके बीच कम्यूनिकेशन चैनल बनाया जा सके. पेज, MessageChannel ऑब्जेक्ट को इंस्टैंशिएट करता है और postMessage() इंटरफ़ेस के ज़रिए, सर्विस वर्कर को एक पोर्ट पास करता है:
const messageChannel = new MessageChannel();
// Init port
navigator.serviceWorker.controller.postMessage({type: 'PORT_INITIALIZATION'}, [
messageChannel.port2,
]);
पेज, उस पोर्ट पर "onmessage" हैंडलर को लागू करके मैसेज सुनता है:
// Listen to messages
messageChannel.port1.onmessage = (event) => {
// Process message
};
सर्विस वर्कर को पोर्ट मिलता है और वह उसका रेफ़रंस सेव करता है:
// Initialize
let communicationPort;
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'PORT_INITIALIZATION') {
communicationPort = event.ports[0];
}
});
इसके बाद, वह पोर्ट के रेफ़रंस में postMessage() को कॉल करके, पेज को मैसेज भेज सकता है:
// Communicate
communicationPort.postMessage({type: 'MSG_ID' });
MessageChannel पोर्ट को शुरू करने की ज़रूरत की वजह से, इसे लागू करना ज़्यादा मुश्किल हो सकता है. हालांकि, यह
सभी मुख्य ब्राउज़र पर काम करता है.
अगले चरण
इस गाइड में, हमने विंडो से सर्विस वर्कर के कम्यूनिकेशन के एक खास मामले के बारे में बताया है: "ब्रॉडकास्ट अपडेट". इसमें, सर्विस वर्कर के लाइफ़साइकल के अहम इवेंट सुनने और कॉन्टेंट या कैश मेमोरी में सेव किए गए डेटा में हुए बदलावों के बारे में पेज को सूचना देने जैसे उदाहरण शामिल हैं. इस्तेमाल के और भी दिलचस्प मामले हो सकते हैं. इनमें, सर्विस वर्कर को पहले से कोई मैसेज मिले बिना, वह पेज से पहले से ही कम्यूनिकेट करता है.
विंडो और सर्विस वर्कर के कम्यूनिकेशन के अन्य पैटर्न के बारे में जानने के लिए, यह देखें:
- ज़रूरी कैश मेमोरी में सेव करने की सुविधा के बारे में गाइड: संसाधनों को पहले से कैश मेमोरी में सेव करने के लिए, पेज से सर्विस वर्कर को कॉल करना. उदाहरण के लिए, प्रीफ़ेचिंग के मामलों में.
- दोनों तरफ़ से कम्यूनिकेशन: किसी टास्क को सर्विस वर्कर को सौंपना. उदाहरण के लिए, बड़ा डाउनलोड और पेज को प्रोग्रेस के बारे में जानकारी देना.