इस चैप्टर में, कॉन्टेंट को ब्राउज़र टैब के बाहर रेंडर करने के कुछ अहम पहलुओं पर फ़ोकस किया गया है.
विंडो
ऐप्लिकेशन विंडो के बारे में अलग-अलग ऑपरेटिंग सिस्टम में अलग-अलग आइडिया होते हैं. उदाहरण के लिए, iPhone पर कोई ऐप्लिकेशन, स्क्रीन के 100% हिस्से में हमेशा दिखता है. Android और iPad पर, ऐप्लिकेशन आम तौर पर फ़ुलस्क्रीन पर काम करते हैं. हालांकि, दो ऐप्लिकेशन के बीच स्क्रीन को शेयर किया जा सकता है. हालांकि, एक समय पर सिर्फ़ एक ऐप्लिकेशन इंस्टेंस खुला होता है. इसके उलट, डेस्कटॉप डिवाइस पर, एक बार में एक ऐप्लिकेशन में एक से ज़्यादा इंस्टेंस खुल सकते हैं. यह उपलब्ध स्क्रीन रीयल एस्टेट को अन्य सभी खुले हुए ऐप्लिकेशन के साथ शेयर करता है. हर ऐप्लिकेशन इंस्टेंस का साइज़ बदला जा सकता है. साथ ही, उसे स्क्रीन पर कहीं भी रखा जा सकता है, यहां तक कि अन्य ऐप्लिकेशन को ओवरलैप करते हुए भी.
आइकॉन
हम ऐप्लिकेशन को उनके आइकॉन से पहचानते हैं. ऐप्लिकेशन के बारे में कुछ खोजने पर, सेटिंग में जाकर, यह आइकॉन तब दिखता है, जब ऐप्लिकेशन लॉन्च किया जाता है और जहां आपको चल रहे ऐप्लिकेशन दिखते हैं.
इनमें शामिल हैं:
- होम स्क्रीन (iOS, iPadOS, Android).
- ऐप्लिकेशन लॉन्चर (macOS, Android).
- Windows, ChromeOS, और Linux के लिए, स्टार्ट मेन्यू या ऐप्लिकेशन मेन्यू.
- डॉक, टास्कबार या एक से ज़्यादा टास्क वाले पैनल (सभी ऑपरेटिंग सिस्टम).
अपने प्रोग्रेसिव वेब ऐप्लिकेशन के लिए आइकॉन बनाते समय पक्का करें कि उसका आइकॉन प्लैटफ़ॉर्म-एग्नोस्टिक हो. ऐसा इसलिए, क्योंकि हर ऑपरेटिंग सिस्टम, आइकॉन रेंडर कर सकता है और उन पर अलग-अलग साइज़ के मास्क लागू कर सकता है, जैसा कि नीचे इमेज में दिखाया गया है.
अपने ऐप्लिकेशन की थीम सेट करना
अपने PWA में ऐप्लिकेशन की स्टाइल को पसंद के मुताबिक बनाने के कई तरीके हैं. इनमें ये तरीके शामिल हैं:
- थीम का रंग: यह डेस्कटॉप पर विंडो के टाइटल बार का रंग और मोबाइल डिवाइसों पर स्टेटस बार का रंग तय करता है. मेटा टैग का इस्तेमाल करके, गहरे या हल्के रंग वाले मोड जैसी अलग-अलग स्कीम के विकल्प दिए जा सकते हैं. इन्हें उपयोगकर्ता की पसंद के हिसाब से इस्तेमाल किया जाएगा.
- बैकग्राउंड का रंग: यह ऐप्लिकेशन और उसके सीएसएस के लोड होने से पहले, विंडो का रंग तय करता है.
- एक्सेंट रंग: यह ब्राउज़र में पहले से मौजूद कॉम्पोनेंट के रंग के बारे में बताता है, जैसे कि फ़ॉर्म कंट्रोल.
डिसप्ले मोड
आपके पास यह तय करने का विकल्प है कि प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, आपको किस तरह की विंडो का अनुभव चाहिए. इसके लिए, आपके पास तीन विकल्प हैं:
- फ़ुलस्क्रीन
- स्टैंडअलोन
- मिनिमम यूज़र इंटरफ़ेस
फ़ुलस्क्रीन का अनुभव
गेम, वीआर या एआर (ऑगमेंटेड रिएलिटी) जैसे शानदार अनुभवों के लिए, फ़ुलस्क्रीन मोड में वीडियो दिखाने की सुविधा सही है. फ़िलहाल, यह सुविधा सिर्फ़ Android डिवाइसों पर उपलब्ध है. यह स्टेटस बार और नेविगेशन बार को छिपा देता है, जिससे आपके कॉन्टेंट के लिए PWA की 100% स्क्रीन दिखती है.
डेस्कटॉप और iPadOS पर, फ़ुलस्क्रीन PWA काम नहीं करते. हालांकि, उपयोगकर्ता के अनुरोध पर अपने ऐप्लिकेशन को फ़ुलस्क्रीन मोड में दिखाने के लिए, PWA में Fullscreen API का इस्तेमाल किया जा सकता है.
स्टैंडअलोन अनुभव
प्रोग्रेसिव वेब ऐप्लिकेशन का सबसे आम विकल्प, स्टैंडअलोन मोड, किसी भी ब्राउज़र नेविगेशन यूज़र इंटरफ़ेस (यूआई) के बिना ओएस-स्टैंडर्ड विंडो में आपके PWA को दिखाता है. इस विंडो में ब्राउज़र से कंट्रोल किया जाने वाला मेन्यू भी शामिल हो सकता है. यहां उपयोगकर्ता ये काम कर सकते हैं:
- मौजूदा यूआरएल को कॉपी करें.
- ब्राउज़र एक्सटेंशन देखें, लागू करें या बंद करें.
- अनुमतियां देखें और उनमें बदलाव करें.
- मौजूदा ऑरिजिन और एसएसएल सर्टिफ़िकेट की जांच करें.
टैब में PWA को रेंडर करते समय, टाइटल बार में खोज वाली पट्टी या यूआरएल बार की जगह, अनुमतियां और हार्डवेयर का इस्तेमाल भी दिख सकता है.
मोबाइल डिवाइसों पर, स्टैंडअलोन PWA अनुभव एक स्टैंडर्ड स्क्रीन बनाएगा, जिससे स्टेटस बार दिखेगा. इससे उपयोगकर्ता को सूचनाएं, समय, और बैटरी लेवल देखने की सुविधा मिलती रहेगी. इसमें अक्सर ऐसा कोई भी ब्राउज़र नहीं होता है जिसे ब्राउज़र कंट्रोल करता है. जैसे, डेस्कटॉप पर अलग-अलग मोड.
PWA के फ़ोरग्राउंड में होने पर, Android पर कुछ ब्राउज़र बिना आवाज़ वाली सूचना बनाते हैं और उपयोगकर्ताओं को मौजूदा यूआरएल या अन्य विकल्पों को कॉपी करने की सुविधा देते हैं.
मिनिमम यूज़र इंटरफ़ेस
यह मोड, Android और डेस्कटॉप ऑपरेटिंग सिस्टम के प्रोग्रेसिव वेब ऐप्लिकेशन के लिए उपलब्ध है. इसका इस्तेमाल करने पर, आपके PWA को रेंडर करने वाला ब्राउज़र, कम से कम यूज़र इंटरफ़ेस दिखाएगा. इससे उपयोगकर्ता को ऐप्लिकेशन के अंदर नेविगेट करने में मदद मिलेगी.
Android पर, आपको एक टाइटल बार मिलेगा जो मौजूदा <title> एलिमेंट और ऑरिजिन को रेंडर करता है. इसके लिए, एक छोटा ड्रॉप-डाउन मेन्यू उपलब्ध होता है. डेस्कटॉप पर, नेविगेशन में मदद करने के लिए, आपको टाइटल बार में कई बटन मिलेंगे. इनमें 'वापस जाएं' बटन और एक कंट्रोल भी शामिल होगा. यह कंट्रोल, लोड होने की मौजूदा स्थिति के आधार पर स्टॉप और फिर से लोड होने की कार्रवाई के बीच स्विच होता है.
डेस्कटॉप के लिए डिज़ाइन को ऑप्टिमाइज़ करना
जब आप डेस्कटॉप पर काम करने के लिए प्रोग्रेसिव वेब ऐप्लिकेशन डिज़ाइन करते हैं, तो आपको ब्राउज़र के टैब या मोबाइल ऑपरेटिंग सिस्टम वाले ऐप्लिकेशन की तुलना में विंडो साइज़ की अनगिनत संभावनाओं के बारे में सोचना होगा.
चैप्टर 3 में, हमने मिनी-मोड के बारे में बताया: डेस्कटॉप ऐप्लिकेशन का साइज़ 200 x 100 पिक्सल तक हो सकता है. यह विंडो, आपके एचटीएमएल में मौजूद <title> एलिमेंट के कॉन्टेंट का इस्तेमाल, विंडो के टाइटल के तौर पर करेगी. वह कॉन्टेंट तब भी रेंडर होता है, जब ऐप्लिकेशन और दूसरी जगहों पर वैकल्पिक टैब लगाया जाता है.
अपने एचटीएमएल के <title> एलिमेंट पर ध्यान दें और दोबारा इस्तेमाल करने के बारे में सोचें. <title> सिर्फ़ एसईओ के लिए नहीं है या ब्राउज़र के टैब में सिर्फ़ पहले वर्ण को रेंडर करने के लिए नहीं है, बल्कि यह आपकी स्टैंडअलोन डेस्कटॉप विंडो के उपयोगकर्ता अनुभव का हिस्सा भी होगा.
सीएसएस के लिए सबसे सही तरीके
सीएसएस लेआउट, डिज़ाइन, और ऐनिमेशन के साथ आपका पूरा अनुभव, तब ही मान्य है, जब आपका कॉन्टेंट इसके स्टैंडअलोन वर्शन में रेंडर किया जाता है. हालांकि, स्टैंडअलोन विंडो के लिए अनुभव को बेहतर बनाने के लिए कुछ सुझाव और तरकीबें हैं.
मीडिया क्वेरी
अपने 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 का इस्तेमाल करते हैं, तो उन्हें ऐप्लिकेशन के काम करने के तरीके की उम्मीद करनी होती है. हालांकि, इसका मतलब समझाना आसान नहीं है, लेकिन कुछ मामलों में डिफ़ॉल्ट वेब व्यवहार सबसे अच्छा अनुभव नहीं देता.
उपयोगकर्ता का चुनाव
आम तौर पर, कॉन्टेंट को माउस या पॉइंटर या दबाकर रखने का जेस्चर (हाव-भाव) का इस्तेमाल करके चुना जा सकता है. हालांकि, यह कॉन्टेंट के लिए मददगार होता है, लेकिन यह आपके 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 में ऐसी सुविधा होती है जो पेज को नीचे खींचने पर उसे रीफ़्रेश कर देती है. Android पर Chrome जैसे कुछ ब्राउज़र पर, यह सेटिंग अलग-अलग PWA पर भी चालू रहती है.
आप चाहें, तो इस कार्रवाई को बंद कर दें. उदाहरण के लिए, जब खुद के जेस्चर मैनेज करने की सुविधा दी जा रही हो या पेज को रीफ़्रेश किया जा रहा हो. इसके अलावा, ऐसा तब भी किया जा सकता है, जब आपका उपयोगकर्ता अनजाने में कार्रवाई ट्रिगर कर दे.
overscroll-behavior-y: contain का इस्तेमाल करके इस व्यवहार को बंद किया जा सकता है:.
body {
overscroll-behavior-y: contain;
}
सुरक्षित जगहें
कुछ डिवाइसों में बिना रुकावट वाली आयताकार स्क्रीन नहीं होती हैं. इसके बजाय, उनकी स्क्रीन का आकार अलग हो सकता है, जैसे कि कोई गोल घेरे या स्क्रीन के कुछ हिस्से ऐसे हो सकते हैं जिनका इस्तेमाल नहीं किया जा सकता. जैसे, iPhone 13 का नॉच. ऐसे मामलों में, कुछ ब्राउज़र सुरक्षित जगह वाले एनवायरमेंट वैरिएबल दिखाते हैं, जो कॉन्टेंट दिखा सकते हैं.
अगर आपको अपने रंग या इमेज को रेंडर करने के लिए, स्क्रीन का पूरा ऐक्सेस चाहिए, भले ही वह साफ़ न हो, तो अपने <meta name="viewport"> टैग के कॉन्टेंट में viewport-fit=cover को शामिल करें. इसके बाद, safe-area-inset-* एनवायरमेंट वैरिएबल का इस्तेमाल करके, उन इलाकों में अपना कॉन्टेंट सुरक्षित तरीके से बढ़ाएं.