एक अच्छा प्रोग्रेसिव वेब ऐप्लिकेशन क्या होता है?

प्रोग्रेसिव वेब ऐप्लिकेशन (PWA), आधुनिक एपीआई के साथ बनाए और बेहतर बनाए गए हैं. ये एक ही कोड बेस वाले किसी भी, कहीं से भी, किसी भी डिवाइस पर काम करने के साथ-साथ बेहतर सुविधाएं, विश्वसनीयता, और इंस्टॉल करने की क्षमता देते हैं. सबसे अच्छा अनुभव देने में आपकी मदद करने के लिए, मुख्य और सबसे असरदार चेकलिस्ट और सुझावों का इस्तेमाल करें.

मुख्य प्रोग्रेसिव वेब ऐप्लिकेशन की चेकलिस्ट

प्रोग्रेसिव वेब ऐप्लिकेशन चेकलिस्ट से यह पता चलता है कि ऐप्लिकेशन का साइज़ या इनपुट टाइप कुछ भी हो, लेकिन वह क्या है जो ऐप्लिकेशन को सभी उपयोगकर्ताओं के लिए इंस्टॉल और इस्तेमाल करने लायक बनाता है.

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

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

क्यों शुरू करें?

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

सभी ऐप्लिकेशन की ज़रूरतें अलग-अलग होती हैं, लेकिन लाइटहाउस की परफ़ॉर्मेंस का आकलन, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के आधार पर किया जाता है. ऐसे ऑडिट पर अच्छा स्कोर मिलने से, उपयोगकर्ताओं को खरीदारी का अनुभव बेहतर बनाने की संभावना बढ़ जाती है. अपने वेब ऐप्लिकेशन की परफ़ॉर्मेंस का असल डेटा पाने के लिए, PageSpeed Insights या Chrome इस्तेमाल करने वाले लोगों के अनुभव की रिपोर्ट का भी इस्तेमाल किया जा सकता है.

जवाब कैसे दें

अपने PWA को तेज़ी से शुरू करने और तेज़ बनाए रखने का तरीका जानने के लिए, हमारी तेज़ी से लोड होने वाले समय के बारे में बताने वाली गाइड का पालन करें.

किसी भी ब्राउज़र में काम करता है
आपका वेब ऐप्लिकेशन इंस्टॉल होने से पहले, उपयोगकर्ता उसे ऐक्सेस करने के लिए किसी भी ब्राउज़र का इस्तेमाल कर सकते हैं.

आपका वेब ऐप्लिकेशन इंस्टॉल होने से पहले, उपयोगकर्ता उसे ऐक्सेस करने के लिए किसी भी ब्राउज़र का इस्तेमाल कर सकते हैं.

क्यों शुरू करें?

प्रोग्रेसिव वेब ऐप्लिकेशन सबसे पहले वेब ऐप्लिकेशन होते हैं. इसका मतलब है कि वे सिर्फ़ अलग-अलग ब्राउज़र पर ही नहीं, बल्कि सभी ब्राउज़र पर काम करने चाहिए.

ऐसा करने का एक असरदार तरीका है, Resilient Web Design में जेरेमी कीथ के मुताबिक, हम मुख्य फ़ंक्शन की पहचान करते हैं, सबसे आसान टेक्नोलॉजी का इस्तेमाल करके उस फ़ंक्शन को उपलब्ध कराते हैं, और जहां तक हो सके अनुभव को बेहतर बनाते हैं. कई मामलों में, इसका मतलब है कि मुख्य फ़ंक्शन बनाने के लिए सिर्फ़ एचटीएमएल से शुरुआत करें. साथ ही, सीएसएस और JavaScript की मदद से, उपयोगकर्ता अनुभव को बेहतर बनाएं, ताकि उपयोगकर्ताओं को बेहतर अनुभव दिया जा सके.

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

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

जवाब कैसे दें

जेरेमी कीथ का रेसिलिएंट वेब डिज़ाइन एक बेहतरीन संसाधन है. इसमें यह जानकारी दी गई है कि इस क्रॉस-ब्राउज़र, प्रोग्रेसिव मेथडोलॉजी में, वेब डिज़ाइन के बारे में कैसे सोचना चाहिए.

आपकी मदद के लिए कुछ और लेख

किसी भी स्क्रीन साइज़ के हिसाब से काम कर सकती है
उपयोगकर्ता किसी भी स्क्रीन साइज़ पर आपके PWA का इस्तेमाल कर सकते हैं और सारा कॉन्टेंट, व्यूपोर्ट के किसी भी साइज़ पर उपलब्ध होता है.

उपयोगकर्ता किसी भी स्क्रीन साइज़ पर आपके PWA का इस्तेमाल कर सकते हैं. साथ ही, इसका पूरा कॉन्टेंट, व्यूपोर्ट के किसी भी साइज़ पर उपलब्ध होता है.

क्यों शुरू करें?

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

जिन टास्क को उपयोगकर्ता पूरा करना चाहते हैं और जिन्हें वे ऐक्सेस करना चाहते हैं उनके कॉन्टेंट में व्यूपोर्ट के साइज़ में कोई बदलाव नहीं होता. कॉन्टेंट को अलग-अलग व्यूपोर्ट साइज़ में फिर से व्यवस्थित किया जा सकता है और यह पूरी तरह से, एक तरह से या किसी दूसरे तरीके से वहां मौजूद होना चाहिए. जैसा कि ल्यूक रॉब्लेस्की ने अपनी किताब 'मोबाइल फ़र्स्ट' में बताया है, साइट के डिज़ाइन को बेहतर बनाने के लिए छोटे बजट को शुरू करने के बजाय बड़े पैमाने पर काम करने से साइट का डिज़ाइन बेहतर हो सकता है:

> मोबाइल डिवाइस के लिए, सॉफ़्टवेयर डेवलपमेंट टीम को सिर्फ़ > ऐप्लिकेशन में मौजूद सबसे ज़रूरी डेटा और कार्रवाइयों पर ध्यान देना चाहिए. 320 x 480 पिक्सल स्क्रीन पर बाहरी और ग़ैर-ज़रूरी एलिमेंट के लिए कोई जगह नहीं है. > आपको प्राथमिकता देनी होगी.

जवाब कैसे दें

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

एक कस्टम ऑफ़लाइन पेज उपलब्ध कराता है
जब उपयोगकर्ता ऑफ़लाइन होते हैं, तो उन्हें अपने PWA में रखने से, उन्हें डिफ़ॉल्ट ब्राउज़र के ऑफ़लाइन पेज पर वापस जाने के बजाय, बेहतर अनुभव मिलता है.

जब उपयोगकर्ता ऑफ़लाइन होते हैं, तो उन्हें अपने PWA में रखने से, उन्हें डिफ़ॉल्ट ब्राउज़र के ऑफ़लाइन पेज पर वापस जाने के बजाय, बेहतर अनुभव मिलता है.

क्यों शुरू करें?

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

जवाब कैसे दें

सर्विस वर्कर के install इवेंट के दौरान, कस्टम ऑफ़लाइन पेज को बाद में इस्तेमाल करने के लिए, प्री-कैश किया जा सकता है. अगर कोई उपयोगकर्ता ऑफ़लाइन हो जाता है, तो आपके पास पहले से कैश मेमोरी में सेव किए गए, कस्टम ऑफ़लाइन पेज की मदद से जवाब देने का विकल्प होता है. इसका उदाहरण देखने और इसे खुद लागू करने का तरीका जानने के लिए, हमारे कस्टम ऑफ़लाइन पेज सैंपल को देखें.

इंस्टॉल किया जा सकता है
ऐसे उपयोगकर्ता जो अपने डिवाइस पर ऐप्लिकेशन इंस्टॉल करते हैं या जोड़ते हैं, उनकी दिलचस्पी उन ऐप्लिकेशन में ज़्यादा होती है.

ऐसे उपयोगकर्ता जो अपने डिवाइस पर ऐप्लिकेशन इंस्टॉल करते हैं या जोड़ते हैं उनकी दिलचस्पी उन ऐप्लिकेशन में ज़्यादा होती है.

क्यों शुरू करें?

प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने से, यह इंस्टॉल किए गए अन्य ऐप्लिकेशन की तरह ही दिखता, महसूस होता है, और काम करता है. यह उसी जगह से लॉन्च किया गया है जहां से लोग अपने दूसरे ऐप्लिकेशन लॉन्च करते हैं. यह ब्राउज़र से अलग, अपनी ऐप्लिकेशन विंडो में चलता है. साथ ही, यह अन्य ऐप्लिकेशन की तरह ही, टास्क सूची में दिखता है.

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

जवाब कैसे दें

हमारी इंस्टॉल की जा सकने वाली गाइड में जाकर, अपने PWA को इंस्टॉल करने का तरीका और इसकी जांच करके पता लगाया जा सकता है कि इसे इंस्टॉल किया जा सकता है या नहीं, और इसे खुद आज़माकर देखें.

प्रोग्रेसिव वेब ऐप्लिकेशन के लिए सबसे सही चेकलिस्ट

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

ऑफ़लाइन अनुभव मिलता है
जहां कनेक्टिविटी पूरी तरह से ज़रूरी नहीं होती, आपका ऐप्लिकेशन उसी तरह से काम करता है जिससे वह ऑनलाइन काम करता है.

जहां कनेक्टिविटी की ज़रूरत नहीं होती, वहां आपका ऐप्लिकेशन ऑफ़लाइन की तरह ही काम करता है जैसे कि ऑनलाइन करता है.

क्यों शुरू करें?

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

जवाब कैसे दें

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

पूरी तरह से ऐक्सेस करने लायक हो
सभी उपयोगकर्ता इंटरैक्शन के लिए, डब्ल्यूसीएजी 2.0 से जुड़ी ज़रूरी शर्तों को पूरा किया जाता है.

सभी उपयोगकर्ता इंटरैक्शन के लिए, डब्ल्यूसीएजी 2.0 से जुड़ी सुलभता शर्तें पास हो जाती हैं.

क्यों शुरू करें?

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

जवाब कैसे दें

शुरुआत करने के लिए, W3C के वेब सुलभता के बारे में जानकारी का इस्तेमाल करना अच्छा रहेगा. सुलभता सुविधाओं की जांच के ज़्यादातर कामों को मैन्युअल तरीके से करना पड़ता है. लाइटहाउस में सुलभता ऑडिट, ऐक्सिस, और सुलभता इनसाइट जैसे टूल की मदद से, कुछ सुलभता टेस्टिंग को ऑटोमेट किया जा सकता है. यह भी ज़रूरी है कि उन एलिमेंट को खुद बनाने के बजाय, सही मतलब वाले एलिमेंट का इस्तेमाल किया जाए. जैसे, a और button एलिमेंट. इससे यह पक्का होता है कि जब आपको ज़्यादा बेहतर फ़ंक्शन बनाने की ज़रूरत होती है, तब आपकी उम्मीदों पर खरा उतरा जा सकता है (जैसे, ऐरो बनाम टैब का इस्तेमाल कब करना है). A11Y न्यूट्रिशन कार्ड में कुछ सामान्य कॉम्पोनेंट के लिए, इस बारे में बेहतरीन सलाह दी गई है.

खोज की मदद से ढूंढा जा सकता है
आपके PWA को आसानी से खोज की मदद से खोजा जा सकता है.

आपके PWA को आसानी से खोज की मदद से खोजा जा सकता है.

क्यों शुरू करें?

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

जवाब कैसे दें

सबसे पहले यह देख लें कि हर यूआरएल का शीर्षक यूनीक हो और उसमें मुख्य जानकारी हो. इसके बाद, Google Search Console और Lighthouse में सर्च इंजन ऑप्टिमाइज़ेशन के ऑडिट का इस्तेमाल करें. इससे आपको अपने PWA में, खोजने लायक समस्याओं को डीबग और ठीक करने में मदद मिलेगी. आपके पास Bing या Yandex के वेबमास्टर टूल का इस्तेमाल करने का विकल्प भी है. साथ ही, अपने PWA में Schema.org के स्कीमा के ज़रिए, स्ट्रक्चर्ड डेटा शामिल किया जा सकता है.

किसी भी तरह के इनपुट के साथ काम करता है
आपके PWA को माउस, कीबोर्ड, स्टाइलस या टच के साथ इस्तेमाल किया जा सकता है.

आपके PWA को माउस, कीबोर्ड, स्टाइलस या टच के साथ इस्तेमाल किया जा सकता है.

क्यों शुरू करें?

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

जवाब कैसे दें

Pointer Events API कई तरह के इनपुट विकल्पों के साथ काम करने के लिए यूनिफ़ाइड इंटरफ़ेस देता है. यह स्टाइलस की सुविधा जोड़ने के लिए खास तौर पर अच्छा है. टच और कीबोर्ड, दोनों के साथ काम करने के लिए, पक्का करें कि आपने सही सिमैंटिक एलिमेंट (ऐंकर, बटन, फ़ॉर्म कंट्रोल वगैरह) का इस्तेमाल किया हो. साथ ही, इन्हें नॉन-सिमैंटिक एचटीएमएल (जो सुलभता के लिए अच्छा है) का इस्तेमाल करके दोबारा न बनाया जाए. माउस घुमाने पर चालू होने वाले इंटरैक्शन शामिल करते समय, पक्का करें कि वे क्लिक या टैप करने पर भी चालू हो सकते हैं.

अनुमति के अनुरोधों के बारे में जानकारी देता है
असरदार एपीआई इस्तेमाल करने की अनुमति मांगने पर, जानकारी दें और सिर्फ़ तब पूछें, जब एपीआई की ज़रूरत हो.

असरदार एपीआई इस्तेमाल करने की अनुमति मांगने पर, जानकारी दें और सिर्फ़ तब पूछें, जब एपीआई की ज़रूरत हो.

क्यों शुरू करें?

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

जवाब कैसे दें

अनुमति के लिए उपयोगकर्ता अनुभव लेख और UX प्लैनेट के, अनुमतियों के लिए उपयोगकर्ताओं से पूछने के सही तरीके अच्छे संसाधन हैं. इनसे यह समझने में मदद मिलती है कि अनुमति से जुड़े प्रॉम्प्ट कैसे डिज़ाइन किए जाते हैं. ये प्रॉम्प्ट, मोबाइल पर पूरा करते समय, सभी PWA पर लागू होते हैं.

स्वस्थ कोड के लिए सबसे सही तरीके अपनाता है
अपने कोडबेस को स्वस्थ रखने से आपके लक्ष्यों को पूरा करना और नई सुविधाएं डिलीवर करना आसान हो जाता है.

अपने कोडबेस को स्वस्थ रखने से आपके लक्ष्यों को पूरा करना और नई सुविधाएं डिलीवर करना आसान हो जाता है.

क्यों शुरू करें?

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

जवाब कैसे दें

बेहतर कोडबेस के लिए कई प्राथमिकता वाली जांच करनी होती हैं: जाने-पहचाने जोखिम की आशंका वाली लाइब्रेरी का इस्तेमाल करने से बचना, यह पक्का करना कि काम न करने वाले एपीआई का इस्तेमाल नहीं किया जा रहा है, अपने कोड बेस से वेब एंटी-पैटर्न (जैसे कि document.write() या नॉन-पैसिव स्क्रोल इवेंट लिसनर का इस्तेमाल करना) से वेब एंटी-पैटर्न हटाना. यहां तक कि सुरक्षा के साथ कोडिंग करना, ताकि यह पक्का किया जा सके कि Analytics या तीसरे पक्ष की लाइब्रेरी लोड न हो पाने पर आपका PWA काम न करे. कई ब्राउज़र और रिलीज़ चैनल में, लिंटिंग जैसे स्टैटिक कोड का विश्लेषण करना ज़रूरी बनाएं. साथ ही, अपने-आप होने वाली जांच को भी ज़रूरी बनाएं. इन तकनीकों की मदद से, प्रोडक्शन में आने से पहले ही गड़बड़ियों का पता लगाया जा सकता है.