यह कोडलैब, प्रोग्रेसिव वेब ऐप्लिकेशन डेवलप करने से जुड़े ट्रेनिंग कोर्स का हिस्सा है. इसे Google Developers Training टीम ने बनाया है. अगर कोडलैब को क्रम से पूरा किया जाता है, तो आपको इस कोर्स से सबसे ज़्यादा फ़ायदा मिलेगा.
कोर्स के बारे में पूरी जानकारी के लिए, प्रोग्रेसिव वेब ऐप्लिकेशन डेवलप करने के बारे में खास जानकारी देखें.
परिचय
इस लैब में, प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) के मानकों के हिसाब से किसी वेबसाइट की ऑडिट करने के लिए, Lighthouse का इस्तेमाल किया जाएगा. साथ ही, सर्विस वर्कर एपीआई की मदद से, ऑफ़लाइन काम करने की सुविधा भी जोड़ी जाएगी.
आपको क्या सीखने को मिलेगा
- Lighthouse की मदद से साइटों का ऑडिट कैसे करें
- किसी ऐप्लिकेशन में ऑफ़लाइन काम करने की सुविधाएं जोड़ने का तरीका
आपको क्या पता होना चाहिए
- एचटीएमएल, सीएसएस, और JavaScript की बुनियादी जानकारी
- ES2015 Promises के बारे में जानकारी
आपको इन चीज़ों की ज़रूरत होगी
- टर्मिनल/शेल ऐक्सेस वाला कंप्यूटर
- इंटरनेट कनेक्शन
- Lighthouse का इस्तेमाल करने के लिए Chrome ब्राउज़र
- टेक्स्ट एडिटर
- ज़रूरी नहीं: Android डिवाइस पर Chrome
github से pwa-training-labs रिपॉज़िटरी को डाउनलोड या क्लोन करें. साथ ही, अगर ज़रूरी हो, तो Node.js का एलटीएस वर्शन इंस्टॉल करें.
offline-quickstart-lab/app/ डायरेक्ट्री में जाएं और लोकल डेवलपमेंट सर्वर शुरू करें:
cd offline-quickstart-lab/app npm install node server.js
Ctrl-c की मदद से, सर्वर को किसी भी समय बंद किया जा सकता है.
अपना ब्राउज़र खोलें और localhost:8081/ पर जाएं. आपको दिखेगा कि साइट एक सामान्य और स्टैटिक वेब पेज है.
ध्यान दें: सभी सर्विस वर्कर का रजिस्ट्रेशन रद्द करें और लोकल होस्ट के लिए सभी सर्विस वर्कर कैश मिटाएं, ताकि वे लैब में कोई रुकावट न डालें. Chrome DevTools में, ऐप्लिकेशन टैब के स्टोरेज मिटाएं सेक्शन में जाकर, साइट का डेटा मिटाएं पर क्लिक करके ऐसा किया जा सकता है.
अपने पसंदीदा टेक्स्ट एडिटर में offline-quickstart-lab/app/ फ़ोल्डर खोलें. आपको app/ फ़ोल्डर में लैब बनानी होगी.
इस फ़ोल्डर में ये चीज़ें शामिल हैं:
images/फ़ोल्डर में सैंपल इमेज मौजूद हैंstyles/main.cssमुख्य स्टाइलशीट हैindex.htmlहमारी सैंपल साइट का मुख्य एचटीएमएल पेज हैpackage-lock.jsonऔरpackage.json, ऐप्लिकेशन की डिपेंडेंसी को ट्रैक करते हैं. इस मामले में, सिर्फ़ लोकल डेवलपमेंट सर्वर के लिए डिपेंडेंसी होती हैंserver.jsटेस्टिंग के लिए एक लोकल डेवलपमेंट सर्वर हैservice-worker.jsसर्विस वर्कर फ़ाइल है. फ़िलहाल, यह खाली है
साइट में बदलाव करने से पहले, आइए Lighthouse की मदद से ऑडिट करते हैं, ताकि यह देखा जा सके कि किन चीज़ों में सुधार किया जा सकता है.
Chrome में ऐप्लिकेशन पर वापस जाएं और डेवलपर टूल का ऑडिट टैब खोलें. आपको Lighthouse आइकॉन और कॉन्फ़िगरेशन के विकल्प दिखने चाहिए. डिवाइस के लिए "मोबाइल" चुनें. सभी ऑडिट चुनें. थ्रॉटलिंग के दोनों विकल्पों में से कोई एक चुनें. इसके बाद, स्टोरेज खाली करें को चुनें:
ऑडिट चलाएं पर क्लिक करें. ऑडिट पूरी होने में कुछ समय लगता है.
जानकारी
ऑडिट पूरी होने के बाद, आपको डेवलपर टूल में स्कोर वाली रिपोर्ट दिखेगी. इसमें स्कोर दिखने चाहिए. जैसे, यहां दिए गए स्कोर (स्कोर बिलकुल एक जैसे नहीं हो सकते):
ध्यान दें: Lighthouse स्कोर अनुमानित होते हैं. ये आपके एनवायरमेंट से प्रभावित हो सकते हैं. उदाहरण के लिए, अगर आपने बहुत सारी ब्राउज़र विंडो खुली रखी हैं. ऐसा हो सकता है कि आपके स्कोर, यहां दिखाए गए स्कोर से अलग हों.
साथ ही, प्रोग्रेसिव वेब ऐप्लिकेशन सेक्शन कुछ ऐसा दिखना चाहिए:
रिपोर्ट में पांच कैटगरी में स्कोर और मेट्रिक होती हैं:
- प्रोग्रेसिव वेब ऐप्लिकेशन
- परफ़ॉर्मेंस
- सुलभता
- सबसे सही तरीके
- SEO
जैसा कि आप देख सकते हैं, प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) कैटगरी में हमारे ऐप्लिकेशन को खराब स्कोर मिला है. चलिए, अपने स्कोर को बेहतर बनाते हैं!
रिपोर्ट के PWA सेक्शन को देखें और देखें कि इसमें क्या जानकारी मौजूद नहीं है.
सर्विस वर्कर रजिस्टर करना
रिपोर्ट में बताई गई गड़बड़ियों में से एक यह है कि कोई सर्विस वर्कर रजिस्टर नहीं किया गया है. फ़िलहाल, हमारे पास app/service-worker.js पर एक खाली सर्विस वर्कर फ़ाइल है.
index.html के सबसे नीचे, क्लोज़िंग </body> टैग से ठीक पहले यह स्क्रिप्ट जोड़ें:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js')
.then(reg => {
console.log('Service worker registered! 😎', reg);
})
.catch(err => {
console.log('😥 Service worker registration failed: ', err);
});
});
}
</script>जानकारी
यह कोड, पेज लोड होने के बाद खाली service-worker.js सर्विस वर्कर फ़ाइल को रजिस्टर करता है. हालांकि, मौजूदा सर्विस वर्कर फ़ाइल खाली है और इससे कुछ नहीं होगा. आइए, अगले चरण में सेवा कोड जोड़ते हैं.
प्रीकैश किए गए संसाधन
रिपोर्ट में एक और गड़बड़ी के बारे में बताया गया है. इसमें कहा गया है कि ऑफ़लाइन होने पर, ऐप्लिकेशन 200 स्टेटस कोड का जवाब नहीं देता है. इस समस्या को हल करने के लिए, हमें अपने सर्विस वर्कर को अपडेट करना होगा.
सर्विस वर्कर फ़ाइल (service-worker.js) में यह कोड जोड़ें:
const cacheName = 'cache-v1';
const precacheResources = [
'/',
'index.html',
'styles/main.css',
'images/space1.jpg',
'images/space2.jpg',
'images/space3.jpg'
];
self.addEventListener('install', event => {
console.log('Service worker install event!');
event.waitUntil(
caches.open(cacheName)
.then(cache => {
return cache.addAll(precacheResources);
})
);
});
self.addEventListener('activate', event => {
console.log('Service worker activate event!');
});
self.addEventListener('fetch', event => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(caches.match(event.request)
.then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
})
);
});अब ब्राउज़र पर वापस जाएं और साइट को रीफ़्रेश करें. कंसोल में जाकर देखें कि सर्विस वर्कर:
- रजिस्टर्ड
- इंस्टॉल किया गया
- सक्रिय किया गया
ध्यान दें: अगर आपने पहले ही सर्विस वर्कर को रजिस्टर कर लिया है या आपको सभी इवेंट ट्रिगर करने में समस्या आ रही है, तो सभी सर्विस वर्कर को अनरजिस्टर करें और पेज को रीफ़्रेश करें. अगर ऐसा करने से भी समस्या ठीक नहीं होती है, तो ऐप्लिकेशन के सभी इंस्टेंस बंद करें और उसे फिर से खोलें.
इसके बाद, Ctrl + c चलाकर, अपनी कमांड लाइन में लोकल डेवलपमेंट सर्वर को बंद करें. साइट को फिर से रीफ़्रेश करें और देखें कि सर्वर ऑफ़लाइन होने के बावजूद, यह लोड हो रही है!
ध्यान दें: आपको कंसोल में यह गड़बड़ी दिख सकती है कि सेवा देने वाले वर्कर को फ़ेच नहीं किया जा सका: An unknown error occurred when fetching the script. service-worker.js Failed to load resource: net::ERR_CONNECTION_REFUSED. यह गड़बड़ी इसलिए दिखती है, क्योंकि ब्राउज़र, सर्विस वर्कर स्क्रिप्ट को फ़ेच नहीं कर सका. ऐसा इसलिए हुआ, क्योंकि साइट ऑफ़लाइन है. हालांकि, ऐसा होना सामान्य है, क्योंकि हम सर्विस वर्कर का इस्तेमाल करके, खुद को कैश मेमोरी में सेव नहीं कर सकते. ऐसा न करने पर, उपयोगकर्ता का ब्राउज़र हमेशा के लिए एक ही सर्विस वर्कर पर अटका रहेगा!
जानकारी
जब रजिस्ट्रेशन स्क्रिप्ट, सर्विस वर्कर को index.html में रजिस्टर कर देती है, तब सर्विस वर्कर install इवेंट होता है. इस इवेंट के दौरान, install इवेंट लिसनर, नाम वाली कैश मेमोरी खोलता है. साथ ही, cache.addAll तरीके से बताई गई फ़ाइलों को कैश मेमोरी में सेव करता है. इसे "प्रीकैशिंग" कहा जाता है, क्योंकि यह install इवेंट के दौरान होती है. आम तौर पर, यह तब होता है, जब कोई उपयोगकर्ता पहली बार आपकी साइट पर आता है.
जब कोई सर्विस वर्कर इंस्टॉल हो जाता है और फ़िलहाल कोई दूसरा सर्विस वर्कर पेज को कंट्रोल नहीं कर रहा होता है, तो नया सर्विस वर्कर "चालू" हो जाता है. इससे सर्विस वर्कर में activate इवेंट लिसनर ट्रिगर हो जाता है और वह पेज को कंट्रोल करने लगता है.
जब किसी ऐसे पेज से संसाधनों का अनुरोध किया जाता है जिसे चालू किए गए सर्विस वर्कर कंट्रोल करते हैं, तो अनुरोध सर्विस वर्कर से होकर गुज़रते हैं. जैसे, नेटवर्क प्रॉक्सी. हर अनुरोध के लिए, fetch इवेंट ट्रिगर होता है. हमारे सर्विस वर्कर में, fetch इवेंट लिसनर, कैश मेमोरी में खोज करता है. अगर कैश मेमोरी में संसाधन उपलब्ध होता है, तो वह उसका जवाब देता है. अगर रिसॉर्स को कैश मेमोरी में सेव नहीं किया गया है, तो सामान्य तरीके से रिसॉर्स का अनुरोध किया जाता है.
संसाधन कैश मेमोरी में सेव करने से, ऐप्लिकेशन ऑफ़लाइन काम कर पाता है. ऐसा इसलिए, क्योंकि उसे नेटवर्क अनुरोधों की ज़रूरत नहीं पड़ती. अब हमारा ऐप्लिकेशन, ऑफ़लाइन होने पर 200 स्टेटस कोड का जवाब दे सकता है!
ध्यान दें: इस उदाहरण में, ऐक्टिवेट इवेंट का इस्तेमाल सिर्फ़ लॉग इन करने के लिए किया गया है. इस इवेंट को इसलिए शामिल किया गया है, ताकि सर्विस वर्कर के लाइफ़साइकल से जुड़ी समस्याओं को डीबग किया जा सके.
वैकल्पिक: कैश मेमोरी स्टोरेज सेक्शन को बड़ा करके, डेवलपर टूल के ऐप्लिकेशन टैब में भी कैश मेमोरी में सेव किए गए संसाधन देखे जा सकते हैं:
node server.js की मदद से डेवलपमेंट सर्वर को फिर से चालू करें और साइट को रीफ़्रेश करें. इसके बाद, डेवलपर टूल में ऑडिट टैब को फिर से खोलें. साथ ही, सबसे ऊपर बाएं कोने में मौजूद प्लस के निशान वाले नया ऑडिट को चुनकर, Lighthouse ऑडिट को फिर से चलाएं. ऑडिट पूरी होने के बाद, आपको दिखेगा कि हमारे PWA का स्कोर काफ़ी बेहतर हो गया है. हालांकि, इसमें अब भी सुधार किया जा सकता है. हम अगले सेक्शन में अपने स्कोर को बेहतर बनाना जारी रखेंगे.
ध्यान दें: यह सेक्शन ज़रूरी नहीं है, क्योंकि वेब ऐप्लिकेशन इंस्टॉल करने का बैनर टेस्ट करना, लैब के दायरे से बाहर है. रिमोट डीबगिंग का इस्तेमाल करके, इसे खुद आज़माया जा सकता है.
हमारे PWA का स्कोर अब भी अच्छा नहीं है. रिपोर्ट में, कुछ अन्य गड़बड़ियों के बारे में भी बताया गया है. जैसे, उपयोगकर्ता को हमारा वेब ऐप्लिकेशन इंस्टॉल करने के लिए प्रॉम्प्ट नहीं किया जाएगा. इसके अलावा, हमने पता बार में स्प्लैश स्क्रीन या ब्रैंड के रंग कॉन्फ़िगर नहीं किए हैं. हम इन समस्याओं को ठीक कर सकते हैं. साथ ही, कुछ अन्य शर्तों को पूरा करके, होम स्क्रीन पर जोड़ें सुविधा को धीरे-धीरे लागू कर सकते हैं. सबसे अहम बात यह है कि हमें एक मेनिफ़ेस्ट फ़ाइल बनानी होगी.
मेनिफ़ेस्ट फ़ाइल बनाना
app/ में manifest.json नाम की एक फ़ाइल बनाएं और उसमें यह कोड जोड़ें:
{
"name": "Space Missions",
"short_name": "Space Missions",
"lang": "en-US",
"start_url": "/index.html",
"display": "standalone",
"theme_color": "#FF9800",
"background_color": "#FF9800",
"icons": [
{
"src": "images/touch/icon-128x128.png",
"sizes": "128x128"
},
{
"src": "images/touch/icon-192x192.png",
"sizes": "192x192"
},
{
"src": "images/touch/icon-256x256.png",
"sizes": "256x256"
},
{
"src": "images/touch/icon-384x384.png",
"sizes": "384x384"
},
{
"src": "images/touch/icon-512x512.png",
"sizes": "512x512"
}
]
}मेनिफ़ेस्ट में जिन इमेज का रेफ़रंस दिया गया है वे ऐप्लिकेशन में पहले से मौजूद हैं.
इसके बाद, index.html में मौजूद <head> टैग के सबसे नीचे यह एचटीएमएल जोड़ें:
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Space Missions">
<meta name="apple-mobile-web-app-title" content="Space Missions">
<meta name="theme-color" content="#FF9800">
<meta name="msapplication-navbutton-color" content="#FF9800">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/index.html">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" sizes="128x128" href="/images/touch/icon-128x128.png">
<link rel="apple-touch-icon" sizes="128x128" href="/images/touch/icon-128x128.png">
<link rel="icon" sizes="192x192" href="icon-192x192.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/touch/icon-192x192.png">
<link rel="icon" sizes="256x256" href="/images/touch/icon-256x256.png">
<link rel="apple-touch-icon" sizes="256x256" href="/images/touch/icon-256x256.png">
<link rel="icon" sizes="384x384" href="/images/touch/icon-384x384.png">
<link rel="apple-touch-icon" sizes="384x384" href="/images/touch/icon-384x384.png">
<link rel="icon" sizes="512x512" href="/images/touch/icon-512x512.png">
<link rel="apple-touch-icon" sizes="512x512" href="/images/touch/icon-512x512.png">साइट पर वापस जाएं. डेवलपर टूल के ऐप्लिकेशन टैब में, स्टोरेज खाली करें सेक्शन को चुनें. इसके बाद, साइट का डेटा मिटाएं पर क्लिक करें. इसके बाद, पेज को रीफ़्रेश करें. अब मेनिफ़ेस्ट सेक्शन चुनें. आपको manifest.json फ़ाइल में कॉन्फ़िगर किए गए आइकॉन और कॉन्फ़िगरेशन के विकल्प दिखने चाहिए. अगर आपको अपने बदलाव नहीं दिखते हैं, तो साइट को गुप्त विंडो में खोलें और फिर से देखें.
जानकारी
manifest.json फ़ाइल से ब्राउज़र को यह पता चलता है कि आपके ऐप्लिकेशन के कुछ प्रोग्रेसिव पहलुओं को कैसे स्टाइल और फ़ॉर्मैट करना है. जैसे, ब्राउज़र क्रोम, होम स्क्रीन आइकॉन, और स्प्लैश स्क्रीन. इसका इस्तेमाल, अपने वेब ऐप्लिकेशन को standalone मोड में खोलने के लिए भी किया जा सकता है. जैसे, कोई नेटिव ऐप्लिकेशन (दूसरे शब्दों में कहें, तो ब्राउज़र के बाहर) खुलता है.
इस लेख को लिखते समय, कुछ ब्राउज़र के लिए अब भी सहायता उपलब्ध कराई जा रही है. साथ ही, <meta> टैग, कुछ ब्राउज़र के लिए इन सुविधाओं का सबसेट कॉन्फ़िगर करते हैं. इन ब्राउज़र के लिए, अब तक पूरी सहायता उपलब्ध नहीं कराई गई है.
हमें index.html के कैश मेमोरी में सेव किए गए पुराने वर्शन को हटाने के लिए, साइट का डेटा मिटाना पड़ा. ऐसा इसलिए, क्योंकि उस वर्शन में मेनिफ़ेस्ट लिंक नहीं था. Lighthouse का कोई दूसरा ऑडिट चलाकर देखें और देखें कि PWA स्कोर में कितना सुधार हुआ!
ऐप्लिकेशन इंस्टॉल करने का प्रॉम्प्ट चालू करना
हमारे ऐप्लिकेशन को इंस्टॉल करने का अगला चरण, उपयोगकर्ताओं को इंस्टॉल करने का प्रॉम्प्ट दिखाना है. Chrome 67 में, उपयोगकर्ताओं को अपने-आप सूचना मिलती थी. हालांकि, Chrome 68 से, उपयोगकर्ता के जेस्चर के जवाब में, इंस्टॉल करने का अनुरोध प्रोग्राम के हिसाब से चालू किया जाना चाहिए.
नीचे दिए गए कोड का इस्तेमाल करके, index.html के सबसे ऊपर (<main> टैग के ठीक बाद) "ऐप्लिकेशन इंस्टॉल करें" बटन और बैनर जोड़ें:
<section id="installBanner" class="banner">
<button id="installBtn">Install app</button>
</section>इसके बाद, styles/main.css में ये स्टाइल जोड़कर बैनर को स्टाइल करें:
.banner {
align-content: center;
display: none;
justify-content: center;
width: 100%;
}फ़ाइल सेव करें. आखिर में, index.html में यह स्क्रिप्ट टैग जोड़ें:
<script>
let deferredPrompt;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = event;
// Attach the install prompt to a user gesture
document.querySelector('#installBtn').addEventListener('click', event => {
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
// Update UI notify the user they can add to home screen
document.querySelector('#installBanner').style.display = 'flex';
});
</script>फ़ाइल सेव करें. Android डिवाइस पर Chrome में ऐप्लिकेशन खोलें. इसके लिए, रिमोट डीबगिंग का इस्तेमाल करें. पेज लोड होने पर, आपको "ऐप्लिकेशन इंस्टॉल करें" बटन दिखेगा. यह बटन आपको डेस्कटॉप पर नहीं दिखेगा. इसलिए, पक्का करें कि आपने मोबाइल पर इसकी जांच की हो. बटन पर क्लिक करें. इसके बाद, 'होम स्क्रीन पर जोड़ें' प्रॉम्प्ट दिखना चाहिए. अपने डिवाइस पर ऐप्लिकेशन इंस्टॉल करने के लिए, यह तरीका अपनाएं. इंस्टॉल होने के बाद, आपको होम स्क्रीन पर बनाए गए नए आइकॉन पर टैप करके, वेब ऐप्लिकेशन को स्टैंडअलोन मोड (ब्राउज़र के बाहर) में खोलने का विकल्प मिलेगा.
जानकारी
एचटीएमएल और सीएसएस कोड, एक छिपा हुआ बैनर और बटन जोड़ता है. इसका इस्तेमाल करके, हम उपयोगकर्ताओं को इंस्टॉलेशन प्रॉम्प्ट चालू करने की अनुमति दे सकते हैं.
beforeinstallprompt इवेंट ट्रिगर होने के बाद, हम डिफ़ॉल्ट अनुभव को रोक देते हैं. इसमें Chrome 67 और इससे पहले के वर्शन, उपयोगकर्ताओं को अपने-आप इंस्टॉल करने के लिए प्रॉम्प्ट करते हैं. साथ ही, हम beforeinstallevent को ग्लोबल deferredPrompt वैरिएबल में कैप्चर करते हैं. इसके बाद, "ऐप्लिकेशन इंस्टॉल करें" बटन को कॉन्फ़िगर किया जाता है, ताकि beforeinstallevent के prompt() तरीके से प्रॉम्प्ट दिखाया जा सके. जब उपयोगकर्ता कोई विकल्प चुन लेता है (इंस्टॉल करना है या नहीं), तो userChoice प्रॉमिस, उपयोगकर्ता के चुने गए विकल्प (outcome) के साथ पूरा हो जाता है. इसके बाद, हम इंस्टॉल बटन दिखाते हैं.
आपने Lighthouse की मदद से साइटों की ऑडिट करने का तरीका और ऑफ़लाइन फ़ंक्शन की बुनियादी बातों को लागू करने का तरीका जान लिया है. अगर आपने वैकल्पिक सेक्शन पूरे किए हैं, तो आपने होम स्क्रीन पर वेब ऐप्लिकेशन इंस्टॉल करने का तरीका भी जान लिया है!
ज़्यादा रिसॉर्स
Lighthouse एक ओपन सोर्स टूल है! इसे फ़ोर्क किया जा सकता है, अपने टेस्ट जोड़े जा सकते हैं, और बग की शिकायतें की जा सकती हैं. Lighthouse, बिल्ड प्रोसेस के साथ इंटिग्रेट करने के लिए, कमांड लाइन टूल के तौर पर भी उपलब्ध है.
PWA ट्रेनिंग कोर्स में मौजूद सभी कोडलैब देखने के लिए, कोर्स का वेलकम कोडलैब देखें/