PWA: मोबाइल क्रांति में आपका स्वागत है

विषय

• PWA की चढ़ाई
• PWA आज कार्य कर रहा है
• इंस्टालेशन
• ऑफ़लाइन और तत्काल लॉन्च
• प्रथम श्रेणी का अनुभव
• ऐप स्टोर
• प्लेटफार्म एकीकरण
• डिजाइन और यूएक्स चुनौतियां
• पीडब्ल्यूए का वर्ष

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

• प्रोग्रेसिव वेब ऐप कैसे बनाएं

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

एक प्रगतिशील वेब ऐप की परिभाषा ठोस नहीं है। PWA सिर्फ एक वेब ऐप है जो वेब प्लेटफॉर्म में कई नए एपीआई और क्षमताओं का उपयोग करता है, जो समान कोड बेस के साथ हर प्लेटफॉर्म पर ऐप जैसा अनुभव प्रदान करने के लिए प्रगतिशील एन्हांसमेंट का उपयोग करता है। यह सर्वोत्तम प्रथाओं और एपीआई उपयोग का एक सेट है जो आपके उपयोगकर्ताओं के लिए एक उत्कृष्ट ऐप जैसा अनुभव बनाता है, इसलिए ऐसा नहीं है कि आपके पास पीडब्ल्यूए है या नहीं; ऐसा लगता है कि आपकी साइट कमोबेश PWA है।

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

PWA की चढ़ाई

जबकि PWA नाम 2015 में एलेक्स रसेल द्वारा क्रोम टीम के लिए Google पर काम कर रहे एलेक्स रसेल द्वारा लेख से बचने के बिना हमारी आत्मा से बचने के लेख में गढ़ा गया था, उनकी यात्रा वास्तव में वहां शुरू नहीं हुई थी। हमारे पास HTML एप्लिकेशन (HTAs) हुआ करते थे, जो 1999 में Microsoft द्वारा Nokia, BlackBerry और अन्य कंपनियों के कई अन्य वेब ऐप प्लेटफॉर्म के साथ बनाए गए थे। फिर, 2007 में, स्टीव जॉब्स ने प्रस्तुत किया कि उस समय मूल iPhone के लिए ऐप्स बनाने का एकमात्र तरीका क्या था: PWA, एक अलग नाम के साथ। क्रोम वहीं से शुरू हुआ, कुछ साल बाद एपीआई में सुधार हुआ और पीडब्ल्यूए नाम का आविष्कार किया।

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

PWA आज कार्य कर रहा है

आज पीडब्ल्यूए पूरी तरह से कार्य कर रहे हैं और इन्हें स्थापित किया जा सकता है:

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

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

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

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

इंस्टालेशन

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

ऑफ़लाइन और तत्काल लॉन्च

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

सेवा कार्यकर्ता को स्थापित करने के लिए, आपके HTML दस्तावेज़ में कुछ इस तरह शामिल होना चाहिए:

अगर (नेविगेटर में 'serviceWorker') नेविगेटर.serviceWorker.register ("sw.js");

यह फ़ाइल "sw.js" को वर्तमान डोमेन में वर्तमान फ़ोल्डर के लिए उपयोगकर्ताओं के उपकरणों पर स्थापित करेगा - एक अवधारणा जिसे स्कोप के रूप में जाना जाता है। इसके स्थापित होने के बाद, इसके दायरे में आने वाले किसी भी URL की अगली विज़िट का प्रबंधन उस सेवा कर्मी द्वारा किया जाएगा।

मान लें कि हमारे पास चार फाइलों वाला एक PWA है: index.html, app.js, app.css और logo.png। सबसे पहले उन फ़ाइलों को sw.js फ़ाइल में कैश में स्थापित करना है।

const संसाधन = ["index.html", "app.js", "app.css", "logo.png"]; स्व. addEventListener ("इंस्टॉल", ईवेंट => {इवेंट। प्रतीक्षा करें (कैश। ओपन ("myPWAcache")। फिर (कैश => कैश। एडऑल (संसाधन));});

फिर PWA को हमेशा कैश से सर्व करने के लिए, हमें सर्विस वर्कर के भीतर फ़ेच इवेंट को सुनना होगा और उपयोग करने के लिए कैशे नीति तय करनी होगी, जैसे कि कैशे पहले निम्नलिखित स्निपेट के साथ।

self.addEventListener("fetch", e => e.respondWith(caches.match(e.request)। तब(res => res);

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

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

ध्यान रखें कि डिवाइस पर स्टोरेज का दबाव होने पर आपके PWA की फाइलें हटा दी जाएंगी, जब तक कि आप उपलब्ध होने पर परसिस्टेंट स्टोरेज का अनुरोध नहीं करते हैं:

अगर (नेविगेटर में 'स्टोरेज' और नेविगेटर.स्टोरेज में 'जारी रखें') नेविगेटर.स्टोरेज.पर्सिस्ट ();

क्रोम और अधिकांश एंड्रॉइड ब्राउज़र पर, आपका ऐप उपलब्ध स्थान के पांच प्रतिशत से अधिक का उपयोग करने में सक्षम नहीं है; iOS पर यह केवल प्रति होस्ट 50MiB (50MB के पास) है; एज में यह कुल मेमोरी साइज के अनुसार परिवर्तनशील है और विंडोज स्टोर में, यह असीमित है।

प्रथम श्रेणी का अनुभव

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

मेनिफेस्ट एक JSON फ़ाइल है जो इंस्टॉलेशन व्यवहार को परिभाषित करने के लिए ब्राउज़र या ऐप स्टोर द्वारा उपयोग किए जाने वाले PWA के लिए मेटाडेटा को परिभाषित करता है।

फ़ाइल आपके PWA के लिए मेटाडेटा के रूप में कई गुणों को परिभाषित करती है। प्रत्येक OS इन गुणों को पढ़ेगा और आपके पसंदीदा अनुभव से मेल खाने की पूरी कोशिश करेगा। उदाहरण के लिए, एंड्रॉइड 'डिस्प्ले: स्टैंडअलोन' पढ़ेगा और एक सामान्य ऐप अनुभव बनाएगा। 'डिस्प्ले: मिनिमल-यूआई' के साथ यह एक दृश्यमान यूआरएल और टीएलएस प्रमाणपत्र के साथ एक अनुभव तैयार करेगा - सुरक्षा-संवेदनशील ऐप्स के लिए उपयोगी। 'डिस्प्ले: फुलस्क्रीन' के साथ यह बिना स्टेटस बार या विज़िबल बैक बटन के पूरी तरह से इमर्सिव ऐप बनाता है। आइकन और रंगों का एक सेट परिभाषित करता है कि स्प्लैश स्क्रीन या टाइटल बार आपके ऐप की विंडो के लिए कैसे दिखेंगे।

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

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

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

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

window.addEventListener("beforeinstallpr ompt", function(e) {e.prompt(); // इंस्टॉलेशन नेटिव प्रॉम्प्ट दिखाएगा})

यदि PWA स्थापित है, तो ईवेंट 'एप्लिकेशन इंस्टॉल' को विंडो ऑब्जेक्ट पर सक्रिय किया जाएगा ताकि आप इसे सुनने वाले आँकड़ों को ट्रैक कर सकें।

ऐप स्टोर

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

लेकिन कुछ कंपनियां स्टोर में रहना चाहती हैं। आज तक, आधिकारिक तौर पर PWA को स्वीकार करने वाले स्टोर केवल Windows Store और kaiOS Store हैं। सौभाग्य से, कैपेसिटर (वर्तमान में अल्फा में) या पीडब्ल्यूए बिल्डर जैसे उपकरणों के साथ, हम अन्य प्लेटफार्मों के लिए भी देशी पैकेज बना और हस्ताक्षर कर सकते हैं।

Google Play Store में कुछ PWA पहले से ही प्रकाशित हैं, जैसे कि Twitter लाइट और Google मैप्स गो, वर्तमान में कस्टम कार्यान्वयन के अधीन हैं। क्रोम विश्वसनीय वेब गतिविधियों के माध्यम से क्रोम 68 से समाधान पेश करेगा। उस बिंदु से, हम अपने PWA के लॉन्चर के साथ एक Android पैकेज (APK) बना सकेंगे और उसे स्टोर पर अपलोड कर सकेंगे। विंडोज 10 पर माइक्रोसॉफ्ट स्टोर के लिए, साइट पीडब्ल्यूए बिल्डर वर्तमान में एपीपीएक्स विंडोज 10 पैकेज बनाने में मदद कर रहा है। वेब दृश्य का उपयोग करके, आप ऐप स्टोर के लिए मैन्युअल रूप से आईओएस ऐप बनाने में सक्षम हो सकते हैं लेकिन स्टोर के नियमों के बारे में बेहद सावधान रहें।

प्लेटफार्म एकीकरण

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

हम यूआरआई योजनाओं के माध्यम से अन्य ऐप्स के साथ भी संवाद कर सकते हैं, जैसे ट्विटर, यूट्यूब या व्हाट्सएप को उनके यूआरएल या कस्टम यूआरआई, जैसे व्हाट्सएप: // के माध्यम से खोलना।

अंत में, कैपेसिटर या माइक्रोसॉफ्ट स्टोर का उपयोग करके स्टोर में प्रकाशित होने वाले देशी पीडब्लूए बनाते समय, हम देशी एपीआई को ब्रिज करने में सक्षम होंगे जो हमें वस्तुतः किसी भी मूल कोड को निष्पादित करने में सक्षम करेगा। विंडोज 10 के साथ उस एकीकरण में हार्डवेयर एक्सेस शामिल है, लेकिन ओएस के साथ एकीकरण भी शामिल है, जो पिन टू स्टार्ट जैसे विकल्पों की पेशकश करता है। उदाहरण के लिए, ट्विटर पीडब्ल्यूए आपको किसी भी उपयोगकर्ता को अपनी स्टार्ट स्क्रीन पर पिन करने देता है।

डिजाइन और यूएक्स चुनौतियां

पीडब्लूए को डिजाइन करने में अनूठी चुनौतियां हैं, इसलिए कुछ समय शोध, परीक्षण जितना संभव हो और निम्नलिखित पर विचार करना महत्वपूर्ण है:

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

पीडब्ल्यूए का वर्ष

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

यह लेख मूल रूप से 8 के अंक ३०८ में प्रकाशित हुआ था जाल, वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे ज्यादा बिकने वाली पत्रिका। इश्यू 308 यहां खरीदें या यहाँ सदस्यता लें.