🕤 🍁 🌨️ PWA बस है 👨🏽‍💻 👨🏾‍🤝‍👨🏼 ☂️

प्रगतिशील वेब अनुप्रयोगों (PWA) की अवधारणा लंबे समय से है, 2018 के वसंत के बाद से, इस वर्ग के अनुप्रयोगों को सभी प्रमुख ब्राउज़रों द्वारा समर्थित किया गया है, लेकिन पीडब्ल्यूए प्रौद्योगिकियों के प्रसार, उनके स्पष्ट "फायदे" के बावजूद, अभी भी बहुत कम हैं।

Google विशेषज्ञ (Habré सहित) बहुत जानकारीपूर्ण और सक्षम रूप से PWA के बारे में लिखते हैं, लेकिन उनकी सिफारिशें उन लोगों के लिए अधिक उपयोगी हैं जो पहले से ही विषय से परिचित हैं। इस लेख का उद्देश्य यह दिखाना है कि प्रगतिशील वेब ऐप्स मुश्किल नहीं हैं, और किसी भी साइट के डेवलपर्स अब इन तकनीकों का उपयोग कर सकते हैं और करना चाहिए।

PWA दर्शन

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

सापेक्षता PWA नाम में ही निहित है - "प्रगतिशील"। प्रगतिशील किस और किस हद तक तुलनात्मक है? लेकिन यह सापेक्षता, वास्तव में, बहुत अच्छी है, क्योंकि आप पीडब्ल्यूए प्रौद्योगिकियों का अध्ययन कर सकते हैं और उन्हें अपनी वर्तमान परियोजनाओं में धीरे-धीरे लागू कर सकते हैं, बिना वैश्विक रीमॉडेलिंग और रिफैक्टिंग के।

दूसरी ओर, PWA के पास एक विचार है, और यह विचार काफी स्पष्ट और शक्तिशाली है। और यह धीरे-धीरे कैसे प्रकट होता है, इसके परिणामों की भयावहता का संकेत हो सकता है।

PWA आर्किटेक्चर

PWA एक वेब एप्लिकेशन है जो निर्दिष्ट लक्ष्यों को प्राप्त करने के लिए कुछ तकनीकों का उपयोग करके बनाया गया है।

लक्ष्य निम्नानुसार हैं:

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

Google के दृष्टिकोण से, यह वही है जो वेब साइटों को देखने और महसूस करने के मामले में देशी ऐप्स से अलग करता है।

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

PWA और देशी अनुप्रयोग

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

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

और एक बार के लिए, यह सब सभी प्रमुख ब्राउज़रों और सभी प्रमुख प्लेटफार्मों पर समान काम करता है।

गूगल ने किया iOS पर हमला

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

- Android और iOS (और विंडोज) के लिए अलग-अलग वर्जन लिखने की जरूरत नहीं
- इसके लिए Google Play और App Store पर पंजीकरण करने और भुगतान करने की आवश्यकता नहीं है
- डेस्कटॉप के लिए सीधी पहुँच खोलें

अब तक, मोबाइल एप्लिकेशन बाजार उन उत्साही लोगों के लिए बंद कर दिया गया है जो एक उपयोगी कार्यक्रम लिख सकते हैं, लेकिन इसके प्लेसमेंट के लिए भुगतान नहीं कर सकते / नहीं कर सकते हैं। और वे आवेदन को सत्यापित करने के लिए Google और Apple की नौकरशाही से संपर्क नहीं करना चाहते हैं, जिसके बाद आप Microsoft की लालसा के साथ एकाधिकार को याद करते हैं।

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

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

APK बनाम PWA

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

प्रौद्योगिकी के

संक्षेप में PWA के मुख्य इंजनों पर विचार करें।

सेवा कर्मी

PWA का दिल सेवा कार्यकर्ता है। यह ब्राउज़र में स्थित फ्रंटएंड और बैकएंड के बीच की प्रॉक्सी लेयर है। सभी ब्राउज़र अनुरोध इसके माध्यम से जाते हैं। दो स्वतंत्र परतों में इस विभाजन ने हमें PWA के लिए एक नियमित वेबसाइट के संक्रमण को यथासंभव सरल बनाने की अनुमति दी।

भंडारण से, सेवा कार्यकर्ता के पास वेब संसाधनों के लिए कैश संग्रहण, और डेटा के लिए इंडेक्सडीबी तक पहुंच है। लेकिन, सबसे महत्वपूर्ण बात, व्यावसायिक तर्क को लागू करने की पूर्ण स्वतंत्रता।

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

एक ही समय में, अधिकांश साइटों के लिए, सेवा कार्यकर्ता की कैशिंग कार्यक्षमता एक PWA में बदलने के लिए पर्याप्त होगी।

PWA किसी भी ढांचे पर निर्भर नहीं करता है, यह शुद्ध जावास्क्रिप्ट है, हालांकि यहां तक कि किसी कारण के लिए Habré पर Google के विशेषज्ञ लाइब्रेरी कोड जनरेटर का उपयोग करने की सलाह देते हैं। सेवा कार्यकर्ता खूबसूरती से हाथ से लिखा गया है, और यह आपके आवेदन के तर्क को समझने और नियंत्रित करने के लिए आवश्यक है।

प्रोग्राम के दृष्टिकोण से, सेवा कार्यकर्ता एक जावास्क्रिप्ट फ़ाइल है जो पृष्ठ के HTML कोड में शामिल है। इसमें, डेवलपर फ्रंट-एंड और अन्य कार्यक्षमता से आने वाले अनुरोधों के साथ काम करने के लिए तर्क को परिभाषित करता है।

HTTPS

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

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

एप्लिकेशन शेल

ऐप शेल एक ग्राफिकल इंटरफ़ेस, एक टेम्पलेट का एक कंकाल मात्र है। उदाहरण के लिए, हेडर, दो कॉलम और अधिक के साथ एक औसत साइट लें। मोटे तौर पर, हमने वर्तमान पृष्ठ की सामग्री और उसमें से सभी गतिशील जानकारी को काट दिया है, शेष स्थैतिक अनुप्रयोग शेल है।

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

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

एक ऐप शेल एक देशी प्रोग्राम शेल की तरह है। अपने PWA को एक देशी कार्यक्रम के रूप में देखें, और बहुत कुछ आसान हो जाएगा।

वेब ऐप प्रकट

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

सूचनाएं पुश करें

यदि आप Chrome DevTools के साथ इंटरनेट सर्फ करते हैं, तो एप्लिकेशन टैब पर खोलें, आप देख सकते हैं कि कितनी साइट PWA तकनीक का उपयोग करती हैं। और जो लोग इसका उपयोग करते हैं उनका 90% केवल पुश सूचनाओं के लिए करते हैं।

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

लेकिन आप साइट पर उपयोगकर्ता की दूसरी या तीसरी यात्रा के लिए एक सदस्यता की पेशकश भी कर सकते हैं जब यह पहले से ही स्पष्ट है कि वह संयोग से यहां नहीं है।

Google PWA चेकलिस्ट

पुश सूचनाएं समय पर, सटीक और प्रासंगिक होनी चाहिए

साइट से पुश सूचनाएँ सक्षम करें और सुनिश्चित करें कि वे उपयोग किए जाने वाले मामलों का उपयोग कर रहे हैं:
समय पर - एक समय पर अधिसूचना वह होती है जो तब प्रकट होती है जब उपयोगकर्ता इसे चाहते हैं और जब यह उनके लिए मायने रखता है।
सटीक - एक सटीक अधिसूचना वह है जिसमें विशिष्ट जानकारी होती है जिस पर तुरंत कार्रवाई की जा सकती है।
प्रासंगिक - एक प्रासंगिक संदेश उन लोगों या विषयों के बारे में है जिनके बारे में उपयोगकर्ता परवाह करता है।

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

PWA बस है