ऐप डिज़ाइन

इस चैप्टर में, ब्राउज़र टैब के बाहर कॉन्टेंट रेंडर करने के कुछ अहम पहलुओं के बारे में बताया गया है.

विंडो

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

आइकॉन

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

इनमें शामिल हैं:

• होम स्क्रीन (iOS, iPadOS, Android).
• ऐप्लिकेशन लॉन्चर (macOS, Android).
• Start मेन्यू या ऐप्लिकेशन मेन्यू (Windows, ChromeOS, Linux).
• डॉक, टास्कबार या मल्टी-टास्क पैनल (सभी ऑपरेटिंग सिस्टम).

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

अपने ऐप्लिकेशन के लिए थीम तय करना

अपने PWA में ऐप्लिकेशन स्टाइल को पसंद के मुताबिक बनाने के कई तरीके हैं. इनमें ये शामिल हैं:

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

डेस्कटॉप पीडब्ल्यूए में थीम और ऐक्सेंट कलर दिख रहे हैं. साथ ही, Android पीडब्ल्यूए की स्प्लैश स्क्रीन में थीम और बैकग्राउंड कलर दिख रहे हैं.

ध्यान दें: प्रगतिशील वेब ऐप्लिकेशन के यूज़र इंटरफ़ेस को प्लान करते समय, ध्यान रखें कि अपनी थीम के लिए इमेज या ग्रेडिएंट का इस्तेमाल नहीं किया जा सकता. सिर्फ़ सादे रंगों का इस्तेमाल किया जा सकता है. पारदर्शी रंगों के बजाय, rgb या hsl रंगों, हेक्स कोड या नाम वाले रंगों का इस्तेमाल करना सबसे अच्छा होता है. अपने ऐप्लिकेशन के लिए थीम तय करने पर, ब्राउज़र की थीम पर भी असर पड़ सकता है. ऐसा तब भी हो सकता है, जब ऐप्लिकेशन इंस्टॉल न किया गया हो. जैसे, <meta name="theme-color"> एलिमेंट का इस्तेमाल करने पर.

डिसप्ले मोड

आपके पास यह तय करने का विकल्प होता है कि आपको अपने प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, किस तरह की विंडो का अनुभव चाहिए. इसके लिए, तीन विकल्प उपलब्ध हैं:

• फ़ुलस्क्रीन
• स्टैंडअलोन
• कम से कम यूज़र इंटरफ़ेस

विंडो कंट्रोल के बगल में मौजूद टाइटल बार एरिया का इस्तेमाल करके भी, अपने PWA को ऐप्लिकेशन जैसा बनाया जा सकता है. इसके लिए, विंडो कंट्रोल ओवरले नाम के बेहतर डिसप्ले मोड का इस्तेमाल करें. अपने PWA के टाइटल बार के विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाएं लेख पढ़ें.

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

फ़ुलस्क्रीन मोड

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

डेस्कटॉप और iPadOS पर, फ़ुल-स्क्रीन PWA काम नहीं करते. हालांकि, उपयोगकर्ता के अनुरोध पर अपने ऐप्लिकेशन को फ़ुल-स्क्रीन में दिखाने के लिए, अपने PWA में Fullscreen API का इस्तेमाल किया जा सकता है.

स्टैंडअलोन अनुभव

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

• मौजूदा यूआरएल कॉपी करें.
• ब्राउज़र एक्सटेंशन देखना, लागू करना या बंद करना.
• अनुमतियां देखना और उनमें बदलाव करना.
• मौजूदा ऑरिजिन और एसएसएल सर्टिफ़िकेट देखें.

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

ऊपर दी गई इमेज से पता चलता है कि Microsoft Edge और Chrome में, डेस्कटॉप पर स्टैंडअलोन मोड में PWA कैसे दिखता है.

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

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

कम से कम यूज़र इंटरफ़ेस

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

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

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

डेस्कटॉप के लिए डिज़ाइन को ऑप्टिमाइज़ करना

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

तीसरे चैप्टर में, हमने मिनी-मोड के बारे में बताया है: डेस्कटॉप ऐप्लिकेशन का साइज़ 200 x 100 पिक्सल तक हो सकता है. यह विंडो, आपके एचटीएमएल में मौजूद <title> एलिमेंट के कॉन्टेंट का इस्तेमाल, विंडो के टाइटल के तौर पर करेगी. यह कॉन्टेंट तब भी रेंडर होता है, जब ऐप्लिकेशन और दूसरी जगहों के बीच alt-tab किया जाता है.

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

ध्यान दें: अगर React या Vue जैसी क्लाइंट-साइड लाइब्रेरी का इस्तेमाल करके ऐप्लिकेशन डेवलप किया जा रहा है, तो अपने ऐप्लिकेशन के सेक्शन या रूट के बीच स्विच करते समय, <title> को किसी काम की वैल्यू में बदलना न भूलें. <title> को फिर से तैयार करने का समय आ गया है!

सीएसएस के सबसे सही तरीके

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

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

मीडिया क्वेरी

अपने PWA में browser, standalone, minimal-ui या fullscreen वैल्यू वाली display-mode प्रॉपर्टी का इस्तेमाल करके, पहली मीडिया क्वेरी का फ़ायदा लिया जा सकता है.

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

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

ध्यान दें: उपयोगकर्ताओं को उम्मीद होती है कि ऐप्लिकेशन, प्लैटफ़ॉर्म के साथ इंटिग्रेट हों. इसलिए, prefers-colors-scheme का इस्तेमाल करके, डार्क और लाइट मोड उपलब्ध कराएं. साथ ही, ट्रांज़िशन और ऐनिमेशन को बंद करने या कम करने के लिए, prefers-reduced-motion मीडिया क्वेरी का इस्तेमाल करें.

ऐप्लिकेशन इस्तेमाल करने का अनुभव

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

उपयोगकर्ता का चुना गया

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

इसलिए, user-select: none और इसके प्रीफ़िक्स वर्शन -webkit- का इस्तेमाल करके, इन एलिमेंट पर उपयोगकर्ता के चुने जाने की सुविधा को बंद करना अच्छा होता है:

.unselectable {
   user-select: none;
}

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

एक्सेंट का रंग

अपने PWA में, accent-color प्रॉपर्टी का इस्तेमाल करके, एचटीएमएल फ़ॉर्म कंट्रोल में अपने ब्रैंड से मैच करने वाला रंग तय किया जा सकता है.

सिस्टम फ़ॉन्ट

अगर आपको डायलॉग या मैसेज जैसे किसी एलिमेंट को, उपयोगकर्ता के डिफ़ॉल्ट प्लैटफ़ॉर्म फ़ॉन्ट से मैच करना है, तो इस फ़ॉन्ट फ़ैमिली का इस्तेमाल करें:

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

नीचे खींचकर रीफ़्रेश करें

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

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

overscroll-behavior-y: contain का इस्तेमाल करके, इस सुविधा को बंद किया जा सकता है:.

  body {
    overscroll-behavior-y: contain;
  }

सुरक्षित इलाके

कुछ डिवाइसों की स्क्रीन, आयताकार नहीं होती. इसके बजाय, उनकी स्क्रीन का आकार अलग हो सकता है, जैसे कि सर्कल. इसके अलावा, कुछ डिवाइसों की स्क्रीन के कुछ हिस्सों का इस्तेमाल नहीं किया जा सकता. जैसे, iPhone 13 का नॉच. ऐसे मामलों में, कुछ ब्राउज़र सुरक्षित जगहों के साथ एनवायरमेंट वैरिएबल दिखाएंगे, जहां कॉन्टेंट दिखाया जा सकता है.

अगर आपको रंग या इमेज को रेंडर करने के लिए, स्क्रीन का पूरा ऐक्सेस चाहिए, तो <meta name="viewport"> टैग के कॉन्टेंट में viewport-fit=cover शामिल करें. इसमें, स्क्रीन का वह हिस्सा भी शामिल होता है जो दिखता नहीं है. इसके बाद, safe-area-inset-* एनवायरमेंट वैरिएबल का इस्तेमाल करके, अपने कॉन्टेंट को उन इलाकों में सुरक्षित तरीके से उपलब्ध कराएं.

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

संसाधन

• सीएसएस डिसप्ले-मोड मीडिया क्वेरी
• अपने स्क्रोल को कंट्रोल करना: पुल-टू-रिफ़्रेश और ओवरफ़्लो इफ़ेक्ट को पसंद के मुताबिक बनाना
• prefers-color-scheme: Hello darkness, my old friend
• prefers-reduced-motion: कभी-कभी कम मोशन ज़्यादा बेहतर होता है
• env() सीएसएस फ़ंक्शन
• सीएसएस का ऐक्सेंट कलर
• विंडो कंट्रोल ओवरले