प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) को आधुनिक एपीआई की मदद से बनाया और बेहतर किया जाता है. इससे, ये ऐप्लिकेशन बेहतर सुविधाएं देते हैं, ज़्यादा भरोसेमंद होते हैं, और इन्हें आसानी से इंस्टॉल किया जा सकता है. साथ ही, एक ही कोडबेस का इस्तेमाल करके, किसी भी व्यक्ति को, कहीं भी, किसी भी डिवाइस पर ये ऐप्लिकेशन उपलब्ध कराए जा सकते हैं. आपको बेहतरीन अनुभव देने वाले ऐसेट ग्रुप बनाने में मदद करने के लिए, मुख्य और सबसे सही चेकलिस्ट और सुझावों का इस्तेमाल करें.
प्रोग्रेसिव वेब ऐप्लिकेशन की मुख्य बातों की चेकलिस्ट
प्रोग्रेसिव वेब ऐप्लिकेशन की चेकलिस्ट में बताया गया है कि किसी ऐप्लिकेशन को इंस्टॉल करने लायक और सभी उपयोगकर्ताओं के लिए इस्तेमाल करने लायक बनाने के लिए क्या ज़रूरी है. भले ही, ऐप्लिकेशन का साइज़ या इनपुट टाइप कुछ भी हो.
कुछ ही सेकंड में शुरू होता है और तेज़ी से काम करता है
किसी भी ऑनलाइन अनुभव को सफल बनाने में परफ़ॉर्मेंस की अहम भूमिका होती है. ऐसा इसलिए, क्योंकि खराब परफ़ॉर्म करने वाली साइटों के मुकाबले अच्छा परफ़ॉर्म करने वाली साइटें लोगों का ध्यान खींचती हैं और उनमें लोगों की दिलचस्पी बनी रहती है. उपयोगकर्ता पर केंद्रित परफ़ॉर्मेंस मेट्रिक को ऑप्टिमाइज़ करने पर फ़ोकस करें.
क्यों
उपयोगकर्ताओं को आपका ऐप्लिकेशन इस्तेमाल करने के लिए, स्पीड बहुत ज़रूरी है. दरअसल, पेज लोड होने में लगने वाला समय एक सेकंड से दस सेकंड तक बढ़ने पर, उपयोगकर्ता के बाउंस होने की संभावना 123% बढ़ जाती है. load इवेंट से परफ़ॉर्मेंस भी नहीं रुकती. उपयोगकर्ताओं को यह कभी नहीं सोचना चाहिए कि उनका इंटरैक्शन, जैसे कि किसी बटन पर क्लिक करना, रजिस्टर हुआ है या नहीं. स्क्रोलिंग और ऐनिमेशन आसानी से होने चाहिए. परफ़ॉर्मेंस से आपके पूरे अनुभव पर असर पड़ता है. इससे यह पता चलता है कि आपका ऐप्लिकेशन कैसा काम करता है और उपयोगकर्ता इसे किस तरह से देखते हैं.
हालांकि, सभी ऐप्लिकेशन की ज़रूरतें अलग-अलग होती हैं. Lighthouse में परफ़ॉर्मेंस ऑडिट, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट पर आधारित होती हैं. इन ऑडिट में ज़्यादा स्कोर करने से, आपके उपयोगकर्ताओं को बेहतर अनुभव मिलेगा. अपने वेब ऐप्लिकेशन के लिए, रीयल-वर्ल्ड परफ़ॉर्मेंस का डेटा पाने के लिए, PageSpeed Insights या Chrome उपयोगकर्ता अनुभव रिपोर्ट का इस्तेमाल भी किया जा सकता है.
कैसे
अपने PWA को तेज़ी से शुरू करने और उसे तेज़ी से काम करते रहने के लिए, तेज़ी से लोड होने के बारे में हमारी गाइड पढ़ें.
यह सुविधा किसी भी ब्राउज़र में काम करती है
ऐप्लिकेशन इंस्टॉल करने से पहले, उपयोगकर्ता अपनी पसंद के किसी भी ब्राउज़र का इस्तेमाल करके आपके वेब ऐप्लिकेशन को ऐक्सेस कर सकते हैं.
क्यों
प्रोग्रेसिव वेब ऐप्लिकेशन, सबसे पहले वेब ऐप्लिकेशन होते हैं. इसका मतलब है कि उन्हें सभी ब्राउज़र पर काम करना चाहिए.
जेरेमी कीथ के मुताबिक, Resilient Web Design में ऐसा करने का सबसे असरदार तरीका यह है कि मुख्य सुविधाओं की पहचान की जाए. इसके बाद, उन सुविधाओं को सबसे आसान टेक्नोलॉजी का इस्तेमाल करके उपलब्ध कराया जाए. इसके बाद, जहां भी संभव हो, उपयोगकर्ता अनुभव को बेहतर बनाया जाए. ज़्यादातर मामलों में, इसका मतलब है कि मुख्य सुविधाएं बनाने के लिए सिर्फ़ एचटीएमएल का इस्तेमाल किया जाए. साथ ही, लोगों को बेहतर अनुभव देने के लिए सीएसएस और JavaScript का इस्तेमाल किया जाए, ताकि लोगों की दिलचस्पी बढ़ाई जा सके.
उदाहरण के लिए, फ़ॉर्म सबमिट करने की सुविधा का इस्तेमाल करें. इसे लागू करने का सबसे आसान तरीका, एक एचटीएमएल फ़ॉर्म है. यह फ़ॉर्म, POST अनुरोध सबमिट करता है. इसे बनाने के बाद, JavaScript की मदद से उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है. इसके लिए, फ़ॉर्म की पुष्टि की जा सकती है और AJAX के ज़रिए फ़ॉर्म सबमिट किया जा सकता है. इससे उन उपयोगकर्ताओं के लिए अनुभव बेहतर होगा जो इसका इस्तेमाल कर सकते हैं.
उपयोगकर्ता आपकी साइट को अलग-अलग डिवाइसों और ब्राउज़र पर ऐक्सेस करते हैं. सिर्फ़ स्पेक्ट्रम के ऊपरी हिस्से को टारगेट नहीं किया जा सकता. सुविधा का पता लगाने की सुविधा का इस्तेमाल करें, ताकि संभावित उपयोगकर्ताओं को बेहतर अनुभव दिया जा सके. इनमें ऐसे लोग भी शामिल हैं जो ऐसे ब्राउज़र और डिवाइसों का इस्तेमाल करते हैं जो अभी तक उपलब्ध नहीं हैं.
कैसे
जेरमी कीथ की रेज़िलिएंट वेब डिज़ाइन एक बेहतरीन संसाधन है. इसमें बताया गया है कि अलग-अलग ब्राउज़र पर काम करने वाली इस प्रोग्रेसिव कार्यप्रणाली में, वेब डिज़ाइन के बारे में कैसे सोचा जाए.
आपकी मदद के लिए कुछ और लेख
- A List Apart का Understanding Progressive Enhancement लेख, इस विषय के बारे में अच्छी जानकारी देता है.
- Smashing Magazine के लेख प्रोग्रेसिव एन्हांसमेंट: यह क्या है और इसका इस्तेमाल कैसे करें? में, प्रोग्रेसिव एन्हांसमेंट के बारे में बुनियादी जानकारी दी गई है. साथ ही, ज़्यादा बेहतर विषयों के लिंक दिए गए हैं.
- MDN के Implementing feature detection लेख में, किसी सुविधा के बारे में सीधे तौर पर क्वेरी करके उसका पता लगाने का तरीका बताया गया है.
किसी भी स्क्रीन साइज़ के हिसाब से रिस्पॉन्सिव
उपयोगकर्ता आपके PWA को किसी भी स्क्रीन साइज़ पर इस्तेमाल कर सकते हैं. साथ ही, इसका पूरा कॉन्टेंट किसी भी व्यूपोर्ट साइज़ पर उपलब्ध होता है.
क्यों
डिवाइस अलग-अलग साइज़ में उपलब्ध होते हैं. साथ ही, उपयोगकर्ता एक ही डिवाइस पर अलग-अलग साइज़ में आपके ऐप्लिकेशन का इस्तेमाल कर सकते हैं. इसलिए, यह पक्का करना ज़रूरी है कि आपका कॉन्टेंट व्यूपोर्ट में सही से दिखे. साथ ही, आपकी साइट की सभी सुविधाएं और कॉन्टेंट, व्यूपोर्ट के सभी साइज़ के लिए इस्तेमाल किए जा सकें.
व्यूपोर्ट के साइज़ के हिसाब से, उपयोगकर्ताओं के टास्क और ऐक्सेस किए जाने वाले कॉन्टेंट में कोई बदलाव नहीं होता. अलग-अलग व्यूपोर्ट साइज़ के हिसाब से, अपने कॉन्टेंट को फिर से व्यवस्थित किया जा सकता है. हालांकि, यह पक्का करें कि कॉन्टेंट किसी न किसी तरह से मौजूद हो. दरअसल, जैसा कि ल्यूक रोब्लेव्स्की ने अपनी किताब मोबाइल फ़र्स्ट में बताया है, छोटी स्क्रीन के लिए डिज़ाइन तैयार करके, उसे बड़ी स्क्रीन के हिसाब से अडजस्ट करने से, साइट के डिज़ाइन को बेहतर बनाया जा सकता है:
"मोबाइल डिवाइसों के लिए, सॉफ़्टवेयर डेवलपमेंट टीमों को किसी ऐप्लिकेशन में सिर्फ़ सबसे ज़रूरी डेटा और कार्रवाइयों पर ध्यान देना होता है. 320 x 480 पिक्सल वाली स्क्रीन पर, गैर-ज़रूरी चीज़ों के लिए जगह नहीं होती. आपको प्राथमिकता तय करनी होगी."
कैसे
रिस्पॉन्सिव डिज़ाइन के बारे में जानने के लिए कई संसाधन उपलब्ध हैं. इनमें ये शामिल हैं: ईथन मार्कोट का ओरिजनल लेख और इससे जुड़े अहम कॉन्सेप्ट का कलेक्शन. इसके अलावा, इस बारे में कई किताबें और बातचीत भी उपलब्ध हैं.
इस बातचीत को रिस्पॉन्सिव डिज़ाइन के कॉन्टेंट के पहलुओं तक सीमित रखने के लिए, यहां जाएं:
- कॉन्टेंट को प्राथमिकता देने वाला डिज़ाइन
- कॉन्टेंट-आउट रिस्पॉन्सिव लेआउट.
- मोबाइल से जुड़ी सात बड़ी गलतफ़हमियां. यह लेख, रिस्पॉन्सिव साइटों के छोटे साइज़ वाले व्यू के लिए उतना ही काम का है जितना कि मोबाइल के लिए.
यह कुकी, पसंद के मुताबिक ऑफ़लाइन पेज उपलब्ध कराती है
जब उपयोगकर्ता ऑफ़लाइन होते हैं, तो उन्हें अपने PWA में बनाए रखने से, उन्हें डिफ़ॉल्ट ब्राउज़र के ऑफ़लाइन पेज पर वापस ले जाने की तुलना में ज़्यादा बेहतर अनुभव मिलता है.
क्यों
उपयोगकर्ता चाहते हैं कि इंस्टॉल किए गए ऐप्लिकेशन, इंटरनेट कनेक्शन की स्थिति से कोई फ़र्क़ पड़े बिना काम करें. किसी प्लैटफ़ॉर्म के लिए बनाया गया ऐप्लिकेशन, ऑफ़लाइन होने पर कभी भी खाली पेज नहीं दिखाता. साथ ही, PWA को कभी भी ब्राउज़र का डिफ़ॉल्ट ऑफ़लाइन पेज नहीं दिखाना चाहिए. जब कोई उपयोगकर्ता ऐसे यूआरएल पर जाता है जिसे कैश मेमोरी में सेव नहीं किया गया है और जब कोई उपयोगकर्ता ऐसी सुविधा का इस्तेमाल करने की कोशिश करता है जिसके लिए इंटरनेट कनेक्शन की ज़रूरत होती है, तब उसे कस्टम ऑफ़लाइन अनुभव देना ज़रूरी होता है. इससे आपके वेब ऐप्लिकेशन को उस डिवाइस का हिस्सा होने का एहसास मिलता है जिस पर वह चल रहा है.
कैसे
सर्विस वर्कर के install इवेंट के दौरान, कस्टम ऑफ़लाइन पेज को पहले से कैश मेमोरी में सेव किया जा सकता है. इससे उपयोगकर्ता के ऑफ़लाइन होने पर, उसे यह पेज दिखाया जा सकता है. इसे खुद लागू करने का तरीका जानने के लिए, ऑफ़लाइन फ़ॉलबैक पेज बनाना लेख पढ़ें. अगर कोई पेज उपलब्ध नहीं कराया जाता है, तो Chrome बेसिक ऑफ़लाइन पेज दिखाता रहेगा.
क्या ऐप्लिकेशन इंस्टॉल किया जा सकता है
जो लोग अपने डिवाइस पर ऐप्लिकेशन इंस्टॉल करते हैं या उन्हें जोड़ते हैं वे उन ऐप्लिकेशन का इस्तेमाल ज़्यादा करते हैं.
क्यों
प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने पर, यह दिखने, इस्तेमाल करने, और काम करने में, इंस्टॉल किए गए अन्य ऐप्लिकेशन जैसा हो जाता है. इसे उसी जगह से लॉन्च किया जाता है जहां से उपयोगकर्ता अपने अन्य ऐप्लिकेशन लॉन्च करते हैं. यह ब्राउज़र से अलग, अपनी ऐप्लिकेशन विंडो में चलता है. साथ ही, यह अन्य ऐप्लिकेशन की तरह टास्क लिस्ट में दिखता है.
डिवाइस के हिसाब से बनाए गए ऐप्लिकेशन की तरह ही, आपके ऐप्लिकेशन इंस्टॉल करने वाले लोग आपकी सबसे ज़्यादा दिलचस्पी दिखाने वाली ऑडियंस होते हैं. साथ ही, अक्सर इनकी यूज़र ऐक्टिविटी की मेट्रिक, मोबाइल डिवाइसों पर ऐप्लिकेशन इस्तेमाल करने वाले लोगों की मेट्रिक के बराबर होती है. इन मेट्रिक में, सामान्य उपयोगकर्ताओं की तुलना में आपकी साइट पर बार-बार आने वाले लोगों की संख्या ज़्यादा होती है. साथ ही, वे आपकी साइट पर ज़्यादा समय बिताते हैं और उनका कन्वर्ज़न रेट भी ज़्यादा होता है.
कैसे
इंस्टॉल करने के बारे में हमारी गाइड देखें.
प्रोग्रेसिव वेब ऐप्लिकेशन को ऑप्टिमाइज़ करने के लिए चेकलिस्ट
बेहतरीन PWA बनाने के लिए, आपको सिर्फ़ मुख्य चेकलिस्ट से ज़्यादा चीज़ों की ज़रूरत होती है. PWA की ऑप्टिमल चेकलिस्ट का मतलब है कि आपका PWA, उस डिवाइस का हिस्सा लगे जिस पर वह चल रहा है. साथ ही, वेब की सुविधाओं का फ़ायदा भी मिले.
ऑफ़लाइन अनुभव उपलब्ध कराता है
जहां कनेक्टिविटी की ज़रूरत नहीं होती वहां आपका ऐप्लिकेशन, ऑफ़लाइन और ऑनलाइन, दोनों मोड में एक जैसा काम करता है.
क्यों
उपयोगकर्ताओं को कस्टम ऑफ़लाइन पेज उपलब्ध कराने के साथ-साथ, यह भी उम्मीद होती है कि वे PWAs को ऑफ़लाइन इस्तेमाल कर पाएं. उदाहरण के लिए, यात्रा और एयरलाइन से जुड़े ऐप्लिकेशन में, ऑफ़लाइन होने पर भी यात्रा की जानकारी और बोर्डिंग पास आसानी से उपलब्ध होने चाहिए. संगीत, वीडियो, और पॉडकास्टिंग ऐप्लिकेशन में ऑफ़लाइन चलाने की सुविधा होनी चाहिए. सोशल मीडिया और समाचार ऐप्लिकेशन को हाल ही के कॉन्टेंट को कैश मेमोरी में सेव करना चाहिए, ताकि उपयोगकर्ता उसे ऑफ़लाइन पढ़ सकें. उपयोगकर्ता यह भी उम्मीद करते हैं कि ऑफ़लाइन होने पर भी उनकी पुष्टि हो जाए. इसलिए, ऑफ़लाइन पुष्टि करने की सुविधा डिज़ाइन करें.
ऑफ़लाइन PWA, उपयोगकर्ताओं को ऐप्लिकेशन जैसा अनुभव देता है.
कैसे
यह तय करने के बाद कि आपके उपयोगकर्ता कौनसी सुविधाओं के ऑफ़लाइन काम करने की उम्मीद रखते हैं, आपको अपने कॉन्टेंट को ऑफ़लाइन उपलब्ध कराना होगा. साथ ही, उसे ऑफ़लाइन कॉन्टेक्स्ट के हिसाब से ढालना होगा. डेटा को सेव करने और वापस पाने के लिए, ब्राउज़र में मौजूद NoSQL स्टोरेज सिस्टम IndexedDB का इस्तेमाल किया जा सकता है. साथ ही, बैकग्राउंड सिंक का इस्तेमाल करके, उपयोगकर्ताओं को ऑफ़लाइन होने पर भी कार्रवाई करने की सुविधा दी जा सकती है. इसके अलावा, सर्वर से कम्यूनिकेशन को तब तक के लिए टाला जा सकता है, जब तक उपयोगकर्ता का कनेक्शन फिर से स्टेबल न हो जाए. सर्विस वर्कर का इस्तेमाल करके, ऑफ़लाइन इस्तेमाल के लिए अन्य तरह का कॉन्टेंट सेव किया जा सकता है. जैसे, इमेज, वीडियो फ़ाइलें, और ऑडियो फ़ाइलें. साथ ही, इनका इस्तेमाल सुरक्षित और लंबे समय तक चलने वाले सेशन लागू करने के लिए किया जा सकता है, ताकि उपयोगकर्ताओं की पुष्टि की जा सके.
उपयोगकर्ता अनुभव के हिसाब से, स्केलेटन स्क्रीन का इस्तेमाल किया जा सकता है. इससे उपयोगकर्ताओं को यह पता चलता है कि कॉन्टेंट कितनी तेज़ी से लोड हो रहा है. साथ ही, उन्हें कॉन्टेंट के बारे में भी जानकारी मिलती है. इसके बाद, ज़रूरत पड़ने पर इसे कैश किए गए कॉन्टेंट या ऑफ़लाइन इंडिकेटर पर वापस लाया जा सकता है.
पूरी तरह से ऐक्सेस किया जा सकता है
उपयोगकर्ता के सभी इंटरैक्शन, वेब कॉन्टेंट ऐक्सेसबिलिटी गाइडलाइंस (डब्ल्यूसीएजी) के अंतरराष्ट्रीय स्टैंडर्ड के सबसे नए वर्शन के मुताबिक होते हैं.
क्यों
ज़्यादातर उपयोगकर्ता, किसी न किसी समय आपके PWA का इस्तेमाल WCAG के मुताबिक करना चाहते हैं. लोग आपके PWA के साथ किस तरह से इंटरैक्ट करते हैं और उसे किस तरह से समझते हैं, यह एक स्पेक्ट्रम पर मौजूद होता है. साथ ही, उनकी ज़रूरतें कुछ समय के लिए या हमेशा के लिए हो सकती हैं. अपने PWA को ऐक्सेस करने की सुविधा देकर, उसे सभी के लिए इस्तेमाल करने लायक बनाया जा सकता है.
कैसे
W3C की वेब ऐक्सेसिबिलिटी के बारे में जानकारी से शुरुआत करना एक अच्छा विकल्प है. सुलभता की ज़्यादातर टेस्टिंग मैन्युअल तरीके से की जानी चाहिए. Lighthouse में सुलभता ऑडिट, axe, और Accessibility Insights की मदद से, सुलभता से जुड़ी कुछ टेस्टिंग को अपने-आप होने वाली प्रोसेस में बदला जा सकता है. इसके अलावा, खुद से एलिमेंट बनाने के बजाय, सिमैंटिक तौर पर सही एलिमेंट का इस्तेमाल करना भी ज़रूरी है. जैसे, <a> और <button> एलिमेंट. इससे यह पक्का होता है कि जब आपको ज़्यादा बेहतर सुविधाएं बनानी हों, तो सुलभता से जुड़ी उम्मीदें पूरी हों. जैसे, ऐरो का इस्तेमाल कब करना है और टैब का इस्तेमाल कब करना है.
A11Y न्यूट्रिशन कार्ड में, कुछ सामान्य कॉम्पोनेंट के लिए इस बारे में बेहतरीन सलाह दी गई है.
खोज में दिखने वाला
आपके PWA को खोज के ज़रिए आसानी से ढूंढा जा सकता है.
क्यों
वेब का सबसे बड़ा फ़ायदा यह है कि इसकी मदद से, खोज के ज़रिए साइटों और ऐप्लिकेशन को खोजा जा सकता है. दरअसल, वेबसाइट पर आने वाले कुल ट्रैफ़िक में से आधे से ज़्यादा ट्रैफ़िक, ऑर्गैनिक सर्च से मिलता है. यह पक्का करना ज़रूरी है कि कॉन्टेंट के लिए कैननिकल यूआरएल मौजूद हों और सर्च इंजन आपकी साइट को इंडेक्स कर सकें. इससे संभावित उपयोगकर्ताओं को आपका PWA ढूंढने में मदद मिलती है. खास तौर पर, क्लाइंट-साइड रेंडरिंग का इस्तेमाल करते समय ऐसा होता है.
कैसे
सबसे पहले, यह पक्का करें कि हर यूआरएल का टाइटल और मुख्य जानकारी यूनीक हो और उसमें जानकारी दी गई हो. इसके बाद, अपने PWA की खोज से जुड़ी समस्याओं को डीबग करने और उन्हें ठीक करने के लिए, Lighthouse में Google Search Console और सर्च इंजन ऑप्टिमाइज़ेशन ऑडिट का इस्तेमाल किया जा सकता है.
Bing या Yandex के साइट के मालिक वाले टूल भी इस्तेमाल किए जा सकते हैं. साथ ही, अपने PWA में Schema.org के स्कीमा का इस्तेमाल करके स्ट्रक्चर्ड डेटा शामिल किया जा सकता है.
यह सुविधा, किसी भी तरह के इनपुट के साथ काम करती है
आपके PWA को माउस, कीबोर्ड, स्टाइलस या टच से आसानी से इस्तेमाल किया जा सकता है.
क्यों
डिवाइसों में इनपुट के कई तरीके होते हैं. उपयोगकर्ताओं को आपका ऐप्लिकेशन इस्तेमाल करते समय, इन तरीकों के बीच आसानी से स्विच करने की सुविधा मिलनी चाहिए. इनपुट के तरीके, स्क्रीन साइज़ पर निर्भर नहीं होने चाहिए. इसका मतलब है कि बड़े व्यूपोर्ट में टच की सुविधा काम करनी चाहिए और छोटे व्यूपोर्ट में कीबोर्ड और माउस की सुविधा काम करनी चाहिए. यह पक्का करें कि आपका ऐप्लिकेशन और उसकी सभी सुविधाएं, उपयोगकर्ता के चुने गए किसी भी इनपुट तरीके के साथ काम करती हों. जहां ज़रूरी हो वहां बेहतर अनुभव दें, ताकि इनपुट के हिसाब से कंट्रोल भी इस्तेमाल किए जा सकें. जैसे, रीफ़्रेश करने के लिए नीचे की ओर खींचना.
कैसे
Pointer Events API अलग-अलग इनपुट विकल्पों के साथ काम करने के लिए, एक यूनिफ़ाइड इंटरफ़ेस उपलब्ध कराता है. यह खास तौर पर स्टाइलस की सुविधा जोड़ने के लिए अच्छा है. टच और कीबोर्ड, दोनों को सपोर्ट करने के लिए, पक्का करें कि सही सिमेंटिक एलिमेंट (ऐंकर, बटन, फ़ॉर्म कंट्रोल वगैरह) का इस्तेमाल किया जा रहा हो. साथ ही, उन्हें नॉन-सिमेंटिक एचटीएमएल से फिर से न बनाया जा रहा हो. माउस घुमाने पर चालू होने वाले इंटरैक्शन शामिल करते समय, पक्का करें कि वे क्लिक या टैप करने पर भी चालू हो सकें.
अनुमति के अनुरोधों के लिए कॉन्टेक्स्ट उपलब्ध कराता है
ज़्यादा सुविधाओं वाले एपीआई इस्तेमाल करने की अनुमति मांगते समय, संदर्भ दें और सिर्फ़ तब अनुमति मांगें, जब एपीआई की ज़रूरत हो.
क्यों
अनुमति का अनुरोध ट्रिगर करने वाले एपीआई, जैसे कि सूचनाएं, जियोलोकेशन, और क्रेडेंशियल, जान-बूझकर उपयोगकर्ता के काम में रुकावट डालने के लिए डिज़ाइन किए गए हैं. ऐसा इसलिए, क्योंकि ये एपीआई आम तौर पर उन सुविधाओं से जुड़े होते हैं जिनके लिए ऑप्ट-इन करना ज़रूरी होता है. पेज लोड होने जैसे अतिरिक्त कॉन्टेक्स्ट के बिना इन प्रॉम्प्ट को ट्रिगर करने से, उपयोगकर्ताओं के उन अनुमतियों को स्वीकार करने की संभावना कम हो जाती है. साथ ही, आने वाले समय में उन पर भरोसा करने की संभावना भी कम हो जाती है.
इसके बजाय, उन प्रॉम्प्ट को सिर्फ़ तब ट्रिगर करें, जब आपने उपयोगकर्ता को यह बता दिया हो कि आपको उस अनुमति की ज़रूरत क्यों है.
कैसे
अनुमति से जुड़ा UX लेख और UX Planet का लोगों से अनुमतियां मांगने के सही तरीके लेख, अनुमति के ऐसे प्रॉम्प्ट डिज़ाइन करने के बारे में जानने के लिए अच्छे संसाधन हैं जो मोबाइल पर फ़ोकस करते हैं. हालांकि, ये सभी PWA पर लागू होते हैं.
कोड को बेहतर बनाने के सबसे सही तरीकों का पालन करता है
अपने कोडबेस को सही तरीके से मैनेज करने पर, लक्ष्यों को हासिल करना और नई सुविधाएं उपलब्ध कराना आसान हो जाता है.
क्यों
मॉडर्न वेब ऐप्लिकेशन बनाने में काफ़ी मेहनत करनी पड़ती है. अपने ऐप्लिकेशन को अप-टू-डेट रखने और कोडबेस को सही रखने से, आपको नई सुविधाएं देने में आसानी होती है. ये सुविधाएं, इस चेकलिस्ट में बताए गए अन्य लक्ष्यों को पूरा करती हैं.
कैसे
कोडबेस को सही रखने के लिए, ज़्यादा प्राथमिकता वाली कई जांचें की जाती हैं:
- ऐसी लाइब्रेरी का इस्तेमाल न करें जिनमें सुरक्षा से जुड़ी समस्याएं पहले से मौजूद हैं.
- पक्का करें कि आपने काम न करने वाले एपीआई का इस्तेमाल न किया हो.
- अपने कोडबेस से कोडिंग के असुरक्षित तरीकों को हटाएं. जैसे,
document.write()या स्क्रोल इवेंट के ऐसे लिसनर जिनका इस्तेमाल पैसिव तरीके से नहीं किया जाता. - डिफ़ेंसिव कोडिंग का इस्तेमाल करके, यह पक्का किया जा सकता है कि अगर Analytics या तीसरे पक्ष की अन्य लाइब्रेरी लोड नहीं होती हैं, तो आपका PWA काम करना बंद न करे.
- स्टैटिक कोड विश्लेषण (जैसे, लिंटिंग) के साथ-साथ, कई ब्राउज़र और रिलीज़ चैनल में अपने-आप होने वाली टेस्टिंग की सुविधा चालू करें. इन तकनीकों की मदद से, गड़बड़ियों को प्रोडक्शन में शामिल होने से पहले ही पकड़ा जा सकता है.