ऐप डिज़ाइन

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

विंडो

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

आइकॉन

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

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

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

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

ऐप्लिकेशन के लिए थीम बनाना

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

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

डिसप्ले के मोड

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

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

फ़ुलस्क्रीन अनुभव

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

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

स्टैंडअलोन वर्शन

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

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

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

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

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

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

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

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

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

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

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

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

सीएसएस इस्तेमाल करने के सबसे सही तरीके

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

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

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

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

/* 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) {
}

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

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

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

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

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

.unselectable {
   user-select: none;
}

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

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

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

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

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

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

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

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

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

  body {
    overscroll-behavior-y: contain;
  }

सुरक्षित जगहें

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

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

संसाधन

• सीएसएस के डिसप्ले-मोड मीडिया क्वेरी
• स्क्रोल करने का कंट्रोल अपने पास रखें: पुल-टू-रीफ़्रेश और ओवरफ़्लो इफ़ेक्ट को पसंद के मुताबिक बनाएं
• prefers-color-scheme: नमस्ते, डार्कनेस, मेरे पुराने दोस्त
• कम मूवमेंट को प्राथमिकता देना: कभी-कभी, कम हलचल ज़्यादा होती है
• env() सीएसएस फ़ंक्शन
• सीएसएस का एक्सेंट रंग