आपका प्रगतिशील वेब ऐप

पिछला अपडेट: 30-04-2019

वेब ऐप्लिकेशन, प्रगतिशील वेब ऐप्लिकेशन कैसे बनता है?

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

तेज़ और भरोसेमंद

हर वेब अनुभव तेज़ होना चाहिए और यह खास तौर पर प्रोग्रेसिव वेब ऐप्लिकेशन के लिए सही है. तेज़ वह समय होता है जो स्क्रीन पर काम की सामग्री पाने और इंटरैक्टिव अनुभव देने में लगता है.

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

इंस्टॉल किया जा सकता है

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

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

मोबाइल और एएमपी; डेस्कटॉप

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

आप क्या बनाते हैं

इस कोडलैब में आप PWA तकनीक का इस्तेमाल करके मौसम के बारे में बताने वाला वेब ऐप्लिकेशन बनाने जा रहे हैं. आपका ऐप्लिकेशन:

रिस्पॉन्सिव डिज़ाइन का इस्तेमाल करें, ताकि वह डेस्कटॉप या मोबाइल पर काम करे.
तेज़ी से काम करें. चलाए जाने के लिए ज़रूरी ऐप्लिकेशन रिसॉर्स (एचटीएमएल, सीएसएस, JavaScript, इमेज) को पहले से कैश करने और रनटाइम के दौरान मौसम से जुड़े डेटा को कैश मेमोरी में सेव करने के लिए, किसी सर्विस वर्कर का इस्तेमाल करें. इससे, आपकी परफ़ॉर्मेंस बेहतर होगी.
इंस्टॉल किए जा सकने वाले, वेब ऐप्लिकेशन मेनिफ़ेस्ट का और beforeinstallprompt इवेंट का इस्तेमाल करके उपयोगकर्ता को यह बताएं कि इसे इंस्टॉल किया जा सकता है #39.

आप क्या #39;जानेंगे

वेब ऐप्लिकेशन मेनिफ़ेस्ट बनाने और जोड़ने का तरीका
आसान ऑफ़लाइन अनुभव देने का तरीका
पूरी तरह से ऑफ़लाइन अनुभव देने का तरीका
अपने ऐप्लिकेशन को इंस्टॉल करने लायक बनाने का तरीका

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

आपको क्या चाहिए

Chrome का नया वर्शन (74 या इसके बाद का वर्शन). PWA सभी ब्राउज़र में काम करते हैं, लेकिन हम ब्राउज़र के लेवल पर क्या हो रहा है, इसे समझने के लिए Chrome डेवलपर की कुछ सुविधाओं का इस्तेमाल करेंगे. साथ ही, इंस्टॉल के अनुभव की जांच करने के लिए हम इसका इस्तेमाल करेंगे.
एचटीएमएल, सीएसएस, JavaScript, और Chrome DevTools की जानकारी.

Dark Sky API के लिए कुंजी पाना

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

एपीआई कुंजी के लिए रजिस्टर करना

पुष्टि करना कि आपकी एपीआई कुंजी ठीक से काम कर रही है

यह जांचने के लिए कि आपकी एपीआई कुंजी ठीक से काम कर रही है, डार्कस्काई एपीआई को एचटीटीपी अनुरोध करें. DARKSKY_API_KEY को अपनी एपीआई कुंजी से बदलने के लिए, नीचे दिए गए यूआरएल को अपडेट करें. अगर सबकुछ ठीक है, तो आपको न्यूयॉर्क का मौसम का हाल का अनुमान देखना चाहिए.

https://api.darksky.net/forecast/DARKSKY_API_KEY/40.7720232,-73.9732319

चेतावनी: अपनी एपीआई कुंजियों को उसी तरह सुरक्षित रखें जैसे आप अपने पासवर्ड को सुरक्षित रखते हैं. आपको कभी भी अपनी API (एपीआई) कुंजी की जांच किसी सोर्स रिपॉज़िटरी में नहीं करनी चाहिए, उसे ऑनलाइन पोस्ट नहीं करना चाहिए या शेयर करना चाहिए. अगर आपकी API (एपीआई) कुंजी का गलत तरीके से इस्तेमाल किया जाता है, तो इसकी वजह से खाता निरस्त हो सकता है या इसके अलावा कोई और कार्रवाई हो सकती है.

कोड पाएं

हमने इस प्रोजेक्ट के लिए अपनी ज़रूरत की हर चीज़ को Git repo में भेज दिया है. शुरू करने के लिए, आपको कोड अपनी ज़रूरत के हिसाब से बनाना होगा. इसके बाद, इसे अपने पसंदीदा डेवलपमेंट एनवायरमेंट में खोलना होगा. इस कोडलैब के लिए, हम ग्लिच का इस्तेमाल करने का सुझाव देते हैं.

खास तौर पर सुझाया गया: रेपो इंपोर्ट करने के लिए ग्लिच का इस्तेमाल करना

इस कोडलैब के ज़रिए, ग्लिच कोड इस्तेमाल करने का सुझाव दिया जाता है.

नया ब्राउज़र टैब खोलें और https://glitch.com पर जाएं.
अगर आपका कोई खाता नहीं है, तो आपको साइन अप करना होगा.
नया प्रोजेक्ट पर क्लिक करें. इसके बाद, Git Repo से क्लोन करें पर क्लिक करें.
https://github.com/googlecodelabs/your-first-pwapp.git क्लोन करें और 'ठीक है' पर क्लिक करें.
रेपो लोड हो जाने के बाद, .env फ़ाइल में बदलाव करें और उसे अपनी गहरे रंग वाली एपीआई कुंजी से अपडेट करें.
दिखाएं बटन पर क्लिक करें. इसके बाद, PWA को देखने के लिए नई विंडो में चुनें.

वैकल्पिक: कोड & डाउनलोड करें; स्थानीय रूप से काम करना

अगर आप कोड डाउनलोड करके स्थानीय रूप से काम करना चाहते हैं, तो आपके पास Node.js का हाल ही का वर्शन और कोड एडिटर सेट अप होना चाहिए.

सोर्स कोड डाउनलोड करें

डाउनलोड की गई zip फ़ाइल को अनपैक करें.
सर्वर चलाने के लिए ज़रूरी डिपेंडेंसी इंस्टॉल करने के लिए, npm install को चलाएं.
server.js में बदलाव करें और अपनी गहरे रंग वाली एपीआई कुंजी सेट करें.
पोर्ट 8000 पर सर्वर शुरू करने के लिए node server.js चलाएं.
http://localhost:8000 के लिए ब्राउज़र टैब खोलें

हमारा शुरुआती पॉइंट क्या है?

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

आज़माने के लिए कुछ चीज़ें...

सबसे नीचे दाएं कोने में, नीले रंग के + बटन के ज़रिए एक नया शहर जोड़ें.
ऊपर दाएं कोने में मौजूद 'रीफ़्रेश करें' बटन की मदद से डेटा रीफ़्रेश करें.
हर शहर के कार्ड के ऊपर दाईं ओर x का इस्तेमाल करके, उस शहर को मिटाएं.
Chrome DevTools में टॉगल डिवाइस टूलबार का इस्तेमाल करके, देखें कि यह डेस्कटॉप और मोबाइल पर कैसे काम करता है.
Chrome DevTools में नेटवर्क पैनल का इस्तेमाल करके देखें कि ऑफ़लाइन होने पर क्या होता है.
Chrome DevTools में नेटवर्क पैनल का इस्तेमाल करके देखें कि जब नेटवर्क स्लो 3G में थ्रॉटल हो जाता है, तो क्या होता है.
server.js के FORECAST_DELAY के लिए वैल्यू बदलकर, अनुमान सर्वर में देरी जोड़ें

Lighthouse की मदद से ऑडिट करें

Lighthouse, इस्तेमाल करने में आसान टूल है. इससे आपकी साइटों और पेजों की क्वालिटी को बेहतर बनाने में मदद मिलती है. लाइटहाउस, परफ़ॉर्मेंस, सुलभता, प्रोग्रेसिव वेब ऐप्लिकेशन वगैरह के लिए ऑडिट करता है. हर ऑडिट में एक रेफ़रंस दस्तावेज़ होता है, जो बताता है कि ऑडिट क्यों ज़रूरी है और समस्याओं को कैसे ठीक किया जाए.

हम मौसम की जानकारी देने वाले ऐप्लिकेशन की जांच करने के लिए, Lighthouse का इस्तेमाल करेंगे. साथ ही, हमने #39; किए गए बदलावों की पुष्टि की है.

लाइटहाउस की सुविधा चालू करें

अपने प्रोजेक्ट को नए टैब में खोलें.
Chrome DevTools खोलें और ऑडिट पैनल पर स्विच करें. सभी तरह के ऑडिट चालू रखें.
ऑडिट चलाएं पर क्लिक करें. कुछ समय बाद, लाइटहाउस आपको पेज पर एक रिपोर्ट देता है.

प्रोग्रेसिव वेब ऐप्लिकेशन ऑडिट

हम प्रोग्रेसिव वेब ऐप्लिकेशन ऑडिट के नतीजों पर ध्यान देने जा रहे हैं.

साथ ही, इसमें कई लाल रंग हैं:

❗कारोबार: मौजूदा पेज, ऑफ़लाइन होने पर 200 जवाब नहीं देता.
❗FAILED: start_url, ऑफ़लाइन होने पर 200 का जवाब नहीं देता.
❗कारोबार: किसी ऐसे सर्विस वर्कर को रजिस्टर नहीं किया जाता जो पेज और start_url. को कंट्रोल करता हो
❗FAILED: वेब ऐप्लिकेशन मेनिफ़ेस्ट, इंस्टॉल करने की ज़रूरी शर्तों को पूरा नहीं करता.
❗कारोबार: कस्टम स्प्लैश स्क्रीन के लिए कॉन्फ़िगर नहीं किया गया है.
❗कारोबार: यह पता-बार की थीम का रंग सेट नहीं करता.

चलिए, इनमें से कुछ समस्याओं को हल करने का काम शुरू करें!

इस सेक्शन के आखिर में, हमारा मौसम ऐप्लिकेशन नीचे दिए गए ऑडिट पास करेगा:

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

वेब ऐप्लिकेशन मेनिफ़ेस्ट बनाना

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

वेब ऐप्लिकेशन मेनिफ़ेस्ट का इस्तेमाल करके, आपका वेब ऐप्लिकेशन ये काम कर सकता है:

ब्राउज़र को बताएं कि आप अपने ऐप्लिकेशन को स्टैंडअलोन विंडो (display) में खोलना चाहते हैं.
बताएं कि ऐप्लिकेशन (start_url) के पहली बार लॉन्च होने पर कौनसा पेज खुलता है.
बताएं कि डॉक या ऐप्लिकेशन लॉन्चर (short_name, icons) पर ऐप्लिकेशन कैसा दिखना चाहिए.
स्प्लैश स्क्रीन बनाएं (name, icons, colors).
ब्राउज़र को विंडो को लैंडस्केप या पोर्ट्रेट मोड (orientation) में खोलने के लिए कहें.
और बहुत कुछ.

अपने प्रोजेक्ट में public/manifest.json नाम की एक फ़ाइल बनाएं. यहां दिया गया कॉन्टेंट कॉपी करें और चिपकाएं:

public/manifest.json

{
  "name": "Weather",
  "short_name": "Weather",
  "icons": [{
    "src": "/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

मेनिफ़ेस्ट, अलग-अलग साइज़ की स्क्रीन के लिए बने आइकॉन की कैटगरी के साथ काम करता है. इस कोडलैब के लिए, हमने iOS इंटिग्रेशन के लिए कुछ अन्य टूल शामिल किए हैं.

वेब ऐप्लिकेशन मेनिफ़ेस्ट में लिंक जोड़ना

इसके बाद, हमें अपने ऐप्लिकेशन के हर पेज पर <link rel="manifest"... जोड़कर, ब्राउज़र को हमारे मेनिफ़ेस्ट के बारे में बताना होगा. अपनी index.html फ़ाइल में <head> एलिमेंट में यह लाइन जोड़ें.

public/index.html

<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">

डेवलपर टूल चक्कर

DevTools की मदद से, आप आसानी से manifest.json फ़ाइल देख सकते हैं. ऐप्लिकेशन पैनल में Manifest पैनल खोलें. अगर आपने मेनिफ़ेस्ट की जानकारी सही तरीके से जोड़ी है, तो आप इसे #39; पार्स करके देख पाएंगे. साथ ही, इस पैनल में इसे लोगों को आसानी से दिखने वाले फ़ॉर्मैट में दिखाया जा सकेगा.

iOS मेटा टैग और आइकॉन जोड़ना

iOS पर Safari वेब पते के मेनिफ़ेस्ट में (अभी तक) इस्तेमाल नहीं करता है, इसलिए आपको अपनी <head>फ़ाइल की <head> में पारंपरिक meta टैग जोड़ने होंगे:

public/index.html

<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">

बोनस: आसान लाइटहाउस समाधान

हमारे Lighthouse ऑडिट में कुछ ऐसी चीज़ों के बारे में बताया गया है जिन्हें ठीक करना बहुत आसान है. इसलिए, जब तक हम यहां हैं, तब तक उन्हें ध्यान में रखें.

मुख्य जानकारी सेट करना

एसईओ ऑडिट में, Lighthouse ने हमारे &कोटेशन को नोट किया है;दस्तावेज़ में मुख्य जानकारी नहीं है.&कोटेशन; जानकारी को Google Search के नतीजों में दिखाया जा सकता है. अच्छी क्वालिटी वाली और खास जानकारी देने वाले नतीजे, खोज के उपयोगकर्ताओं के लिए ज़्यादा काम के नतीजे बना सकते हैं. इससे आपका खोज ट्रैफ़िक बढ़ सकता है.

ब्यौरा जोड़ने के लिए, अपने दस्तावेज़ के <head> में यह meta टैग जोड़ें:

public/index.html

<!-- CODELAB: Add description here -->
<meta name="description" content="A sample weather app">

पता बार की थीम का रंग सेट करना

PWA ऑडिट में, लाइटहाउस ने हमारे ऐप्लिकेशन को नोट किया है &;किसी पता बार की थीम का रंग सेट नहीं करता है&कोटेशन. ब्राउज़र के रंग बार को अपने ब्रैंड के रंगों से मेल खाने के लिए, थीम बार को ज़्यादा इमर्सिव उपयोगकर्ता अनुभव देता है.

मोबाइल पर थीम का रंग सेट करने के लिए, अपने दस्तावेज़ के <head> में यह meta टैग जोड़ें:

public/index.html

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

Lighthouse की मदद से बदलावों की पुष्टि करना

Lighthouse को फिर से चलाएं ('ऑडिट' पैनल के ऊपरी बाएं कोने में + + पर क्लिक करके) और अपने बदलावों की पुष्टि करें.

एसईओ ऑडिट

GoDaddy का पास: दस्तावेज़ में मुख्य जानकारी मौजूद होती है.

प्रोग्रेसिव वेब ऐप्लिकेशन ऑडिट

❗कारोबार: मौजूदा पेज, ऑफ़लाइन होने पर 200 जवाब नहीं देता.
❗FAILED: start_url, ऑफ़लाइन होने पर 200 का जवाब नहीं देता.
❗कारोबार: किसी ऐसे सर्विस वर्कर को रजिस्टर नहीं किया जाता जो पेज और start_url. को कंट्रोल करता हो
GoDaddy का पास: वेब ऐप्लिकेशन मेनिफ़ेस्ट, इंस्टॉल करने की ज़रूरी शर्तों को पूरा करता है.
GoDaddy का पास: इसे कस्टम स्प्लैश स्क्रीन के लिए कॉन्फ़िगर किया गया है.
GoDaddy का पास: इससे पता बार की थीम का रंग सेट होता है.

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

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

ऑफ़लाइन रहने पर मौजूदा पेज, 200 का जवाब नहीं देता.
start_url ऑफ़लाइन होने पर, 200 के साथ जवाब नहीं देता.
सेवा देने वाले उस व्यक्ति को रजिस्टर नहीं करता है जो पेज और start_url. को नियंत्रित करता है

अगले सेक्शन में, हम'अपने कस्टम ऑफ़लाइन पेज को पूरी तरह से ऑफ़लाइन अनुभव से बदल देंगे. इससे ऑफ़लाइन अनुभव में सुधार होगा, लेकिन इससे भी ज़रूरी बात यह है कि आपकी परफ़ॉर्मेंस #

सेवा देने वाले मज़दूरों को बचाने का काम

अगर आप सर्विस वर्कर के बारे में नहीं जानते, तो आप सर्विस वर्कर से जुड़ी जानकारी पढ़कर, बुनियादी तौर पर यह जान सकते हैं कि वे क्या कर सकते हैं, उनकी लाइफ़साइकल कैसे काम करती है, और इनके अलावा भी बहुत कुछ.

सर्विस वर्कर के ज़रिए उपलब्ध कराई जाने वाली सुविधाओं को प्रगतिशील सुधार माना जाना चाहिए. साथ ही, उन्हें तभी जोड़ा जाना चाहिए, जब ब्राउज़र पर सुविधा हो. उदाहरण के लिए, सर्विस वर्कर के साथ, आप अपने ऐप्लिकेशन के ऐप्लिकेशन शेल और डेटा को कैश मेमोरी में सेव कर सकते हैं, ताकि नेटवर्क तब भी उपलब्ध रहे, जब नेटवर्क ##39;t न हो. जब सर्विस वर्कर #39; काम नहीं करते, तो ऑफ़लाइन कोड कॉल नहीं किया जाता और उपयोगकर्ता को बुनियादी अनुभव मिलता है. प्रगतिशील वृद्धि प्रदान करने के लिए सुविधा पहचान का उपयोग करने से ओवरहेड थोड़ा कम होता है और यह उस सुविधा का समर्थन न करने वाले पुराने ब्राउज़र में 'ब्रेक नहीं करता है.

सर्विस वर्कर को रजिस्टर करना

सबसे पहले सर्विस वर्कर को रजिस्टर करें. अपनी index.html फ़ाइल में यह कोड जोड़ें:

public/index.html

// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
        .then((reg) => {
          console.log('Service worker registered.', reg);
        });
  });
}

यह कोड जांच करके पता लगाता है कि सर्विस वर्कर एपीआई उपलब्ध है या नहीं. अगर ऐसा है, तो पेज के लोड होने के बाद, /service-worker.js में सर्विस वर्कर रजिस्टर किया जाता है.

ध्यान दें, सर्विस वर्कर रूट डायरेक्ट्री से दिखाया जाता है, न कि /scripts/ डायरेक्ट्री से. यह आपके सर्विस वर्कर का scope सेट करने का सबसे आसान तरीका है. सर्विस वर्कर का scope यह तय करता है कि सर्विस वर्कर किन फ़ाइलों को कंट्रोल करता है. दूसरे शब्दों में कहें, तो सर्विस वर्कर अनुरोधों की समीक्षा करेगा. डिफ़ॉल्ट scope, वर्कर वर्कर फ़ाइल की जगह है और यह नीचे दी गई सभी डायरेक्ट्री पर लागू होती है. इसलिए, अगर service-worker.js रूट डायरेक्ट्री में है, तो सर्विस वर्कर इस डोमेन के सभी वेब पेजों से मिलने वाले अनुरोधों को कंट्रोल करेगा.

ऑफ़लाइन पेज को पहले से कैश मेमोरी में सेव करना

सबसे पहले, हमें सर्विस वर्कर को यह बताना होगा कि क्या कैश करना है. हमने पहले से ही एक सरल ऑफ़लाइन पेज (public/offline.html) बना लिया है, जिसे हम #39; कभी भी इंटरनेट से कनेक्ट नहीं करेंगे.

अपने service-worker.js में, FILES_TO_CACHE कैटगरी में '/offline.html', जोड़ें, आखिरी नतीजा कुछ ऐसा दिखेगा:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/offline.html',
];

इसके बाद, ऑफ़लाइन पेज को कैश मेमोरी में सेव करने के लिए, सर्विस वर्कर से बात करने के लिए, हमें install इवेंट में यह कोड जोड़ना होगा:

public/service-worker.js

// CODELAB: Precache static resources here.
evt.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[ServiceWorker] Pre-caching offline page');
      return cache.addAll(FILES_TO_CACHE);
    })
);

अब हमारा install इवेंट, caches.open() के साथ कैश मेमोरी खोलता है और इसे कैश मेमोरी का नाम देता है. कैश नाम देने से हम फ़ाइलों के वर्शन या कैश किए गए संसाधनों से डेटा को अलग कर सकते हैं, ताकि हम आसानी से एक को अपडेट कर सकें, लेकिन दूसरे पर असर न डाल सकें.

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

डेवलपर टूल चक्कर

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

जब आपको ऐसा कोई खाली पेज दिखता है, तो इसका मतलब है कि इस समय खुले हुए पेज पर कोई भी सर्विस वर्कर काम नहीं कर रहा है.

अब, अपना पेज फिर से लोड करें. सर्विस वर्कर पैनल अब कुछ इस तरह दिखेगा:

जब आपको इस तरह की जानकारी दिखती है, तो इसका मतलब है कि पेज पर सर्विस वर्कर चल रहा है.

स्थिति लेबल के बगल में, इस मामले में एक संख्या (34251) होती है. आप उस नंबर पर नज़र रखें क्योंकि आप सर्विस वर्कर के साथ काम कर रहे हैं. यह बताता है कि आपके सर्विस वर्कर को अपडेट किया गया है या नहीं.

पुराने ऑफ़लाइन पेजों की जानकारी हटाना

हम कैश मेमोरी में मौजूद किसी भी पुराने डेटा को हटाने के लिए activate इवेंट का इस्तेमाल करेंगे. इस कोड से यह पक्का होता है कि जब भी ऐप्लिकेशन की शेल फ़ाइलें बदली जाएं, तब आपका सर्विस वर्कर कैश मेमोरी को अपडेट कर दे. यह काम कर सके, इसके लिए आपको अपनी सेवा वर्कर फ़ाइल के सबसे ऊपर CACHE_NAME वैरिएबल बढ़ाना होगा.

अपने activate इवेंट में यह कोड जोड़ें:

public/service-worker.js

// CODELAB: Remove previous cached data from disk.
evt.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map((key) => {
        if (key !== CACHE_NAME) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
);

डेवलपर टूल चक्कर

सर्विस वर्कर पैनल खुला होने पर, पेज को रीफ़्रेश करें. आपको नया सर्विस वर्कर इंस्टॉल कर दिया जाएगा और स्थिति संख्या बढ़ जाएगी.

अपडेट किया गया सर्विस वर्कर तुरंत कंट्रोल कर देता है, क्योंकि हमारा install इवेंट self.skipWaiting() के साथ खत्म हो जाता है. साथ ही, activate इवेंट self.clients.claim() के साथ खत्म होता है. इसके बिना, पुराना सर्विस वर्कर पेज को कंट्रोल करता रहेगा. ऐसा तब तक होगा, जब तक कि पेज पर एक टैब खुला हो.

नेटवर्क से जुड़े अनुरोधों को मैनेज न करना

आखिर में, हमें fetch के इवेंट मैनेज करने होंगे. हम #नेटवर्क की मदद से, डेटा को कैश मेमोरी में सेव करनेकी रणनीति का इस्तेमाल करेंगे. सर्विस वर्कर सबसे पहले नेटवर्क से संसाधन फ़ेच करने की कोशिश करता है. अगर यह काम नहीं करता, तो सर्विस वर्कर, कैश मेमोरी से ऑफ़लाइन पेज दिखाता है.

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.mode !== 'navigate') {
  // Not a page navigation, bail.
  return;
}
evt.respondWith(
    fetch(evt.request)
        .catch(() => {
          return caches.open(CACHE_NAME)
              .then((cache) => {
                return cache.match('offline.html');
              });
        })
);

fetch हैंडलर को सिर्फ़ पेज नेविगेशन को हैंडल करना होता है, इसलिए दूसरे अनुरोधों को हैंडलर से बाहर निकाला जा सकता है और ब्राउज़र सामान्य रूप से हैंडल कर सकता है. लेकिन, अगर .mode navigate अनुरोध है, तो नेटवर्क से आइटम पाने के लिए fetch का इस्तेमाल करें. अगर यह काम नहीं करता, तो catch हैंडलर, caches.open(CACHE_NAME) के साथ कैश मेमोरी खोलता है और पहले से कैश किए गए ऑफ़लाइन पेज को पाने के लिए cache.match('offline.html') का इस्तेमाल करता है. इसके बाद, evt.respondWith() का इस्तेमाल करके, ब्राउज़र को वापस पास की जाती है.

डेवलपर टूल चक्कर

हम यह पक्का करते हैं कि सब कुछ ठीक से काम कर रहा है. सर्विस वर्कर पैनल को खोलने पर, पेज को रीफ़्रेश करें. आपको नया सर्विस वर्कर इंस्टॉल कर दिया जाएगा और स्थिति संख्या बढ़ जाएगी.

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

अब, ऑफ़लाइन मोड को टेस्ट करें. DevTools के ऐप्लिकेशन पैनल में सर्विस वर्कर पैनल पर वापस जाएं और ऑफ़लाइन चेकबॉक्स पर सही का निशान लगाएं. इसे जांचने के बाद, आपको नेटवर्क पैनल टैब के बगल में, थोड़ा पीला चेतावनी आइकॉन दिखेगा. यह आइकॉन बताता है कि आप'ऑफ़लाइन हैं.

अपना पेज फिर से लोड करें और यह काम करता है! हमें Chrome के ऑफ़लाइन डायनो के बजाय, अपना ऑफ़लाइन पांडा मिलता है!

टेस्ट वर्कर के लिए सलाह

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

DevTools का इस्तेमाल करना

ऐप्लिकेशन पैनल के सर्विस वर्कर पैनल में, कुछ चेकबॉक्स दिए गए हैं जो आपकी ज़िंदगी को और भी आसान बना देंगे.

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

फिर से शुरू करें

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

अतिरिक्त युक्तियां:

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

Lighthouse की मदद से बदलावों की पुष्टि करना

Lighthouse को फिर से चलाएं और अपने बदलावों की पुष्टि करें. अपने बदलावों की पुष्टि करने से पहले, ऑफ़लाइन चेकबॉक्स पर लगा सही का निशान हटाना न भूलें!

एसईओ ऑडिट

GoDaddy का पास: दस्तावेज़ में मुख्य जानकारी मौजूद होती है.

प्रोग्रेसिव वेब ऐप्लिकेशन ऑडिट

GoDaddy का पास है: मौजूदा पेज ऑफ़लाइन होने पर 200 जवाब देता है.
☆ पास किया गया: start_url ऑफ़लाइन होने पर 200 जवाब देता है.
GoDaddy का पास: इससे उस सर्विस वर्कर को रजिस्टर किया जाता है जो पेज और start_url. को कंट्रोल करता है
GoDaddy का पास: वेब ऐप्लिकेशन मेनिफ़ेस्ट, इंस्टॉल करने की ज़रूरी शर्तों को पूरा करता है.
GoDaddy का पास: इसे कस्टम स्प्लैश स्क्रीन के लिए कॉन्फ़िगर किया गया है.
GoDaddy का पास: इससे पता बार की थीम का रंग सेट होता है.

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

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

सर्विस वर्कर का लाइफ़ साइकल

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

`install` इवेंट

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

आम तौर पर, install इवेंट का इस्तेमाल आपके ऐप्लिकेशन चलाने के लिए, हर ज़रूरी चीज़ को कैश मेमोरी में सेव करने के लिए किया जाता है.

`activate` इवेंट

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

`fetch` इवेंट

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

सर्विस वर्कर को अपडेट करना

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

कैश मेमोरी की सही रणनीति चुनना

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

स्टैटिक रिसॉर्स को कैश करना

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

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

लोकल कैश मेमोरी से डेटा लेने पर, नेटवर्क में मौजूद सभी तरह के बदलाव खत्म हो जाते हैं. इससे कोई फ़र्क़ नहीं पड़ता कि उपयोगकर्ता किस तरह का नेटवर्क इस्तेमाल कर रहा है (वाई-फ़ाई, 5G, 3G या 2G). इसके लिए, हम जो भी मुख्य संसाधन चलाना चाहते हैं वे तुरंत उपलब्ध हो जाते हैं.

ऐप्लिकेशन का डेटा कैश करना

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

सामान्य स्थितियों में, कैश मेमोरी में सेव किया गया डेटा तुरंत ही लौटा दिया जाएगा, ताकि ऐप्लिकेशन को हाल ही में इस्तेमाल किया गया डेटा मिल सके. इसके बाद, जब नेटवर्क अनुरोध वापस लौटेगा, तब ऐप्लिकेशन को नेटवर्क से नए डेटा का इस्तेमाल करके अपडेट किया जाएगा.

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

ऐप्लिकेशन के लॉजिक को अपडेट करें

जैसा कि पहले बताया गया था, ऐप्लिकेशन को दो एसिंक्रोनस अनुरोध शुरू करने होंगे, एक कैश मेमोरी और एक नेटवर्क पर. कैश मेमोरी को ऐक्सेस करने और नया डेटा वापस पाने के लिए, ऐप्लिकेशन window में उपलब्ध caches ऑब्जेक्ट का इस्तेमाल करता है. यह यूआरएल को बेहतर बनाने का एक बेहतरीन उदाहरण है, क्योंकि हो सकता है कि caches ऑब्जेक्ट सभी ब्राउज़र में उपलब्ध न हो और अगर यह ##39 नहीं है, तो नेटवर्क अनुरोध अब भी काम करेगा.

getForecastFromCache() फ़ंक्शन को अपडेट करके देखें कि caches ऑब्जेक्ट, ग्लोबल window ऑब्जेक्ट में उपलब्ध है या नहीं. अगर ऐसा है, तो कैश मेमोरी से डेटा का अनुरोध करें.

public/scripts/app.js

// CODELAB: Add code to get weather forecast from the caches object.
if (!('caches' in window)) {
  return null;
}
const url = `${window.location.origin}/forecast/${coords}`;
return caches.match(url)
    .then((response) => {
      if (response) {
        return response.json();
      }
      return null;
    })
    .catch((err) => {
      console.error('Error getting data from cache', err);
      return null;
    });

इसके बाद, हमें updateData() में बदलाव करना होगा, ताकि दो कॉल आ सकें. इनमें से एक नेटवर्क से अनुमान पाने के लिए getForecastFromNetwork() है. साथ ही, कैश मेमोरी का सबसे नया अनुमान पाने के लिए, getForecastFromCache() है:

public/scripts/app.js

// CODELAB: Add code to call getForecastFromCache.
getForecastFromCache(location.geo)
    .then((forecast) => {
      renderForecast(card, forecast);
    });

हमारा मौसम ऐप्लिकेशन अब डेटा के लिए दो एसिंक्रोनस अनुरोध करता है, एक कैश के ज़रिए और दूसरा fetch के ज़रिए. अगर कैश में सेव हुआ डेटा मौजूद है, तो उसे बहुत जल्द (दिए गए सेकंड) में दिखाया और रेंडर किया जाएगा. इसके बाद, जब fetch का जवाब मिलेगा, तो कार्ड को सीधे मौसम API से सबसे नए डेटा से अपडेट किया जाएगा.

ध्यान दें कि कैश मेमोरी और fetch अनुरोध, दोनों का अनुमान अनुमान कार्ड को अपडेट करने के लिए कॉल पर कैसे खत्म होता है. ऐप्लिकेशन को कैसे पता चलता है कि यह सबसे नया डेटा दिखा रहा है या नहीं? इसे renderForecast() के इस कोड में हैंडल किया जाता है:

public/scripts/app.js

// If the data on the element is newer, skip the update.
if (lastUpdated >= data.currently.time) {
  return;
}

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

ऐप्लिकेशन के रिसॉर्स को पहले से कैश मेमोरी में सेव करना

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

public/service-worker.js

// CODELAB: Update cache names any time any of the cached files change.
const CACHE_NAME = 'static-cache-v2';
const DATA_CACHE_NAME = 'data-cache-v1';

CACHE_NAME को भी अपडेट करना न भूलें; हम अपने सभी स्टैटिक रिसॉर्स को भी बदल देंगे.

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

FILES_TO_CACHE सूची को फ़ाइलों की सूची से अपडेट करें:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/scripts/install.js',
  '/scripts/luxon-1.11.4.js',
  '/styles/inline.css',
  '/images/add.svg',
  '/images/clear-day.svg',
  '/images/clear-night.svg',
  '/images/cloudy.svg',
  '/images/fog.svg',
  '/images/hail.svg',
  '/images/install.svg',
  '/images/partly-cloudy-day.svg',
  '/images/partly-cloudy-night.svg',
  '/images/rain.svg',
  '/images/refresh.svg',
  '/images/sleet.svg',
  '/images/snow.svg',
  '/images/thunderstorm.svg',
  '/images/tornado.svg',
  '/images/wind.svg',
];

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

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

चालू इवेंट हैंडलर को अपडेट करना

यह पक्का करने के लिए कि हमारा activate इवेंट, गलती से हमारा डेटा नहीं मिटाता है, service-worker.js के activate इवेंट में if (key !== CACHE_NAME) { को इस तरह से बदलें:

public/service-worker.js

if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {

फ़ेच इवेंट हैंडलर को अपडेट करना

मौसम से जुड़े एपीआई के अनुरोधों को रोकने और उनके जवाबों को कैश मेमोरी में सेव करने के लिए, हमें सर्विस वर्कर में बदलाव करना होगा. इससे, हम बाद में उन्हें आसानी से ऐक्सेस कर पाएंगे. पुराने डेटा की फिर से पुष्टि करने की रणनीति में, हम उम्मीद करते हैं कि नेटवर्क पर मिलने वाला जवाब ही 'सच का स्रोत', और #39 होगा. हम हमेशा सबसे नई जानकारी देते रहते हैं. अगर नेटवर्क #&30; नहीं हो सकता, तो इसका फ़ायदा नहीं हो सकता, क्योंकि हमने पहले ही अपने ऐप्लिकेशन में कैश मेमोरी का नया डेटा ले लिया है.

दूसरे इवेंट से अलग डेटा एपीआई के अनुरोधों को हैंडल करने के लिए, fetch इवेंट हैंडलर को अपडेट करें.

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.url.includes('/forecast/')) {
  console.log('[Service Worker] Fetch (data)', evt.request.url);
  evt.respondWith(
      caches.open(DATA_CACHE_NAME).then((cache) => {
        return fetch(evt.request)
            .then((response) => {
              // If the response was good, clone it and store it in the cache.
              if (response.status === 200) {
                cache.put(evt.request.url, response.clone());
              }
              return response;
            }).catch((err) => {
              // Network request failed, try to get it from the cache.
              return cache.match(evt.request);
            });
      }));
  return;
}
evt.respondWith(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.match(evt.request)
          .then((response) => {
            return response || fetch(evt.request);
          });
    })
);

कोड, अनुरोध को छिपाता है और मौसम के पूर्वानुमान के बारे में जांच करता है. अगर ऐसा है, तो अनुरोध करने के लिए, fetch का इस्तेमाल करें. जवाब मिलने के बाद, कैश मेमोरी खोलें, रिस्पॉन्स का क्लोन बनाएं, कैश मेमोरी में सेव करें, और मूल अनुरोध करने वाले को जवाब दें.

हमें evt.request.mode !== 'navigate' चेक हटाने की ज़रूरत है, क्योंकि हम चाहते हैं कि हमारा सर्विस वर्कर सिर्फ़ नेविगेशन ही नहीं, बल्कि सभी अनुरोधों (इमेज, स्क्रिप्ट, सीएसएस फ़ाइलें वगैरह) को हैंडल करे. अगर हम जांच करते हैं, तो सर्विस वर्कर कैश से सिर्फ़ एचटीएमएल दिखाया जाएगा. नेटवर्क से बाकी सब कुछ का अनुरोध किया जाएगा.

इसे आज़माएं

ऐप्लिकेशन अब पूरी तरह से ऑफ़लाइन होना चाहिए. पेज को रीफ़्रेश करके पक्का करें कि आपने ##99 सर्विस सेंटर का सबसे नया वर्शन इंस्टॉल कर लिया है. फिर कुछ शहरों को सेव करें और मौसम का ताज़ा डेटा पाने के लिए ऐप्लिकेशन पर 'रीफ़्रेश करें' बटन दबाएं.

इसके बाद, DevTools के ऐप्लिकेशन पैनल में कैश मेमोरी पैनल पर जाएं. सेक्शन को बड़ा करने पर, आपको बाईं ओर मौजूद स्टैटिक कैश और डेटा कैश का नाम दिखेगा. डेटा कैश खोलने से हर शहर के लिए स्टोर डेटा दिखाई देना चाहिए.

सर्विस वर्कर पैनल पर स्विच करें और ऑफ़लाइन चेकबॉक्स पर सही का निशान लगाएं. पेज को फिर से लोड करके देखें और फिर ऑफ़लाइन जाकर पेज को फिर से लोड करें.

अगर आप किसी तेज़ नेटवर्क पर हैं और देखना चाहते हैं कि धीमा कनेक्शन होने पर मौसम का अनुमान कैसे अपडेट होता है, तो server.js में FORECAST_DELAY की प्रॉपर्टी को 5000 पर सेट करें. अनुमान दिखाने वाले एपीआई के सभी अनुरोधों में 5,000 मि॰से॰ की देरी होगी.

Lighthouse की मदद से बदलावों की पुष्टि करना

यह लाइटहाउस को फिर से चलाना भी एक अच्छा आइडिया है.

एसईओ ऑडिट

GoDaddy का पास: दस्तावेज़ में मुख्य जानकारी मौजूद होती है.

प्रोग्रेसिव वेब ऐप्लिकेशन ऑडिट

GoDaddy का पास है: मौजूदा पेज ऑफ़लाइन होने पर 200 जवाब देता है.
☆ पास किया गया: start_url ऑफ़लाइन होने पर 200 जवाब देता है.
GoDaddy का पास: इससे उस सर्विस वर्कर को रजिस्टर किया जाता है जो पेज और start_url. को कंट्रोल करता है
GoDaddy का पास: वेब ऐप्लिकेशन मेनिफ़ेस्ट, इंस्टॉल करने की ज़रूरी शर्तों को पूरा करता है.
GoDaddy का पास: इसे कस्टम स्प्लैश स्क्रीन के लिए कॉन्फ़िगर किया गया है.
GoDaddy का पास: इससे पता बार की थीम का रंग सेट होता है.

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

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

Lighthouse के साथ ऑडिट

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

अगर आपने इस कोडलैब के ज़रिए काम किया है, तो आपका PWA पहले से ही इन शर्तों के मुताबिक होना चाहिए.

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

index.html में install.js जोड़ना

पहले, install.js को हमारी index.html फ़ाइल में जोड़ें.

public/index.html

<!-- CODELAB: Add the install script here -->
<script src="/scripts/install.js"></script>

`beforeinstallprompt` इवेंट को सुनें

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

public/scripts/ install.js

// CODELAB: Add event listener for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

इवेंट सेव करना और इंस्टॉल करने का बटन दिखाना

हमारे saveBeforeInstallPromptEvent फ़ंक्शन में, हम beforeinstallprompt इवेंट का रेफ़रंस सेव करेंगे, ताकि हम उस पर prompt() को बाद में कॉल कर सकें. साथ ही, इंस्टॉल बटन दिखाने के लिए अपने यूज़र इंटरफ़ेस (यूआई) को अपडेट कर सकें.

public/scripts/ install.js

// CODELAB: Add code to save event & show the install button.
deferredInstallPrompt = evt;
installButton.removeAttribute('hidden');

निर्देश दिखाना और बटन छिपाना

जब उपयोगकर्ता 'इंस्टॉल करें' बटन पर क्लिक करता है, तब हमें सेव किए गए beforeinstallprompt इवेंट पर .prompt() को कॉल करना होता है. हमें 'इंस्टॉल करें' बटन छिपाना भी पड़ता है, क्योंकि सेव किए गए हर इवेंट पर सिर्फ़ एक बार .prompt() कॉल किया जा सकता है.

public/scripts/install.js

// CODELAB: Add code show install prompt & hide the install button.
deferredInstallPrompt.prompt();
// Hide the install button, it can't be called twice.
evt.srcElement.setAttribute('hidden', true);

.prompt() को कॉल करने पर, उपयोगकर्ता को मोडल डायलॉग दिखेगा. इसमें, उनसे आपके ऐप्लिकेशन को उनकी होम स्क्रीन पर जोड़ने के लिए कहा जाएगा.

नतीजे लॉग करना

सेव किए गए beforeinstallprompt इवेंट की userChoice प्रॉपर्टी से मिले प्रॉमिस को देखकर, यह पता लगाया जा सकता है कि उपयोगकर्ता ने इंस्टॉल डायलॉग का जवाब कैसे दिया. प्रॉम्प्ट दिखाने के बाद जब उपयोगकर्ता जवाब देता है, तो प्रॉमिस, outcome प्रॉपर्टी के साथ एक ऑब्जेक्ट दिखाता है.

public/scripts/ install.js

// CODELAB: Log user response to prompt.
deferredInstallPrompt.userChoice
    .then((choice) => {
      if (choice.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt', choice);
      } else {
        console.log('User dismissed the A2HS prompt', choice);
      }
      deferredInstallPrompt = null;
    });

userChoice के बारे में एक टिप्पणी: खास जानकारी, इसे प्रॉपर्टी के तौर पर बताती है, न कि उस फ़ंक्शन के तौर पर जो आप चाहते हैं.

इंस्टॉल करने के सभी इवेंट लॉग करें

ऐप्लिकेशन इंस्टॉल करने के लिए जोड़े गए किसी भी यूज़र इंटरफ़ेस (यूआई) के अलावा, उपयोगकर्ता दूसरे तरीकों से भी आपका PWA इंस्टॉल कर सकते हैं. उदाहरण के लिए, Chrome का #-बिंदु वाला मेन्यू. इन इवेंट को ट्रैक करने के लिए, ऐप्लिकेशन में इंस्टॉल किए गए इवेंट को सुनें.

public/scripts/install.js

// CODELAB: Add event listener for appinstalled event
window.addEventListener('appinstalled', logAppInstalled);

इसके बाद, हमें logAppInstalled फ़ंक्शन अपडेट करना होगा. इस कोडलैब के लिए, हम सिर्फ़ console.log का इस्तेमाल करेंगे. हालांकि, प्रोडक्शन प्रोडक्शन में इस ऐप्लिकेशन को Analytics सॉफ़्टवेयर की मदद से इवेंट के तौर पर लॉग करना होगा.

public/scripts/ install.js

// CODELAB: Add code to log the event
console.log('Weather App was installed.', evt);

सर्विस वर्कर अपडेट करना

#CACHE_NAME को अपनी service-worker.js फ़ाइल में CACHE_NAME अपडेट करना न भूलें, क्योंकि आपने पहले से कैश की गई फ़ाइलों में बदलाव किए हैं. DevTools में ऐप्लिकेशन पैनल के सर्विस वर्कर पैनल में, नेटवर्क के लिए बायपास चेकबॉक्स को चालू करने से काम चल जाएगा, लेकिन इससे असल दुनिया में कोई मदद नहीं मिलेगी.

इसे आज़माएं

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

इंस्टॉल करने के बटन की पुष्टि करने के लिए

सबसे पहले, पुष्टि करें कि हमारा इंस्टॉल आइकॉन ठीक से दिख रहा है. डेस्कटॉप और मोबाइल, दोनों पर इस सुविधा का इस्तेमाल ज़रूर करें.

Chrome के नए टैब में यूआरएल खोलें.
Chrome का #-बिंदु वाला मेन्यू (पता बार के आगे) खोलें.
▢ इस बात की पुष्टि करें कि आपको मेन्यू में &कोटेशन;मौसम इंस्टॉल करें...&kot; है.
ऊपर दाएं कोने में दिए गए रीफ़्रेश बटन का इस्तेमाल करके मौसम से जुड़ा डेटा रीफ़्रेश करें. इससे हम यह पक्का कर पाएंगे कि आप उपयोगकर्ता के जुड़ाव को बेहतर बनाने वाले तरीकों का पालन कर रहे हैं.
▢ पुष्टि करें कि ऐप्लिकेशन हेडर में इंस्टॉल आइकॉन दिख रहा है.

इंस्टॉल करने के बटन की पुष्टि करना

इसके बाद, पक्का करें कि सब कुछ ठीक से इंस्टॉल हुआ है और हमारे इवेंट ठीक से सक्रिय हुए हैं. डेस्कटॉप या मोबाइल पर ऐसा किया जा सकता है. अगर आप मोबाइल पर इसकी जांच करना चाहते हैं, तो पक्का करें कि आप रिमोट डीबगिंग का इस्तेमाल कर रहे हैं. इससे आप देख पाएंगे कि कंसोल पर क्या और #39 लॉग किए गए हैं.

Chrome खोलें और नए ब्राउज़र टैब में, अपने मौसम PWA पर जाएं.
DevTools खोलें और कंसोल पैनल पर स्विच करें.
ऊपर दाएं कोने में दिए गए 'इंस्टॉल करें' बटन पर क्लिक करें.
▢ पुष्टि करें कि 'इंस्टॉल करें' बटन नहीं दिखेगा
▢ पुष्टि करें कि इंस्टॉल मोडल डायलॉग दिखेगा.
रद्द करें पर क्लिक करें.
▢ पुष्टि करें "उपयोगकर्ता ने A2HS अनुरोध को खारिज किया&cont;कंसोल आउटपुट में दिखाया गया है.
▢ इंस्टॉल करें बटन दोबारा दिखने पर पुष्टि करें.
फिर से इंस्टॉल करें बटन क्लिक करें
मौसम का PWA लॉन्च करें.
▢ पुष्टि करें कि ऐप्लिकेशन, स्टैंडअलोन ऐप्लिकेशन के तौर पर खुलता है. यह ऐप्लिकेशन, डेस्कटॉप पर ऐप्लिकेशन विंडो में या मोबाइल की फ़ुल स्क्रीन में खुलता है.

iOS इंस्टॉलेशन की पुष्टि करना

आइए, iOS की मदद से iOS पर व्यवहार की जांच करें. अगर आपके पास कोई iOS डिवाइस है, तो आप उसका इस्तेमाल कर सकते हैं या अगर आप Mac पर मौजूद हैं, तो Xcode के साथ उपलब्ध iOS सिम्युलेटर आज़माएं.

Safari खोलें और नए ब्राउज़र टैब में, अपने मौसम PWA पर जाएं.
शेयर करें बटन पर क्लिक करें.
दाईं ओर स्क्रोल करें और होम स्क्रीन पर जोड़ें बटन पर क्लिक करें.
▢ पुष्टि करें कि शीर्षक, आइकॉन, और आइकॉन सही हैं.
जोड़ें
पर क्लिक करें ▢ पुष्टि करें कि ऐप्लिकेशन आइकॉन, होम स्क्रीन पर जुड़ गया है.
होम स्क्रीन से Weather PWA लॉन्च करें.
▢ पुष्टि करें कि ऐप्लिकेशन फ़ुल-स्क्रीन में लॉन्च होता है.

बोनस: यह पता लगाना कि आपका ऐप्लिकेशन होम स्क्रीन से लॉन्च हुआ या नहीं

display-mode मीडिया क्वेरी से, स्टाइल को लागू करने की सुविधा मिलती है. यह इस बात पर निर्भर करता है कि ऐप्लिकेशन कैसे लॉन्च किया गया था. इसके अलावा, यह भी तय करता है कि इसे JavaScript के साथ कैसे लॉन्च किया गया था.

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

आप display-modeJavaScript की JavaScript में क्वेरी देखने के लिए, का भी इस्तेमाल कर सकते हैं.

बोनस: अपना PWA अनइंस्टॉल करना

याद रखें, अगर ऐप्लिकेशन पहले से इंस्टॉल है, तो beforeinstallevent सक्रिय नहीं होता, इसलिए डेवलपमेंट के दौरान आप#39; अपना ऐप्लिकेशन कई बार इंस्टॉल और अनइंस्टॉल करके यह पक्का कर सकते हैं कि सब कुछ ठीक से काम कर रहा है.

Android

Android पर, PWA उसी तरह अनइंस्टॉल किए जाते हैं जिस तरह दूसरे इंस्टॉल किए गए ऐप्लिकेशन अनइंस्टॉल किए जाते हैं.

ऐप्लिकेशन पैनल खोलें.
मौसम का आइकॉन देखने के लिए, नीचे की ओर स्क्रोल करें.
ऐप्लिकेशन आइकॉन को स्क्रीन के सबसे ऊपर की ओर खींचें और छोड़ें.
अनइंस्टॉल करें चुनें.

ChromeOS

ChromeOS पर, PWA को लॉन्चर के खोज बॉक्स से आसानी से अनइंस्टॉल किया जा सकता है.

लॉन्चर खोलें.
खोज बॉक्स में &कोटेशनमौसम&कोट करें; नतीजों में आपका मौसम PWA दिखना चाहिए.
मौसम PWA पर दायां क्लिक (ऑल-क्लिक).
Chrome से हटाएं... पर क्लिक करें

macOS और Windows

Mac और Windows पर, PWA Chrome से अनइंस्टॉल किए जा सकते हैं:

नए ब्राउज़र टैब में, chrome://apps खोलें.
मौसम PWA पर दायां क्लिक (ऑल-क्लिक).
Chrome से हटाएं... पर क्लिक करें

आप इंस्टॉल किए गए PWA को भी खोल सकते हैं, ऊपर दाएं कोने में मौजूद तीन बिंदु वाले संदर्भ मेन्यू पर क्लिक करें और &कोटेशन;मौसम PWA अनइंस्टॉल करें...&कोटेशन चुनें;

बधाई हो, आपने #39; अपना पहला प्रगतिशील वेब ऐप्लिकेशन बना लिया है!

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

अब आप किसी भी वेब ऐप्लिकेशन को प्रोग्रेसिव वेब ऐप्लिकेशन में बदलने के ज़रूरी कदम जानते हैं.

आगे क्या होगा?

इनमें से कुछ कोडलैब देखें...

वेब ऐप्लिकेशन, प्रगतिशील वेब ऐप्लिकेशन कैसे बनता है?

तेज़ और भरोसेमंद

इंस्टॉल किया जा सकता है

मोबाइल और एएमपी; डेस्कटॉप

आप क्या बनाते हैं

आप क्या #39;जानेंगे

आपको क्या चाहिए

Dark Sky API के लिए कुंजी पाना

पुष्टि करना कि आपकी एपीआई कुंजी ठीक से काम कर रही है

कोड पाएं

खास तौर पर सुझाया गया: रेपो इंपोर्ट करने के लिए ग्लिच का इस्तेमाल करना

वैकल्पिक: कोड & डाउनलोड करें; स्थानीय रूप से काम करना

हमारा शुरुआती पॉइंट क्या है?

Lighthouse की मदद से ऑडिट करें

लाइटहाउस की सुविधा चालू करें

प्रोग्रेसिव वेब ऐप्लिकेशन ऑडिट

वेब ऐप्लिकेशन मेनिफ़ेस्ट बनाना

वेब ऐप्लिकेशन मेनिफ़ेस्ट में लिंक जोड़ना

डेवलपर टूल चक्कर

iOS मेटा टैग और आइकॉन जोड़ना

बोनस: आसान लाइटहाउस समाधान

मुख्य जानकारी सेट करना

पता बार की थीम का रंग सेट करना

Lighthouse की मदद से बदलावों की पुष्टि करना

सेवा देने वाले मज़दूरों को बचाने का काम

सर्विस वर्कर को रजिस्टर करना

ऑफ़लाइन पेज को पहले से कैश मेमोरी में सेव करना

डेवलपर टूल चक्कर

पुराने ऑफ़लाइन पेजों की जानकारी हटाना

डेवलपर टूल चक्कर

नेटवर्क से जुड़े अनुरोधों को मैनेज न करना

डेवलपर टूल चक्कर

टेस्ट वर्कर के लिए सलाह

DevTools का इस्तेमाल करना

फिर से शुरू करें

Lighthouse की मदद से बदलावों की पुष्टि करना

सर्विस वर्कर का लाइफ़ साइकल

install इवेंट

activate इवेंट

fetch इवेंट

सर्विस वर्कर को अपडेट करना

कैश मेमोरी की सही रणनीति चुनना

स्टैटिक रिसॉर्स को कैश करना

ऐप्लिकेशन का डेटा कैश करना

ऐप्लिकेशन के लॉजिक को अपडेट करें

ऐप्लिकेशन के रिसॉर्स को पहले से कैश मेमोरी में सेव करना

चालू इवेंट हैंडलर को अपडेट करना

public/service-worker.js

फ़ेच इवेंट हैंडलर को अपडेट करना

इसे आज़माएं

Lighthouse की मदद से बदलावों की पुष्टि करना

Lighthouse के साथ ऑडिट

index.html में install.js जोड़ना

beforeinstallprompt इवेंट को सुनें

इवेंट सेव करना और इंस्टॉल करने का बटन दिखाना

निर्देश दिखाना और बटन छिपाना

नतीजे लॉग करना

इंस्टॉल करने के सभी इवेंट लॉग करें

सर्विस वर्कर अपडेट करना

इसे आज़माएं

इंस्टॉल करने के बटन की पुष्टि करने के लिए

इंस्टॉल करने के बटन की पुष्टि करना

iOS इंस्टॉलेशन की पुष्टि करना

बोनस: यह पता लगाना कि आपका ऐप्लिकेशन होम स्क्रीन से लॉन्च हुआ या नहीं

बोनस: अपना PWA अनइंस्टॉल करना

Android

ChromeOS

macOS और Windows

आगे क्या होगा?

ज़्यादा जानकारी के लिए पढ़ें

रेफ़रंस दस्तावेज़

`install` इवेंट

`activate` इवेंट

`fetch` इवेंट

`beforeinstallprompt` इवेंट को सुनें