इस चैप्टर में, ब्राउज़र टैब के बाहर कॉन्टेंट रेंडर करने के कुछ अहम पहलुओं के बारे में बताया गया है.
विंडो
अलग-अलग ऑपरेटिंग सिस्टम के हिसाब से, ऐप्लिकेशन विंडो अलग-अलग होती है. उदाहरण के लिए, iPhone पर कोई ऐप्लिकेशन हमेशा स्क्रीन का 100% हिस्सा लेता है. Android और iPad पर, ऐप्लिकेशन आम तौर पर फ़ुलस्क्रीन मोड में चलते हैं. हालांकि, स्क्रीन को दो ऐप्लिकेशन के बीच शेयर किया जा सकता है. हालांकि, एक बार में सिर्फ़ एक ऐप्लिकेशन इंस्टेंस खुला होता है. इसके उलट, डेस्कटॉप डिवाइस पर किसी ऐप्लिकेशन के एक से ज़्यादा इंस्टेंस एक साथ खुले रह सकते हैं. यह स्क्रीन की उपलब्ध जगह को, खुले हुए अन्य सभी ऐप्लिकेशन के साथ शेयर करता है. हर ऐप्लिकेशन इंस्टेंस का साइज़ बदला जा सकता है और उसे स्क्रीन पर कहीं भी रखा जा सकता है. यहां तक कि, उसे दूसरे ऐप्लिकेशन के ऊपर भी रखा जा सकता है.
आइकॉन
हम ऐप्लिकेशन की पहचान उनके आइकॉन से करते हैं. यह आइकॉन, ऐप्लिकेशन खोजने पर, सेटिंग में, ऐप्लिकेशन लॉन्च करने पर, और चल रहे ऐप्लिकेशन देखने पर दिखता है.
इनमें शामिल हैं:
- होम स्क्रीन (iOS, iPadOS, Android).
- ऐप्लिकेशन लॉन्चर (macOS, Android).
- Start मेन्यू या ऐप्लिकेशन मेन्यू (Windows, ChromeOS, Linux).
- डॉक, टास्कबार या मल्टी-टास्क पैनल (सभी ऑपरेटिंग सिस्टम).
अपने प्रोग्रेसिव वेब ऐप्लिकेशन के आइकॉन को बनाते समय, पक्का करें कि उसका आइकॉन सभी प्लैटफ़ॉर्म पर काम करता हो. ऐसा इसलिए, क्योंकि हर ऑपरेटिंग सिस्टम, आइकॉन को रेंडर कर सकता है और उन पर अलग-अलग आकार के मास्क लागू कर सकता है. जैसे, नीचे दी गई इमेज में दिखाए गए आइकॉन.
अपने ऐप्लिकेशन के लिए थीम तय करना
अपने PWA में ऐप्लिकेशन स्टाइल को पसंद के मुताबिक बनाने के कई तरीके हैं. इनमें ये शामिल हैं:
- थीम का रंग: इससे डेस्कटॉप पर विंडो के टाइटल बार का रंग और मोबाइल डिवाइसों पर स्टेटस बार का रंग तय होता है. मेटा टैग का इस्तेमाल करके, अलग-अलग स्कीम के विकल्प चुने जा सकते हैं. जैसे, डार्क या लाइट मोड. इनका इस्तेमाल, उपयोगकर्ता की प्राथमिकता के आधार पर किया जाएगा.
- बैकग्राउंड का रंग: ऐप्लिकेशन और उसकी सीएसएस लोड होने से पहले, विंडो का रंग तय करता है.
- एक्सेंट कलर: यह ब्राउज़र में पहले से मौजूद कॉम्पोनेंट का रंग तय करता है. जैसे, फ़ॉर्म कंट्रोल.
डिसप्ले मोड
आपके पास यह तय करने का विकल्प होता है कि आपको अपने प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, किस तरह की विंडो का अनुभव चाहिए. इसके लिए, तीन विकल्प उपलब्ध हैं:
- फ़ुलस्क्रीन
- स्टैंडअलोन
- कम से कम यूज़र इंटरफ़ेस
विंडो कंट्रोल के बगल में मौजूद टाइटल बार एरिया का इस्तेमाल करके भी, अपने PWA को ऐप्लिकेशन जैसा बनाया जा सकता है. इसके लिए, विंडो कंट्रोल ओवरले नाम के बेहतर डिसप्ले मोड का इस्तेमाल करें. अपने PWA के टाइटल बार के विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाएं लेख पढ़ें.
फ़ुलस्क्रीन मोड
फ़ुलस्क्रीन मोड, गेम, वीआर या एआर जैसे इमर्सिव अनुभवों के लिए सही है. फ़िलहाल, यह सुविधा सिर्फ़ Android डिवाइसों पर उपलब्ध है. यह स्टेटस बार और नेविगेशन बार को छिपा देती है, ताकि आपके PWA के कॉन्टेंट को पूरी स्क्रीन मिल सके.
डेस्कटॉप और iPadOS पर, फ़ुल-स्क्रीन PWA काम नहीं करते. हालांकि, उपयोगकर्ता के अनुरोध पर अपने ऐप्लिकेशन को फ़ुल-स्क्रीन में दिखाने के लिए, अपने PWA में Fullscreen API का इस्तेमाल किया जा सकता है.
स्टैंडअलोन अनुभव
प्रोग्रेसिव वेब ऐप्लिकेशन के लिए सबसे सामान्य विकल्प, स्टैंडअलोन मोड आपके पीडब्ल्यूए को ओएस-स्टैंडर्ड विंडो में दिखाता है. इसमें ब्राउज़र नेविगेशन यूज़र इंटरफ़ेस (यूआई) नहीं होता. विंडो में, ब्राउज़र से कंट्रोल किया जाने वाला मेन्यू भी शामिल हो सकता है. इसमें उपयोगकर्ता:
- मौजूदा यूआरएल कॉपी करें.
- ब्राउज़र एक्सटेंशन देखना, लागू करना या बंद करना.
- अनुमतियां देखना और उनमें बदलाव करना.
- मौजूदा ऑरिजिन और एसएसएल सर्टिफ़िकेट देखें.
जब टैब में PWA रेंडर होता है, तो टाइटल बार में अनुमतियां और हार्डवेयर के इस्तेमाल की जानकारी भी दिख सकती है. इसके लिए, ऑमनीबॉक्स या यूआरएल बार की जगह टाइटल बार का इस्तेमाल किया जाता है.
मोबाइल डिवाइसों पर, स्टैंडअलोन PWA एक स्टैंडर्ड स्क्रीन बनाएगा. इस स्क्रीन पर स्टेटस बार दिखता रहेगा, ताकि उपयोगकर्ता अब भी सूचनाएं, समय, और बैटरी लेवल देख सके. आम तौर पर, इसमें ब्राउज़र से कंट्रोल किया जाने वाला कोई मेन्यू नहीं होता. हालांकि, डेस्कटॉप स्टैंडअलोन वर्शन में ऐसा मेन्यू हो सकता है.
Android पर कुछ ब्राउज़र, PWA के फ़ोरग्राउंड में होने पर एक तय और साइलेंट सूचना बनाते हैं. इसकी मदद से, उपयोगकर्ता मौजूदा यूआरएल या अन्य विकल्पों को कॉपी कर सकता है.
कम से कम यूज़र इंटरफ़ेस
यह मोड, Android और डेस्कटॉप ऑपरेटिंग सिस्टम पर प्रोग्रेसिव वेब ऐप्लिकेशन के लिए उपलब्ध है. इसका इस्तेमाल करने पर, आपके PWA को रेंडर करने वाला ब्राउज़र, कम से कम यूज़र इंटरफ़ेस दिखाएगा. इससे उपयोगकर्ता को ऐप्लिकेशन में नेविगेट करने में मदद मिलेगी.
Android पर, आपको एक टाइटल बार दिखेगा. इसमें मौजूदा <title>
एलिमेंट और ऑरिजिन को रेंडर किया जाता है. साथ ही, एक छोटा ड्रॉप-डाउन मेन्यू भी उपलब्ध होता है. डेस्कटॉप पर, आपको टाइटल बार में बटन का एक सेट मिलेगा. इससे नेविगेट करने में मदद मिलेगी. इसमें, बैक बटन और एक कंट्रोल शामिल है. यह कंट्रोल, लोडिंग के मौजूदा स्टेटस के आधार पर, रोकें और फिर से लोड करें कार्रवाई के बीच स्विच करता है.
डेस्कटॉप के लिए डिज़ाइन को ऑप्टिमाइज़ करना
डेस्कटॉप पर काम करने के लिए प्रगतिशील वेब ऐप्लिकेशन डिज़ाइन करते समय, आपको ब्राउज़र के टैब या मोबाइल ऑपरेटिंग सिस्टम में ऐप्लिकेशन के तौर पर काम करने के मुकाबले, विंडो के साइज़ की अनगिनत संभावनाओं के बारे में सोचना होगा.
तीसरे चैप्टर में, हमने मिनी-मोड के बारे में बताया है: डेस्कटॉप ऐप्लिकेशन का साइज़ 200 x 100 पिक्सल तक हो सकता है. यह विंडो, आपके एचटीएमएल में मौजूद <title>
एलिमेंट के कॉन्टेंट का इस्तेमाल, विंडो के टाइटल के तौर पर करेगी. यह कॉन्टेंट तब भी रेंडर होता है, जब ऐप्लिकेशन और दूसरी जगहों के बीच alt-tab किया जाता है.
अपने एचटीएमएल के <title>
एलिमेंट पर ध्यान दें और यह देखें कि आपने इसका इस्तेमाल कैसे किया है. <title>
सिर्फ़ एसईओ या ब्राउज़र के टैब में सिर्फ़ पहले वर्ण को रेंडर करने के लिए नहीं है. यह आपकी स्टैंडअलोन डेस्कटॉप विंडो के उपयोगकर्ता अनुभव का हिस्सा होगा.
सीएसएस के सबसे सही तरीके
जब आपका कॉन्टेंट स्टैंडअलोन अनुभव में रेंडर किया जाता है, तो सीएसएस लेआउट, डिज़ाइन, और ऐनिमेशन से जुड़ा आपका पूरा अनुभव मान्य होता है. हालांकि, स्टैंडअलोन विंडो के लिए, अनुभव को बेहतर बनाने के लिए कुछ सुझाव और तरकीबें हैं.
मीडिया क्वेरी
अपने 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) {
}
ऐप्लिकेशन इस्तेमाल करने का अनुभव
जब उपयोगकर्ता किसी इंस्टॉल किए गए 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-*
एनवायरमेंट वैरिएबल का इस्तेमाल करके, अपने कॉन्टेंट को उन इलाकों में सुरक्षित तरीके से उपलब्ध कराएं.
संसाधन
- सीएसएस डिसप्ले-मोड मीडिया क्वेरी
- अपने स्क्रोल को कंट्रोल करना: पुल-टू-रिफ़्रेश और ओवरफ़्लो इफ़ेक्ट को पसंद के मुताबिक बनाना
- prefers-color-scheme: Hello darkness, my old friend
- prefers-reduced-motion: कभी-कभी कम मोशन ज़्यादा बेहतर होता है
- env() सीएसएस फ़ंक्शन
- सीएसएस का ऐक्सेंट कलर
- विंडो कंट्रोल ओवरले