How To Make Progressive Web App (PWA) For Blogger | प्रोग्रेसिव वेब ऐप्स

कई ब्रांड अपनी वेबसाइटों के लिए Progressive Web App (PWA) बनाते हैं, ताकि उपयोगकर्ता अपने स्मार्टफ़ोन पर Super Lite Web ऐप इंस्टॉल कर सकें और उस साइट को ब्राउज़ करते समय एक ऐप जैसा अनुभव प्राप्त कर सकें।

Progressive Web App ब्रांडिंग के लिए भी बढ़िया हैं, क्योंकि एक बार उपयोगकर्ता इसे इंस्टॉल कर लेता है, तो यह उनकी होम स्क्रीन पर रहता है और ब्रांड का Logo User के दिमाग में रहता है। जिससे वेबसाइट पर ट्रैफिक भी आई होता है ।

इंटरनेट पर एक अफवाह है कि ब्लॉगर के लिए PWA नहीं बनाए जा सकते हैं। लेकिन आज मैं इसे गलत साबित करने जा रहा हूं,आज आपको बताऊंगा कि कैसे आप अपने ब्लॉगर वेबसाइट पर PWA यानि प्रोग्रेसिव वेब ऐप को इंस्टॉल कर सकते हो ।

प्रोग्रेसिव वेब ऐप्स क्या हैं? What are Progressive Web Apps?

जब आप कुछ वेबसाइटों पर जाते हैं तो Google Chrome में "Add To Home Screen" पॉप अप देखा होगा ठीक है, वह पॉप तब दिखाया जाता है जब उस वेबसाइट पर PWA को इंस्टॉल किया हुआ होता है ।

जब आप “ Add To Home Screen ” बटन पर क्लिक करते हैं, तो वेबसाइट का लोगो आपके फोन की Home Screen पर ऐप के रूप में जुड़ जाता है।

हमने प्रोग्रेसिव वेब ऐप्स को हमारी वेबसाइट पर लगाया है जिसका Demo आप नीचे बटन पर क्लिक करके देख सकते है ।

Demo

चलिए बिना टाइम बर्बाद किए आपको बताते है कि, अब जब आपको PWA क्या है, इसके बारे में स्पष्ट जानकारी मिल गई है, तो आइए एक ब्लॉगर साइट के लिए एक PWA बनाने का तरीका आपको समझते है ।

Steps To Make Progressive Web App For Blogger ब्लॉगर के लिए Progressive Web App बनाने के चरण

Step - 1: Get The Correct Favicons (favicon को बनाना)

यह सबसे महत्वपूर्ण Steps है जिसे आपको अपने ब्लॉगर ब्लॉग के लिए PWA बनाने के लिए करने की आवश्यकता है।
https://favicon.io पर जाएं ।
यदि आपके पास अपनी वेबसाइट के लिए पहले से ही एक अच्छा लोगो है, तो "Generate from Image" विकल्प चुनें या फिर आप "Generate from Text" विकल्प चुन सकते हैं।

If you are using the “Generate from text” option and want the background of your logo to be transparent, change the background colour value to #FFFFFF00

अपने कंप्यूटर या मोबाइल पर Favicon Zip फ़ाइल डाउनलोड करें और निम्न 5 Favicon को एक फ़ोल्डर में निकालें : -

favicon-16×16.png
favicon-32×32.png
android-chrome-192×192.png
android-chrome-512×512.png
apple-touch-icon.png

Step - 2: Upload The Pictures To A Draft

Blogger.com पर जाएं और एक Draft पोस्ट बनाएं और Download किए गए Favicon में से अलग किए 5 Favicon को अपलोड करें (Original Size )
और फ़िर पोस्ट को सेव करें । (सुनिश्चित करें कि आप इसे पब्लिश नहीं करे,सिर्फ ड्राफ्ट में सेव करे )।

Step-3:Create The site.webmanifest File ( site.webmanifest फाइल को बनाना)

site.webmanifest फ़ाइल पर Right Click करें और Edit करें पर क्लिक करें । (open it with Notepad or any other text editor)
site.webmanifest फ़ाइल के अंदर की सभी सामग्री को हटा दें। CTRL+A के साथ सभी का चयन करें और Delete कुंजी दबाएं।
अब नीचे दिए गए कोड को कॉपी करें और अपनी site.webmanifest के अंदर पेस्ट करें ।

      {   "name": "Naukari Lift",   "short_name": "Naukari Lift",   "icons": [   {   "src": "#",   "sizes": "192x192",   "type": "image/png",   "purpose": "any maskable"   },   {   "src": "#",   "sizes": "512x512",   "type": "image/png",   "purpose": "any maskable"   }   ],   "theme_color": "#ffffff",   "background_color": "#ffffff",   "display": "standalone",   "prefer_related_applications": false,   "start_url": "yourdomian_url"   }

"Naukari Lift" को आपके Site के नाम से Replace करे और "yourdomian_url" को आपके डोमेन के Url से Replace करे । और "#" की जगह आपके द्वारा अपलोड किए गए फोटो के Url से Replace करें ,ध्यान रहे पहले Favicon की Size 192×192 और दूूसरे Favicon की Size 512 × 512 होनी चाहिए ।

Step - 4: Upload The site.webmanifest To An Online Storage

GitHub पर जाएं और साइन अप करें।
अब एक नया Repository बनाएं ।
अपने Repository को कोई भी नाम दें जो आप चाहते हैं । और इसे Public पर सेट करें ।
फिर Create repository पर क्लिक करें ।
"uploading an existing file" लिंक का उपयोग करके site.webmanifest फाइल को अपलोड करें।
अब “choose your files” पर क्लिक करें और site.webmanifest फ़ाइल ब्राउज़ करें और इसे अपलोड करें।
फिर "Commit changes" पर क्लिक करें।
अब अपनी Repository से site.webmanifest फाइल पर क्लिक करें।
अब आप PWA के लिए Raw site.webmanifest फ़ाइल के URL को कॉपी करें।
लिंक को कॉपी करें और नोटपैड में पेस्ट करें ताकि आप बाद में इसका इस्तेमाल कर सकें।

How To Make Progressive Web App (PWA) For Blogger | प्रोग्रेसिव वेब ऐप्स

Step - 5 : Create A Page To Be Used By The PWA When Device Is Offline

अपने ब्लॉग पर Title के साथ एक नया पेज बनाएं - "Offline Page For PWA।
आप अपनी इच्छानुसार Title में कुछ भी लिख सकते हैं।
यह पृष्ठ यूजर्स को तब दिखाया जाएगा जब वे आपका PWA खोलेंगे, जबकि उनका Device इंटरनेट से कनेक्टेड नहीं है।
पेज को Publish करें और उसके Url को नोट कर लें।

How To Make Progressive Web App (PWA) For Blogger | प्रोग्रेसिव वेब ऐप्स

Step -6:Set Up The Service Worker Using Cloudflare Workers

इस Step में, हम अपने PWA के लिए Cloudflare Workers का उपयोग करके serviceworker.js फ़ाइल सेट करेंगे।
अपने Cloudflare खाते में Login करें, अपने ब्लॉग का चयन करें और Workers पर क्लिक करें।
अब मैनेज वर्कर्स ऑप्शन पर क्लिक करें।
अब अपने Cloudflare Worker के लिए एक सबडोमेन चुनें। सबडोमेन आपकी पसंद का कुछ भी हो सकता है, इससे कोई फर्क नहीं पड़ता ।
Setup पर क्लिक करें ।
फिर free plan को सलेक्ट करे ।

How To Make Progressive Web App (PWA) For Blogger | प्रोग्रेसिव वेब ऐप्स

Create a Worker पर क्लिक कर अगले पेज पर जाए ।
Worker पेज लोड होने के बाद, मौजूदा स्क्रिप्ट को बाईं ओर के कॉलम से हटा दें।
नीचे दिए गए कोड को कॉपी करें।

     const js = ` 'use strict'; const CACHE_VERSION=1; let CURRENT_CACHES={offline:"offline-v1"}; const OFFLINE_URL="/p/offline-page-for-pwa.html"; function createCacheBustedRequest(a){let b=new Request(a,{cache:"reload"});if("cache"in b)return b;let c=new URL(a,self.location.href);return c.search+=(c.search?"&":"")+"cachebust="+Date.now(),new Request(c)}self.addEventListener("install",a=>{a.waitUntil(fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(a){return caches.open(CURRENT_CACHES.offline).then(function(b){return b.put(OFFLINE_URL,a)})}))}),self.addEventListener("activate",a=>{let b=Object.keys(CURRENT_CACHES).map(function(a){return CURRENT_CACHES[a]});a.waitUntil(caches.keys().then(a=>Promise.all(a.map(a=>{if(-1===b.indexOf(a))return console.log("Deleting out of date cache:",a),caches.delete(a)}))))}),self.addEventListener("fetch",a=>{("navigate"===a.request.mode||"GET"===a.request.method&&a.request.headers.get("accept").includes("text/html"))&&(console.log("Handling fetch event for",a.request.url),a.respondWith(fetch(a.request).catch(a=>(console.log("Fetch failed; returning offline page instead.",a),caches.match(OFFLINE_URL)))))});  `  async function handleRequest(request) {   return new Response(js, {     headers: {       "content-type": "application/javascript;charset=UTF-8",     },   }) }  addEventListener("fetch", event => {   return event.respondWith(handleRequest(event.request)) })

उपरोक्त कोड की तीसरी या चौथी पंक्ति में, OFFLINE_URL आपके ऑफ़लाइन पृष्ठ के URL को स्टोर करता है जिसे आपने Step 5 में बनाया था।
यदि आपका Offline Page URL कोड में दिए गए URL से अलग है (अर्थात /p/offline-page-for-pwa.html), तो इसे अपने Original Offline Page URL से बदलें।
अब कोड को अपने Worker Script कॉलम में पेस्ट करें और Save And Deploy पर क्लिक करें ।

एक बार जब यह Save कर दिया है, तो Back जाने के लिए उपर बाएं तरफ बने Back Button तीर पर क्लिक करें ।
अगले पेज पर Rename पर क्लिक करें और Worker का नाम बदलकर “ worker ” कर दें।
एक बार नाम बदलने के बाद, Cloudflare डैशबोर्ड पर वापस जाने के लिए Cloudflare के logo पर क्लिक करें ।
logo पर click के बाद आप Dashboard में चले जाएंगे ।
फिर से अपना ब्लॉग चुनें और फिर से Workers पर क्लिक करें।
अगले पेज पर Add Route पर क्लिक करें ।

रूट फ़ील्ड के अंतर्गत www.yourblogaddress/sw.js (www.yourblogaddress को अपने वास्तविक ब्लॉग Url से बदलें) टाइप करें, और Worker फ़ील्ड के अंतर्गत पहले बनाए गए Worker का चयन करें।
फिर इसको Save कर दे ।
अब www.yourblogaddress.com/sw.js पर जाकर अपने Service Worker का निरीक्षण कर सकते है ।

Step - 7:Add The Links And Scripts To Your Blog’s Theme

सबसे पहले Blogger Dashboard में लॉगिन करे ।
फिर Theme Section पर जाकर Edit Html पर क्लिक करे ।
फिर </head> टैग को सर्च करे और </head>
टैग के ऊपर नीचे दिए गए कोड को डाले ।
फिर Theme को सेव कर दे ।

 <link rel="apple-touch-icon" sizes="180x180" href="(REPLACE THIS WITH ORIGINAL Link to the 180 x 180 size picture)"/>  <link rel="icon" type="image/png" sizes="32x32" href="(REPLACE THIS WITH ORIGINAL Link to the 32 x 32 size picture)"/>  <link rel="icon" type="image/png" sizes="16x16" href="(REPLACE THIS WITH ORIGINAL Link to the 16 x 16 size picture)"/>  <link rel="manifest" href="(REPLACE THIS WITH ORIGINAL Link to the site.webmanifest)"/>

Don’t forget to replace the sample “href=” URLS with the actual URLs.

फिर से Theme Section पर जाकर Edit Html पर क्लिक करे ।
फिर </body> टैग को सर्च करे और </body>
टैग के ऊपर नीचे दिए गए कोड को डाले ।
फिर Theme को सेव कर दे ।

 <script type='text/javascript'>  if('serviceWorker' in navigator) {   navigator.serviceWorker            .register('/sw.js')            .then(function() { console.log("Service Worker Registered"); }); }  </script>

Conclusion

आज की इस पोस्ट में हमने ब्लॉगर साइट के लिए एक PWA बनाने का तरीका समझा यदि आपको कोई भी दिक्कत आ रही है तो आप कॉमेंट करे हम आपकी सहायता अवश्य करेंगे। और इस ही पोस्ट के लिए समय समय पर वेबसाइट पर विजिट करते रहे और पोस्ट को रेटिंग देना न भूले ।

Cari Blog Ini

phamdom