अपडेट करें

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

इन्हें अपडेट किया जा सकता है:

  • ऐप्लिकेशन डेटा पर टैप करें.
  • डिवाइसों में ऐसेट पहले से ही कैश मेमोरी में सेव की गई हैं.
  • सर्विस वर्कर फ़ाइल या उसकी डिपेंडेंसी.
  • मेनिफ़ेस्ट मेटाडेटा.

चलिए, इन सभी एलिमेंट के लिए सबसे सही तरीके देखें.

डेटा अपडेट किया जा रहा है

IndexedDB में स्टोर किए गए डेटा को अपडेट करने के लिए, आपके पास Fetch, WebRTC या WebSockets API जैसे टूल का इस्तेमाल करने का विकल्प होगा. अगर आपके ऐप्लिकेशन में किसी ऑफ़लाइन सुविधा का इस्तेमाल किया जा सकता है, तो उस डेटा को रखना न भूलें जिसके साथ उन सुविधाओं को भी अपडेट किया जा सकता है.

काम करने वाले ब्राउज़र में डेटा सिंक करने के विकल्प होते हैं, न सिर्फ़ जब उपयोगकर्ता PWA खोलता है, बल्कि बैकग्राउंड में भी डेटा सिंक करता है. ये विकल्प हैं:

  • बैकग्राउंड सिंक: पूरे न हो पाने वाले अनुरोधों को सेव करता है. साथ ही, सर्विस वर्कर से सिंक करने की सुविधा का इस्तेमाल करके, फिर से कोशिश करता है.
  • समय-समय पर बैकग्राउंड में बैकग्राउंड सिंक: यह सुविधा, बैकग्राउंड में किसी खास समय पर, समय-समय पर डेटा सिंक करती है. इससे, ऐप्लिकेशन अपडेट किया गया डेटा उपलब्ध कराता है, भले ही उपयोगकर्ता ने अभी तक ऐप्लिकेशन को न खोला हो.
  • बैकग्राउंड फ़ेच: इसकी मदद से, PWA बंद होने पर भी बड़ी फ़ाइलें डाउनलोड की जाती हैं.
  • वेब पुश: सर्वर से एक मैसेज भेजता है, जो सर्विस वर्कर को सक्रिय कर देता है और उपयोगकर्ता को सूचना देता है. आम तौर पर, इसे 'पुश नोटिफ़िकेशन' कहा जाता है. इस एपीआई के लिए उपयोगकर्ता की अनुमति ज़रूरी है.

इन सभी एपीआई को सर्विस वर्कर के हिसाब से एक्ज़ीक्यूट किया जाता है. फ़िलहाल, यह सुविधा सिर्फ़ Chromium पर आधारित ब्राउज़र, Android, और डेस्कटॉप ऑपरेटिंग सिस्टम पर उपलब्ध है. जब आप इनमें से किसी एक API का उपयोग करते हैं, तो आप सर्विस वर्कर थ्रेड में कोड चला सकते हैं; उदाहरण के लिए, अपने सर्वर से डेटा डाउनलोड करने और अपना IndexedDB डेटा अपडेट करने के लिए.

ऐसेट अपडेट की जा रही हैं

एसेट को अपडेट करने में, ऐप्लिकेशन के इंटरफ़ेस को रेंडर करने के लिए इस्तेमाल की जाने वाली फ़ाइलों में किए जाने वाले सभी बदलाव शामिल होते हैं. जैसे, एचटीएमएल, सीएसएस, JavaScript, और इमेज. उदाहरण के लिए, आपके ऐप्लिकेशन के लॉजिक में बदलाव, आपके इंटरफ़ेस का हिस्सा इमेज या सीएसएस स्टाइलशीट.

पैटर्न अपडेट करें

यहां ऐप्लिकेशन के अपडेट मैनेज करने के कुछ सामान्य पैटर्न दिए गए हैं. हालांकि, आपके पास प्रोसेस को अपनी ज़रूरत के मुताबिक बनाने का विकल्प हमेशा होता है:

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

कब अपडेट करना है

एक और अच्छा तरीका यह है कि आप अपडेट देखने और उन्हें लागू करने का सही समय ढूंढें. यहां कुछ विकल्प दिए गए हैं:

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

लाइव अपडेट

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

लाइव अपडेट का मतलब है कि कैश मेमोरी में मौजूद ऐसेट के अपडेट होते ही, आपका PWA, मौजूदा लोड में ऐसेट की जगह ले लेता है. यह एक मुश्किल टास्क है, जिसके बारे में इस कोर्स में शामिल नहीं किया गया है. इस अपडेट को लागू करने में मदद करने वाले कुछ टूल, livereload-js और सीएसएस एसेट अपडेट CSSStyleSheet.replace() API हैं.

सर्विस वर्कर को अपडेट किया जा रहा है

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

इसके बाद ब्राउज़र सर्विस वर्कर का नया वर्शन इंस्टॉल करने की कोशिश करता है और नया सर्विस वर्कर सर्विस वर्कर चैप्टर में बताई गई प्रतीक्षा स्थिति में होगा. नए इंस्टॉलेशन से, नए सर्विस वर्कर के लिए install इवेंट चलेगा. अगर उस इवेंट हैंडलर में ऐसेट को कैश मेमोरी में सेव किया जा रहा है, तो ऐसेट भी फिर से कैश मेमोरी में सेव की जाएंगी.

सर्विस वर्कर में हुए बदलावों का पता लगाया जा रहा है

यह पता लगाने के लिए कि नया सर्विस वर्कर तैयार और इंस्टॉल है, हम सर्विस वर्कर रजिस्ट्रेशन से मिले updatefound इवेंट का इस्तेमाल करते हैं. यह इवेंट तब ट्रिगर होता है, जब नया सर्विस वर्कर इंस्टॉल करना शुरू करता है. हमें statechange इवेंट के साथ, इसकी स्थिति को installed में बदलने का इंतज़ार करना होगा; यह जानकारी देखें:

async function detectSWUpdate() {
  const registration = await navigator.serviceWorker.ready;

  registration.addEventListener("updatefound", event => {
    const newSW = registration.installing;
    newSW.addEventListener("statechange", event => {
      if (newSW.state == "installed") {
         // New service worker is installed, but waiting activation
      }
    });
  })
}

फ़ोर्स ओवरराइड

नया सर्विस वर्कर इंस्टॉल किया जाएगा, लेकिन डिफ़ॉल्ट रूप से चालू होने का इंतज़ार किया जा रहा है. इंतज़ार करना नए सर्विस वर्कर को ऐसे पुराने क्लाइंट का अधिग्रहण करने से रोकता है, जो हो सकता है कि नए वर्शन के साथ संगत न हों.

भले ही, हम इसका सुझाव नहीं देते हैं, लेकिन नया सर्विस वर्कर उस इंतज़ार की अवधि को छोड़कर, ऐक्टिवेशन को तुरंत शुरू कर सकता है.

self.addEventListener("install", event => {
   // forces a service worker to activate immediately
   self.skipWaiting();
  });

self.addEventListener("activate", event => {
  // when this SW becomes activated, we claim all the opened clients
  // they can be standalone PWA windows or browser tabs
  event.waitUntil(clients.claim());
});

controllerchange इवेंट तब फ़ायर होता है, जब मौजूदा पेज को कंट्रोल करने वाले सर्विस वर्कर बदल जाते हैं. उदाहरण के लिए, किसी नए वर्कर ने इंतज़ार करना छोड़ दिया है और नया सक्रिय वर्कर बन गया है.

navigator.serviceWorker.addEventListener("controllerchange", event => {
   // The service worker controller has changed
 });

मेटाडेटा अपडेट किया जा रहा है

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

इसका जवाब प्लैटफ़ॉर्म पर निर्भर करता है. आइए, उपलब्ध विकल्पों पर नज़र डालते हैं.

iOS, iPadOS, और Android ब्राउज़र पर Safari

इन प्लैटफ़ॉर्म पर, नया मेनिफ़ेस्ट मेटाडेटा पाने के लिए, ब्राउज़र से ऐप्लिकेशन को फिर से इंस्टॉल करना होता है.

WebAPK के साथ Android पर Google Chrome

जब उपयोगकर्ता Google Chrome का इस्तेमाल करके, WebAPK के साथ आपका PWA इंस्टॉल करेगा (Chrome के ज़्यादातर PWA इंस्टॉलेशन), एल्गोरिदम के आधार पर अपडेट का पता लगाकर उसे लागू किया जाएगा. इस मेनिफ़ेस्ट अपडेट लेख में ज़्यादा जानकारी देखें.

इस प्रोसेस के बारे में कुछ अतिरिक्त जानकारी:

अगर उपयोगकर्ता आपका PWA नहीं खोलता, तो इसका WebAPK अपडेट नहीं होगा. अगर सर्वर, मेनिफ़ेस्ट फ़ाइल के साथ जवाब नहीं देता (404 की गड़बड़ी है), तो Chrome कम से कम 30 दिनों तक अपडेट की जांच नहीं करेगा, भले ही उपयोगकर्ता ने PWA खोला हो.

"अपडेट की ज़रूरत है" फ़्लैग का स्टेटस देखने और अपडेट का अनुरोध करने के लिए, Android डिवाइस में Chrome में about:webapks पर जाएं. टूल और डीबग चैप्टर में, डीबग करने वाले इस टूल के बारे में ज़्यादा पढ़ा जा सकता है.

WebAPK के साथ Android पर Samsung इंटरनेट

यह प्रक्रिया Chrome वर्शन जैसी है. इस मामले में, अगर PWA मेनिफ़ेस्ट को अपडेट करना ज़रूरी है, तो अगले 24 घंटों के दौरान अपडेट किए गए WebAPK को छोटा करने के बाद, वाई-फ़ाई पर WebAPK अपडेट हो जाएगा.

डेस्कटॉप पर Google Chrome और Microsoft Edge

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

जब चुनी गई प्रॉपर्टी अपडेट की जाती हैं, तब सभी विंडो बंद होने के बाद प्रॉपर्टी अपडेट ट्रिगर होगी.

उपयोगकर्ता को सूचना देना

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

उपयोगकर्ता को सूचित करने के लिए, ये विकल्प उपलब्ध हैं:

  • स्क्रीन पर सूचना रेंडर करने के लिए, डीओएम या कैनवस एपीआई का इस्तेमाल करें.
  • Web Notifications API का इस्तेमाल करें. यह एपीआई, ऑपरेटिंग सिस्टम में सूचना जनरेट करने के लिए पुश की अनुमति का हिस्सा है. इसका इस्तेमाल करने के लिए आपको वेब पुश की अनुमति का अनुरोध करना होगा, भले ही आप अपने सर्वर से पुश मैसेज सेवा प्रोटोकॉल का इस्तेमाल न करते हों. अगर PWA का इस्तेमाल नहीं किया जाता है, तो हमारे पास सिर्फ़ यही विकल्प होता है.
  • Badging API का इस्तेमाल करके बताएं कि PWA के इंस्टॉल किए गए आइकॉन में अपडेट उपलब्ध हैं

डीओएम में अपडेट की सूचना दिखाई गई है..

बैजिंग एपीआई के बारे में ज़्यादा जानकारी

Badging API का इस्तेमाल करके, अपने PWA के आइकॉन को बैज नंबर या काम करने वाले ब्राउज़र पर बैज डॉट के तौर पर मार्क किया जा सकता है. बैज डॉट, इंस्टॉल किए गए आइकॉन के अंदर एक छोटा सा निशान होता है. इससे पता चलता है कि ऐप्लिकेशन में कोई चीज़ आपका इंतज़ार कर रही है.

आठ सूचनाओं वाले Twitter का उदाहरण और दूसरे ऐप्लिकेशन में फ़्लैग टाइप बैज दिख रहा है.

बैज नंबर सेट करने के लिए, आपको navigator ऑब्जेक्ट पर setAppBadge(count) को कॉल करना होगा. जब आपको पता हो कि उपयोगकर्ता को अलर्ट करने के लिए कोई अपडेट है, तब आप विंडो या सर्विस वर्कर के संदर्भ से ऐसा कर सकते हैं.

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

बैज मिटाने के लिए, आपको उसी ऑब्जेक्ट पर clearAppBadge() को कॉल करना होगा:

navigator.clearAppBadge();

रिसॉर्स