शुरुआती चरण
प्रोग्रेसिव वेब ऐप्लिकेशन अब भी वेबसाइटें हैं, जिनमें बेहतर सुविधाएं और सुविधाएं मौजूद हैं. वे किसी खास टेक्नोलॉजी स्टैक से अटैच नहीं होते और आप किसी नई साइट के साथ नए सिरे से शुरुआत कर सकते हैं या पूरी तरह से सुधार किए बिना अपनी मौजूदा वेबसाइट को अपडेट कर सकते हैं. इस गाइड में, आपको PWA पैटर्न को अच्छी तरह से लागू करने के तरीके के बारे में जानकारी मिलेगी. शुरू करने के लिए, यहां कुछ रणनीतियां दी गई हैं:
इसे इंस्टॉल करने लायक बनाएं
छोटी रकम से शुरू करें! इस तरीके में, एक बेसिक मेनिफ़ेस्ट फ़ाइल से शुरुआत करना, एक सामान्य ऑफ़लाइन पेज, और ऑफ़लाइन पेज को सेवा देने और कुछ ज़रूरी सीएसएस और JavaScript को कैश मेमोरी में सेव करने के लिए सर्विस वर्कर शामिल है. सीएसएस और JavaScript को कैश मेमोरी में सेव करने की सुविधा की बदौलत, आपको अपने मौजूदा वेब ऐप्लिकेशन को ऑफ़लाइन इस्तेमाल के लिए तैयार करने में मदद मिलेगी. साथ ही, इसकी परफ़ॉर्मेंस भी बेहतर होगी.
किसी सुविधा पर फ़ोकस करना
एक ऐसी नई सुविधा चुनें—जैसे पुश नोटिफ़िकेशन या फ़ाइल मैनेज करना—जो आपके उपयोगकर्ताओं या आपके कारोबार पर गहरा असर डालेगी. इसकी मदद से, एक साथ बहुत सारे बदलाव किए बिना, PWA पूल में आसानी से काम किया जा सकता है.
कोई सामान्य वर्शन बनाएं
अपने ऐप्लिकेशन के मौजूदा सेक्शन या उपयोगकर्ता की किसी खास गतिविधि, जैसे कि वीडियो चलाना या बोर्डिंग पास का ऐक्सेस हासिल करना और इसे ऑफ़लाइन-फ़र्स्ट PWA के तौर पर, अकेले या कॉन्टेक्स्ट के हिसाब से काम करने लायक बनाएं. इससे, कम ज़रूरी वाले एक्सपेरिमेंट का इस्तेमाल किया जा सकता है. इससे आपको PWA का इस्तेमाल करने वाले उपयोगकर्ताओं को बेहतर अनुभव देने में मदद मिलेगी.
शुरुआत से शुरुआत करें
अगर वेबसाइट को फिर से डिज़ाइन किया जा रहा है या नए सिरे से शुरुआत की जा रही है, तो यह रणनीति सही रहेगी. इससे आपको दूसरी रणनीतियों के मुकाबले, PWA का डिज़ाइन पैटर्न ज़्यादा आसानी से बनाने की सुविधा मिलती है. इससे, आपको कभी भी, कहीं से भी सर्विस वर्कर की सभी खूबियों का फ़ायदा मिलता है.
स्टोर ऐप्लिकेशन अपग्रेड करना
किसी PWA को ऐप स्टोर पर पब्लिश करने की सुविधा के साथ, अपने PWA को PWA लॉन्चर के तौर पर रैप करके, Google के Play Store या Windows Store जैसे स्टोर में अपलोड किया जा सकता है. अगर आपके पास प्लैटफ़ॉर्म के हिसाब से कोई मौजूदा ऐप्लिकेशन है, तो उसे स्टोर में पब्लिश किए गए PWA से बदला जा सकता है.
इस तरीके से, आपके मौजूदा उपयोगकर्ताओं को PWA में अपग्रेड करने का विकल्प मिलता है. साथ ही, नए उपयोगकर्ता अब भी ब्राउज़र या ऐप स्टोर से आपके PWA को इंस्टॉल या इस्तेमाल कर सकते हैं. साथ ही, आपके पास सभी के लिए एक ही ऐप्लिकेशन होगा. इससे पैसे और समय की बचत होगी और उपयोगकर्ता अनुभव को बेहतर बनाया जा सकेगा.
PWA की चेकलिस्ट
प्रोग्रेसिव वेब ऐप्लिकेशन ऐसी वेबसाइट है जिससे यह सवाल उठता है: यह प्रोग्रेसिव वेब ऐप्लिकेशन कब बनेगा? इसका जवाब इतना आसान नहीं है. इसकी वजह यह है कि PWA का सिद्धांत किसी खास टेक्नोलॉजी या स्टैक के बारे में नहीं है. PWA एक पैटर्न है, जिसमें कई तकनीकी कॉम्पोनेंट शामिल होते हैं.
सभी ब्राउज़र पर कोई यूनीक नियम नहीं होता है. हालांकि, उपयोगकर्ताओं की पसंद के मुताबिक PWA बनाने में आपकी मदद के लिए सुझावों का एक सेट मौजूद है, जिसे प्रोग्रेसिव वेब ऐप्लिकेशन चेकलिस्ट कहा जाता है.
ज़रूरी शर्तें
PWA सभी डिवाइसों का इस्तेमाल करता है, चाहे वे मोबाइल से डेस्कटॉप पर हों, इसलिए मुख्य प्रोग्रेसिव वेब ऐप्लिकेशन चेकलिस्ट इस बात की जानकारी देती है कि अपने ऐप्लिकेशन को सभी उपयोगकर्ताओं के लिए इंस्टॉल करने और भरोसेमंद बनाने के लिए आपको क्या करना होगा. इससे कोई फ़र्क़ नहीं पड़ता कि स्क्रीन साइज़ या इनपुट टाइप क्या है.
ज़रूरी शर्तें ये हैं:
तेज़ी से शुरू होता है, तेज़ बना रहता है
किसी भी ऑनलाइन अनुभव की सफलता में परफ़ॉर्मेंस की अहम भूमिका होती है. इसकी वजह यह है कि अच्छी परफ़ॉर्मेंस वाली साइटें, खराब परफ़ॉर्मेंस वाली साइटों की तुलना में उपयोगकर्ताओं को बेहतर तरीके से जोड़ती हैं और उन्हें बनाए रखती हैं. साइटों को, उपयोगकर्ता पर आधारित परफ़ॉर्मेंस मेट्रिक को ऑप्टिमाइज़ करने पर फ़ोकस करना चाहिए.
किसी भी ब्राउज़र में काम करता है
प्रोग्रेसिव वेब ऐप्लिकेशन सबसे पहले वेब ऐप्लिकेशन होते हैं. इसका मतलब है कि उन्हें सिर्फ़ एक ब्राउज़र पर ही नहीं, बल्कि सभी ब्राउज़र पर काम करना होगा. हालांकि, यह ज़रूरी नहीं है कि सभी ब्राउज़र पर अनुभव एक जैसा हो. कुछ ऐसी सुविधाएं भी हो सकती हैं जो किसी एक ब्राउज़र पर काम नहीं करतीं. हालांकि, इन सुविधाओं का इस्तेमाल करने से, आपको बेहतरीन अनुभव देने में मदद मिलेगी.
किसी भी स्क्रीन साइज़ के हिसाब से काम कर सकती है
उपयोगकर्ता, आपके PWA का इस्तेमाल किसी भी स्क्रीन साइज़ पर कर सकते हैं. साथ ही, सारा कॉन्टेंट, व्यूपोर्ट के किसी भी साइज़ पर उपलब्ध होता है.
एक कस्टम ऑफ़लाइन पेज उपलब्ध कराता है
जब उपयोगकर्ता ऑफ़लाइन होते हैं, तो उन्हें अपने PWA में रखने से उन्हें डिफ़ॉल्ट ब्राउज़र के ऑफ़लाइन पेज पर वापस जाने के बजाय, ज़्यादा बेहतर और नेटिव जैसा अनुभव मिलता है.
इंस्टॉल किया जा सकता है
होम स्क्रीन पर ऐप्लिकेशन इंस्टॉल करने या जोड़ने वाले उपयोगकर्ता, उन ऐप्लिकेशन में ज़्यादा दिलचस्पी दिखाते हैं. ऐसे में, PWA इंस्टॉल होने के बाद, उन्हें बेहतर उपयोगकर्ता अनुभव के लिए, ज़्यादा सुविधाएं मिल सकती हैं.
PWA की बेहतर विशेषताएं
एक शानदार प्रोग्रेसिव वेब ऐप्लिकेशन बनाने के लिए, जो आपको किसी बेस्ट-इन-क्लास ऐप्लिकेशन जैसा लगे, आपको मुख्य चेकलिस्ट के अलावा भी कई काम करने होंगे. प्रोग्रेसिव वेब ऐप्लिकेशन की सबसे अच्छी चेकलिस्ट यह है कि आप अपने PWA को वेब को शानदार बनाने वाली चीज़ों का फ़ायदा लेने के साथ-साथ सक्षम और भरोसेमंद महसूस कराएं.
ऑफ़लाइन अनुभव मिलता है
उपयोगकर्ताओं को ऑफ़लाइन रहते हुए अपने PWA का इस्तेमाल करने की अनुमति देकर, उन्हें ऐप्लिकेशन जैसा असली अनुभव दिया जा सकता है. ऐसा करने के लिए, उन सुविधाओं की पहचान करें जिनके लिए इंटरनेट कनेक्शन की ज़रूरत नहीं होती. ऐसा करने से, उपयोगकर्ता कम से कम कुछ सुविधाओं को ऐक्सेस कर पाएंगे.
पूरी तरह से ऐक्सेस करने लायक हो
पक्का करें कि ऐप्लिकेशन का सारा कॉन्टेंट और इंटरैक्शन, स्क्रीन रीडर से समझ में आते हैं. साथ ही, इन्हें सिर्फ़ कीबोर्ड के ज़रिए इस्तेमाल किया जा सकता है, इनका फ़ोकस बेहतर होता है और इनका कलर कंट्रास्ट बेहतर होता है. अपने PWA को ऐक्सेस करने का मतलब है कि इसे सभी लोग इस्तेमाल कर सकते हैं.
उपलब्ध होने पर, बेहतर सुविधाओं का इस्तेमाल करता है
पुश मैसेज, WASM, और WebGL से लेकर फ़ाइल सिस्टम ऐक्सेस, कॉन्टैक्ट पिकर, और ऐप स्टोर के साथ इंटिग्रेशन तक. यहां, बेहतर तरीके से इंटिग्रेट किए गए बेहतर PWA बनाने के टूल मौजूद हैं. इनकी मदद से, उपयोगकर्ताओं को बेहतर अनुभव दिया जा सकता है. यह अनुभव, पहले प्लैटफ़ॉर्म ऐप्लिकेशन के लिए रिज़र्व था. उपयोगकर्ता, जहां भी जाएं, इन्हें अपने साथ इस्तेमाल कर सकते हैं.
खोजने पर ढूंढा जा सकता है
वेबसाइट पर आने वाले आधे से ज़्यादा ट्रैफ़िक, ऑर्गैनिक सर्च से आता है. उपयोगकर्ताओं को आपका PWA ढूंढने के लिए, यह पक्का करना ज़रूरी है कि कॉन्टेंट के लिए कैननिकल यूआरएल मौजूद हों और सर्च इंजन आपकी साइट को इंडेक्स कर पाएं.
किसी भी तरह के इनपुट के साथ काम करता है
आपके ऐप्लिकेशन का इस्तेमाल करते समय उपयोगकर्ता, एक से दूसरे इनपुट टाइप के बीच आसानी से स्विच कर सकें. साथ ही, इनपुट के तरीके, स्क्रीन के साइज़ पर निर्भर नहीं होने चाहिए.
अनुमति के अनुरोधों के बारे में जानकारी देता है
सिर्फ़ सूचना, जगह, और क्रेडेंशियल जैसी अनुमतियों के लिए प्रॉम्प्ट ट्रिगर किए जा सकते हैं. इसके लिए, ज़रूरी जानकारी उपलब्ध कराई जाती है, ताकि उपयोगकर्ता प्रॉम्प्ट स्वीकार कर सकें.
स्वस्थ कोड के लिए सबसे सही तरीके अपनाता है
अपने ऐप्लिकेशन को अप-टू-डेट रखने और कोडबेस को अप-टू-डेट रखने से, आपके लिए ऐसी नई सुविधाएं उपलब्ध कराना आसान हो जाता है जो इस चेकलिस्ट में दिए गए लक्ष्यों को पूरा करती हैं.