🐷 👛 🤦🏽 15 मिनट में कुछ भी नहीं प्रगतिशील वेब अनुप्रयोग का विकास 🔭 🌇 👩🏼‍🤝‍👨🏽

Google Play के पास एक ऐप है जो चिलंगो लैब द्वारा विकसित किया गया है, जिसमें एक मिलियन से अधिक डाउनलोड और एक उच्च रेटिंग है। इसे कुछ भी नहीं कहा जाता है, जिसका अनुवाद "कुछ भी नहीं" के रूप में किया जा सकता है और यह अद्भुत है कि यह पूरी तरह से कुछ भी नहीं करता है। सच है, एक सुखद ईस्टर अंडे इसमें छिपा हुआ है, लेकिन इससे मामला नहीं बदलता है। यदि आप इस एप्लिकेशन का विश्लेषण करते हैं, तो पता चलता है कि इसका आकार 14 एमबी है, स्थापना के दौरान इसे 19.24 एमबी लगता है।

सामग्री के लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, का कहना है कि इस आवेदन को देखकर, वह आश्चर्यचकित था कि क्या इसे फिर से लिखना संभव था ताकि यह कम जगह ले सके।

वह सफल हुआ। अर्थात्, उन्होंने HTML, CSS और जावास्क्रिप्ट का उपयोग करके कुछ भी नहीं की कार्यक्षमता को फिर से बनाया, जिससे यह एक प्रगतिशील वेब अनुप्रयोग ( PWA , प्रगतिशील वेब ऐप) में बदल गया। यह इंटरनेट कनेक्शन के बिना काम करता है, आप इसे मुख्य स्क्रीन से एक नियमित अनुप्रयोग की तरह कह सकते हैं। एक नियमित Android एप्लिकेशन और इसकी PWA प्रतिलिपि के बीच मुख्य अंतर आकार है। पहला, रिकॉल, डिवाइस पर 19.24 एमबी का है। दूसरा - 205 Kb।

सामान्य आवेदन और PWA

कुछ नहीं के लिए प्रतीक बनाना

इससे पहले कि मैं आपको कोड के बारे में बताऊं, पीडब्ल्यूए नथिंग के लिए एक आइकन बनाएं। इस समस्या को हल करने के लिए, मैंने उत्कृष्ट ओपन सोर्स टूल लॉन्चर आइकन जेनरेटर का उपयोग किया ।

लॉन्चर आइकन जेनरेटर

लॉन्चर आइकन जेनरेटर का उपयोग करके, मैं अपने कुछ भी नहीं विकल्प के लिए तुरंत एक आइकन बनाने में सक्षम था। कार्यक्रम स्वचालित रूप से विभिन्न आकारों के आइकन उत्पन्न करता है।

PWACompat

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

<link rel="manifest" href="manifest.json" /> <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"    crossorigin="anonymous"></script>

सफारी (iOS) में स्प्लैश स्क्रीन कैसी दिखती है।

सफ़ारी छप स्क्रीन

लेकिन यह PWACompat की क्षमताओं तक सीमित नहीं है। विशेष रूप से, यह पुस्तकालय आपको विभिन्न ब्राउज़रों के लिए मेटा टैग बनाने की अनुमति देता है, जो यह बताता है कि पीडब्ल्यूए को कैसे खोलना चाहिए, और वेब एप्लिकेशन के प्रकट होने के आधार पर थीम का रंग भी निर्धारित करता है।

होम स्क्रीन पर एक एप्लिकेशन जोड़ना

मेरी पसंदीदा पीडब्ल्यूए विशेषताओं में से एक को A2HS (होम स्क्रीन में जोड़ें) कहा जाता है, इसके लिए धन्यवाद आप मुख्य स्क्रीन पर एप्लिकेशन लॉन्च करने के लिए एक आइकन जोड़ सकते हैं। हालाँकि, एंड्रॉइड पर Chrome 68 से शुरू होकर, बड़े A2HS बैनर के बजाय, उपयुक्त प्रस्ताव के साथ एक छोटा सूचना पैनल अब प्रदर्शित होता है।

अलविदा A2HS बैनर (क्रोम 67 और पहले)

किसी भी स्थिति में, डैशबोर्ड एक मध्यवर्ती समाधान है, एक बार यह सुविधा क्रोम से हटा दी जाएगी। इसलिए मुझे PWA नथिंग के लिए एक अच्छे A2HS इंटरफ़ेस बनाने की आवश्यकता थी।

बटन स्थापित करें (बाएं), स्थापित करें बटन और A2HS पैनल (केंद्र), होम स्क्रीन डायलॉग बॉक्स में जोड़ें (दाएं)

इस स्थिति में, यदि ब्राउज़र एप्लिकेशन को मुख्य स्क्रीन पर जोड़ने की क्षमता का समर्थन करता है, तो यह पृष्ठ के शीर्ष पर, इंस्टॉल बटन को प्रदर्शित करेगा। जब उपयोगकर्ता इस बटन पर क्लिक करता है, तो Add to Home Screen डायलॉग बॉक्स कहा जाता है।

यहाँ प्रासंगिक कोड है।

 var installPromptEvent; var btnInstall = document.querySelector('#install'); window.addEventListener('beforeinstallprompt', function (event) {   event.preventDefault();   installPromptEvent = event;   btnInstall.removeAttribute('disabled'); }); btnInstall.addEventListener('click', function () {   btnInstall.setAttribute('disabled', '');   installPromptEvent.prompt();   installPromptEvent.userChoice.then((choice) => {       if (choice.outcome === 'accepted') {           console.log('User accepted the A2HS prompt');       } else {           console.log('User dismissed the A2HS prompt');       }       installPromptEvent = null;   }); });

यदि साइट A2HS मानदंडों को पूरा करती है, तो ब्राउज़र पहले beforeinstallprompt इवेंट beforeinstallprompt ।

ईस्टर अंडा

ध्यान दें, एक बिगाड़ने वाला होगा!

कड़े शब्दों में, PWA नथिंग ईस्टर एग एक कोनामी कोड और YouTube पर 10 घंटे का वीडियो है ।

ईस्टर अंडा कॉल (ऊपर, नीचे, नीचे, बाएं, दाएं, बाएं, दाएं और दो स्पर्श)

उपयोगकर्ता द्वारा कोड पूरा करने के बाद, PWA इस वीडियो को खोलेगा।

अपने आवेदन में कोनामी कोड समर्थन जोड़ने के लिए, मैंने कोनामी-जेएस लाइब्रेरी का उपयोग किया। यह छोटा है, साथ काम करना आसान है, और, अन्य चीजों के अलावा, यह मोबाइल उपकरणों का समर्थन करता है। यहां मेरे PWA और मूल Android एप्लिकेशन के बीच एकमात्र अंतर है। विशेष रूप से, जहां मैं, कोड दर्ज करते समय, दो टच करने की आवश्यकता होती है, मूल एप्लिकेशन में आपको बटन के साथ पैनल का उपयोग करने की आवश्यकता होती है।

खींचते समय पृष्ठ ताज़ा करें

मैं, आवेदन पर काम करने की प्रक्रिया में, एक छोटी सी समस्या थी। जब कोई उपयोगकर्ता किसी पृष्ठ को मोबाइल डिवाइस पर नीचे खींचने की कोशिश करता है, तो इससे पृष्ठ ताज़ा (पुल-इन-रिफ़र) हो जाता है। मुझे इसकी आवश्यकता नहीं है

अनवांटेड पेज रिफ्रेश

सौभाग्य से, इस समस्या से निपटना आसान है। आपको बस सीएसएस कोड की एक पंक्ति की आवश्यकता है:

 overscroll-behavior-y: contain

होस्टिंग

नेटलाइज़ को PWA नथिंग के लिए होस्टिंग के रूप में चुना गया था। यह आधुनिक वेब परियोजनाओं के लिए एक सार्वभौमिक मंच है। मेरे द्वारा Netlify पर अपने एप्लिकेशन को होस्ट करने का निर्णय लेने का कारण यह है कि यहां कॉन्फ़िगर करने के लिए सब कुछ बहुत आसान है। इसके अलावा, यह सब मुफ़्त है।

Netlify कंट्रोल पैनल

Netlify पर एक परियोजना को तैनात करने के लिए, आप तीन तरीकों में से एक का उपयोग कर सकते हैं। हम कमांड लाइन टूल के बारे में बात कर रहे हैं, मैनुअल तैनाती के बारे में, और निरंतर तैनाती के बारे में।

Tools Netlify कमांड लाइन टूल्स

यह वेब परियोजनाओं को तैनात करने का एक उत्कृष्ट तरीका है। इसका उपयोग करने के लिए, आपको नेटलाइज़ सीएलआई स्थापित करने की आवश्यकता है, अपने खाते में लॉग इन करें, प्रोजेक्ट को इनिशियलाइज़ करें और इसे तैनात करें। यह इस तरह दिखता है:

 > brew tap netlify/netlifyctl > brew install netlifyctl > netlifyctl login > netlifyctl init > netlifyctl deploy

▍मानसिक तैनाती

यह विधि शायद सबसे आसान है, कुछ माउस आंदोलनों के साथ आवेदन परिनियोजन किया जाता है।

मैनुअल तैनाती

मुझे यह फीचर इतना पसंद आया कि मैं कुछ इस तरह से फायरबेस में आना चाहूंगा। तथ्य की बात के रूप में, एक परियोजना की तैनाती एक वेब पेज पर अपने फ़ोल्डर को खींचने और छोड़ने के लिए नीचे आती है।

Loyment निरंतर तैनाती

अब मैं इस विशेष विधि का उपयोग करता हूं। जब मैंने अपने GitHub रिपॉजिटरी को Netlify से जोड़ा, उसके बाद जब मैं वहां कोड भेजता हूं, तो Netlify स्वचालित रूप से प्रोजेक्ट बनाता है और वितरित करता है। जादू है, अन्यथा नहीं।

▍HTTPS

चूंकि PWA को एक सुरक्षित स्रोत से HTTPS पर सेवा दी जानी चाहिए, इसलिए मुझे यह सुनिश्चित करने की आवश्यकता है कि HTTPS मेरी साइट पर सक्षम था। सच है, मुझे इस क्षेत्र में बहुत प्रयास करने की आवश्यकता नहीं थी, क्योंकि नेटलाइज़ अपने स्वयं के उपयोगकर्ता डोमेन सहित सभी डोमेन के लिए मुफ्त HTTPS प्रदान करता है।

HTTPS

इसके अलावा, Netlify कंट्रोल पैनल से आप HTTPS ( HSTS ) में जबरन ट्रांजेक्शन को सक्षम कर सकते हैं। यह साइट के लिए चल रहे संरक्षण प्रदान करेगा।

परियोजना विश्लेषण लाइटहाउस के साथ

लाइटहाउस वेब पेजों की गुणवत्ता में सुधार के लिए एक ओपन-सोर्स स्वचालित उपकरण है। इसकी मदद से, आप किसी भी पृष्ठ का विश्लेषण कर सकते हैं - सार्वजनिक, या प्रमाणीकरण की आवश्यकता। यह, अन्य बातों के अलावा, आप पृष्ठों के प्रदर्शन और पहुंच का विश्लेषण करने, प्रगतिशील वेब अनुप्रयोगों का पता लगाने की अनुमति देता है।

प्रकाशस्तंभ

मेरा आवेदन प्रदर्शन के मामले में 97 अंक और अन्य संकेतकों में 100 अंक हासिल करने में कामयाब रहा। यहाँ पूरी रिपोर्ट है ।

परिणाम

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

प्रिय पाठकों! आपको क्या लगता है कि आप Android ऐप्स PWA के रूप में फिर से बनाना चाहते हैं?

15 मिनट में कुछ भी नहीं प्रगतिशील वेब अनुप्रयोग का विकास