सर्विस वर्कर वाले पेजों पर अपडेट ब्रॉडकास्ट करें

Andrew Guan

Demián Renzulli

कुछ स्थितियों में ऐसा हो सकता है कि सर्विस वर्कर को किसी खास इवेंट की सूचना देने के लिए, इसे कंट्रोल किए जा रहे किसी भी ऐक्टिव टैब से इंटरैक्ट करना पड़े. उदाहरण के लिए:

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

हम इस्तेमाल के ऐसे मामलों को कॉल करेंगे जहां सर्विस वर्कर को कम्यूनिकेशन "ब्रॉडकास्ट अपडेट" शुरू करने के लिए, पेज से मैसेज पाने की ज़रूरत नहीं होती. इस गाइड में, हम पेज और सर्विस वर्कर के बीच इस तरह के कम्यूनिकेशन को लागू करने के अलग-अलग तरीकों की समीक्षा करेंगे. इसके लिए, हम स्टैंडर्ड ब्राउज़र एपीआई और Workbox लाइब्रेरी का इस्तेमाल करेंगे.

प्रोडक्शन केस

टिंडर

Tinder PWA, पेज से ("इंस्टॉल किया गया", "कंट्रोल किया गया", और "चालू किया गया") से सर्विस वर्कर के लाइफ़साइकल के अहम पलों को सुनने के लिए, workbox-window का इस्तेमाल करता है. इस तरह, जब कोई नया सर्विस वर्कर इस्तेमाल किया जाता है, तो यह "अपडेट उपलब्ध है" बैनर दिखाता है, ताकि वह PWA को रीफ़्रेश कर सके और नई सुविधाओं को ऐक्सेस कर सके:

स्क्वॉश

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-broadcast-update, विंडो क्लाइंट को यह बताने का एक सामान्य तरीका देता है कि कैश मेमोरी में सेव किए गए रिस्पॉन्स को अपडेट कर दिया गया है. आम तौर पर, इसका इस्तेमाल Stale बिलकुल दूर से पुष्टि करने की रणनीति के साथ किया जाता है.

अपडेट ब्रॉडकास्ट करने के लिए, सर्विस वर्कर साइड में मौजूद रणनीति के विकल्पों में 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 ऑब्जेक्ट बनाता है और उस को मैसेज भेजना शुरू करता है. इस तरह के मैसेज पाने में दिलचस्पी रखने वाला कोई भी संदर्भ (जैसे कि पेज) 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 ऑब्जेक्ट का कलेक्शन बनाता है.

फ़ोकस किए गए आखिरी टैब पर मैसेज भेजने के लिए, नीचे दिए गए सर्विस वर्कर कोड का इस्तेमाल करें:

// 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 को लागू करना ज़्यादा मुश्किल हो सकता है. हालांकि, यह सभी मुख्य ब्राउज़र पर काम करता है.

अगले चरण

इस गाइड में, हमने विंडो से सर्विस वर्कर कम्यूनिकेशन के एक खास मामले के बारे में जाना: "ब्रॉडकास्ट अपडेट". इसमें एक्सप्लोर किए गए उदाहरणों में, ज़रूरी सर्विस वर्कर लाइफ़साइकल इवेंट के बारे में सुनना और कॉन्टेंट या कैश मेमोरी में सेव किए गए डेटा में हुए बदलावों के बारे में पेज पर सूचना देना शामिल है. इससे आपको इस्तेमाल के ज़्यादा दिलचस्प स्थितियों के बारे में पता चलेगा, जहां सर्विस वर्कर पहले से कोई मैसेज पाए बिना, पेज से संपर्क करता है.

विंडो और सर्विस वर्कर कम्यूनिकेशन के ज़्यादा पैटर्न के लिए, यहां जाएं:

• इंपेरेटिव कैश मेमोरी गाइड: किसी सर्विस वर्कर को पेज से रिसॉर्स को पहले से कैश मेमोरी में सेव करने के लिए कॉल करना (उदाहरण के लिए, प्रीफ़ेच करने की स्थितियों में).
• दो-तरफ़ा बातचीत: किसी सर्विस वर्कर को कोई काम सौंपना (उदाहरण के लिए, बहुत ज़्यादा डाउनलोड करना) और पेज को उसकी प्रोग्रेस के बारे में जानकारी देना.

ज़्यादा रिसॉर्स

• वर्कबॉक्स-विंडो
• workbox-broadcast-अपडेट
• वर्कबॉक्स 4: वर्कबॉक्स-विंडो का इस्तेमाल करके रीफ़्रेश-टू-अपडेट-वर्शन फ़्लो लागू करना