कुछ मामलों में सर्विस वर्कर को किसी विशेष घटना के बारे में सूचित करने के लिए इसे नियंत्रित करता है. उदाहरण के लिए:
- सर्विस वर्कर का नया वर्शन इंस्टॉल होने पर, पेज को इसकी सूचना देना, ताकि नई सुविधाओं को ऐक्सेस करने के लिए, उपयोगकर्ता को "रीफ़्रेश करने के लिए अपडेट करें" बटन दिखा सकता है तुरंत.
- उपयोगकर्ता को सर्विस वर्कर की ओर से, कैश मेमोरी में सेव किए गए डेटा में हुए बदलाव के बारे में बताना यह दिखाता है कि: "यह ऐप्लिकेशन अब ऑफ़लाइन काम करने के लिए तैयार है" या " कॉन्टेंट उपलब्ध है".
हम ऐसे उपयोग के मामलों को कॉल करेंगे, जहां सर्विस वर्कर को संचार "ब्रॉडकास्ट अपडेट" शुरू करने के लिए इस पेज पर जाएं. इस गाइड में हम अलग-अलग पेज और सर्विस वर्कर के बीच इस प्रकार के संचार को लागू करने के लिए, ब्राउज़र एपीआई और Workbox लाइब्रेरी.
प्रोडक्शन केस
टिंडर
सुनने के लिए Tinder PWA workbox-window का इस्तेमाल करता है
पेज से महत्वपूर्ण सर्विस वर्कर लाइफ़साइकल के क्षण ("इंस्टॉल किए गए", "कंट्रोल्ड" और
"चालू है"). इस तरह जब कोई नया सर्विस वर्कर काम करता है, तो वह "अपडेट उपलब्ध है" दिखाता है
बैनर, ताकि वे PWA को रीफ़्रेश कर सकें और नई सुविधाओं को ऐक्सेस कर सकें:
स्कूश
Squoosh PWA में, जब सर्विस वर्कर ने सभी ज़रूरी डेटा को कैश मेमोरी में सेव कर लिया हो ऐसेट, जो ऑफ़लाइन काम करने के लिए तैयार हैं, ये "ऑफ़लाइन काम करने के लिए तैयार" दिखाने के लिए पेज पर एक मैसेज भेजती हैं टोस्ट डालें, जिससे उपयोगकर्ता को इस सुविधा के बारे में जानकारी मिले:
Workbox का इस्तेमाल करना
सर्विस वर्कर के लाइफ़साइकल इवेंट सुनें
workbox-window, सर्विस वर्कर के ज़रूरी लाइफ़साइकल को सुनने के लिए आसान इंटरफ़ेस उपलब्ध कराता है
इवेंट.
हुड के तहत, लाइब्रेरी क्लाइंट-साइड एपीआई का इस्तेमाल इस तरह करती है
updatefound
और राज्य में बदलाव हो गया
और यह workbox-window ऑब्जेक्ट में हाई लेवल के इवेंट लिसनर की सुविधा देता है. इससे
उपयोगकर्ता इन इवेंट का इस्तेमाल कर सकते हैं.
नीचे दिए गए पेज कोड से, सर्विस वर्कर का नया वर्शन इंस्टॉल होने पर, आपको इसका पता लगाने में मदद मिलती है, ताकि आप उपयोगकर्ता को इसकी जानकारी दे सकें:
const wb = new Workbox('/sw.js');
wb.addEventListener('installed', (event) => {
if (event.isUpdate) {
// Show "Update App" banner
}
});
wb.register();
कैश डेटा में हुए बदलावों की जानकारी पेज को दें
वर्कबॉक्स पैकेज
workbox-broadcast-update
विंडो क्लाइंट को सूचित करने का एक मानक तरीका उपलब्ध कराता है कि कैश मेमोरी में सेव किया गया जवाब अपडेट कर दिया गया है. यह है
आम तौर पर, StaleWhileReValidation के साथ इस्तेमाल किए जाते हैं
रणनीति.
अपडेट ब्रॉडकास्ट करने के लिए, यहां दिए गए रणनीति के विकल्पों में 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 की मदद से काम करने वाली सुविधाएं आपकी ज़रूरतों के हिसाब से काफ़ी नहीं हैं, तो इस ब्राउज़र का इस्तेमाल करें "ब्रॉडकास्ट अपडेट" लागू करने के लिए एपीआई:
ब्रॉडकास्ट चैनल एपीआई
सर्विस वर्कर एक ब्रॉडकास्टचैनल बनाता है
ऑब्जेक्ट करता है और भेजना शुरू करता है
उसे मैसेज कर सकता है. इन मैसेज को पाने में दिलचस्पी रखने वाला कोई भी संदर्भ (जैसे, पेज) इंस्टैंशिएट कर सकता है:
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 इस एपीआई के साथ काम नहीं करता.
क्लाइंट 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,
]);
ऐसा पेज जो "मैसेज पर मैसेज" लागू करके, मैसेज सुनता है उस पोर्ट पर हैंडलर:
// 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 को लागू करना ज़्यादा मुश्किल हो सकता है. हालांकि, यह
सभी प्रमुख ब्राउज़र पर काम करता है.
अगले चरण
इस गाइड में हमने विंडों टू सर्विस वर्कर कम्यूनिकेशन के एक खास मामले के बारे में बताया है: "ब्रॉडकास्ट अपडेट" में दिया गया हो. यहां उदाहरण के तौर पर, अहम सर्विस वर्कर की बात सुनी जा रही है लाइफ़साइकल इवेंट बनाना और कॉन्टेंट या कैश मेमोरी में सेव किए गए डेटा में हुए बदलावों के बारे में पेज पर बताना. आप सोच सकते हैं इस्तेमाल के और भी दिलचस्प मामलों में, जहां सर्विस वर्कर लगातार पेज से बातचीत करते हैं, इससे पहले कोई मैसेज नहीं मिला होगा.
विंडो और सर्विस वर्कर के कम्यूनिकेशन के ज़्यादा पैटर्न के लिए, यह लेख पढ़ें:
- इंपेरेटिव कैश मेमोरी गाइड: सर्विस वर्कर को पेज से कैश मेमोरी में सेव किए गए संसाधनों को पहले से सेव करना (उदाहरण के लिए, प्रीफ़ेच करने की स्थिति में).
- दो-तरफ़ा बातचीत: किसी सर्विस वर्कर को टास्क सौंपना (उदाहरण के लिए, बहुत ज़्यादा डाउनलोड करने की सुविधा मिलती है).