ऐसी कई सुविधाओं को बेहतर बनाया गया है जिनसे PWA का कन्वर्ज़न बेहतर तरीके से किया जा सकता है. साथ ही, उसके इस्तेमाल को भी बेहतर बनाया जा सकता है.
ऐप्लिकेशन शॉर्टकट
ऐप्लिकेशन शॉर्टकट, आपके PWA के डीप लिंक की स्टैटिक सूची होती है. इन्हें आपके मेनिफ़ेस्ट में लिखा जाता है. वेब ऐप्लिकेशन मेनिफ़ेस्ट की खास जानकारी. इससे अपने PWA में अलग-अलग हिस्सों या सुविधाओं के शॉर्टकट की सूची बनाई जा सकती है और वे अक्सर ऐक्सेस किए जाने वाले सेक्शन में तेज़ी से नेविगेट करते हैं.
ऐप्लिकेशन शॉर्टकट, ज़्यादातर डेस्कटॉप ऑपरेटिंग सिस्टम और WebAPK के साथ उपलब्ध Android पर उपलब्ध हैं. ये होम स्क्रीन, डॉक या टास्कबार में ऐप्लिकेशन के आइकॉन पर, संदर्भ के हिसाब से मौजूद मेन्यू में दिखते हैं, जैसा कि इस इमेज में दिखाया गया है:
इस मेन्यू को ऐक्सेस करने के लिए, उपयोगकर्ताओं को PWA के आइकॉन पर दायां क्लिक करना होगा या उसे दबाकर रखना होगा.
शॉर्टकट की जानकारी, मेनिफ़ेस्ट के shortcuts सदस्य में दी जाती है. यह इन प्रॉपर्टी वाले सदस्यों का कलेक्शन शामिल करता है:
name- वह टेक्स्ट जो उपयोगकर्ता को दिखाया जाएगा. यह आम तौर पर संदर्भ मेन्यू में होता है.
url- जब उपयोगकर्ता इस शॉर्टकट से PWA को शुरू करता है, तब वह यूआरएल लोड होना चाहिए. यह आपके PWA के स्कोप का यूआरएल होना चाहिए और इसे
nameयाshort_nameमें बताई गई सुविधा से डीप-लिंक होना चाहिए. short_name- (ज़रूरी नहीं)
nameफ़ील्ड की पूरी वैल्यू दिखाने के लिए जगह न होने पर, छोटा नाम इस्तेमाल किया जाता है. description- (ज़रूरी नहीं) इस शॉर्टकट के काम करने के तरीके का ब्यौरा
icons- (ज़रूरी नहीं)
src,type,sizes, और वैकल्पिकpurposeफ़ील्ड के साथ आइकॉन ऑब्जेक्ट का कलेक्शन. इसमें यह जानकारी दी गई है कि किन इमेज से शॉर्टकट दिखेगा
आपको ऐप्लिकेशन शॉर्टकट को बेहतरीन तरीके से इस्तेमाल करना चाहिए. इसका मतलब है कि लगातार दिखने के लिए इन शॉर्टकट पर भरोसा नहीं किया जा सकता. भले ही, ये शॉर्टकट दिखें, लेकिन आपको यह नहीं पता होता कि कितने शॉर्टकट दिखेंगे या क्या प्लैटफ़ॉर्म ब्राउज़र के हिसाब से आइकॉन को अनदेखा कर देगा. हर प्लैटफ़ॉर्म पर चर्चा करना संभव नहीं है, लेकिन नीचे बताया गया है कि यह Android और डेस्कटॉप पर कैसे काम करता है. ऐसे में अनिश्चितता से निपटने के लिए, सबसे अच्छा तरीका है कि अपने आइटम को प्राथमिकता के हिसाब से क्रम में लगाया जाए.
यहां दिए गए कोड सैंपल से ऐसे अलग-अलग ऐप्लिकेशन शॉर्टकट के बारे में पता चलता है जिन्हें Chrome पर Android पर या डेस्कटॉप पर Edge या Chrome वाले ऐप्लिकेशन को इंस्टॉल करने के दौरान आज़माया जा सकता है.
iOS और iPadOS
PWA को पब्लिश करते समय, कुछ सुविधाओं को बेहतर बनाया गया है. इनसे iOS/iPadOS पर Safari का इस्तेमाल करने वालों के अनुभव को बेहतर बनाया जा सकता है.
स्प्लैश स्क्रीन
जैसा कि वेब ऐप्लिकेशन मेनिफ़ेस्ट चैप्टर में बताया गया है, Android, मेनिफ़ेस्ट की वैल्यू के आधार पर अपने-आप स्प्लैश स्क्रीन बनाता है. ऐसा iOS और iPadOS पर नहीं होता है. इन डिवाइसों में, आपको <link> एलिमेंट का इस्तेमाल करके, एचटीएमएल में स्प्लैश स्क्रीन को स्टैटिक इमेज के तौर पर सेट करना चाहिए.
इन इमेज को Apple डिवाइसों पर स्टार्टअप इमेज के तौर पर जाना जाता है. ये apple-touch-startup-image वैल्यू वाली rel प्रॉपर्टी का इस्तेमाल करती हैं, जैसे कि:
<link rel="apple-touch-startup-image" href="ios-startup.png">
चुनौती यह है कि स्टार्टअप इमेज की विंडो का साइज़ ठीक वैसा ही होना चाहिए जैसा आपके PWA को खोलने पर होगा. इसलिए, अलग-अलग iOS और iPadOS डिवाइसों को अलग-अलग इमेज की ज़रूरत होगी. iPad पर आपको कई अन्य स्थितियों का भी सामना करना होगा. जैसे, लैंडस्केप/पोर्ट्रेट मोड में ओपनिंग और PWA को मल्टीटास्क मोड में रेंडर करना (जैसे कि स्क्रीन के 1/3,1/2 या स्क्रीन का 2/3).
Apple ह्यूमन इंटरफ़ेस के दिशा-निर्देशों पर जाकर, iOS और iPadOS के स्क्रीन साइज़ की अपडेट की गई सूची देखी जा सकती है
media एट्रिब्यूट में मीडिया क्वेरी का इस्तेमाल करके, लॉन्च की इमेज के अलग-अलग वर्शन सेट किए जा सकते हैं:
<link rel="apple-touch-startup-image" href="ios-startup.png"
media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
media="orientation: landscape">
iOS स्टार्टअप इमेज के लिए डिज़ाइन पैटर्न
स्टार्टअप इमेज तय करना बहुत मेहनत का काम है, इसलिए हमारे पास अपने-आप जनरेट होने और कॉन्फ़िगरेशन के लिए कुछ टूल हैं:
- स्टैटिक जनरेशन, आपके बिल्ड सिस्टम के साथ इंटिग्रेट हो जाता है. इससे सभी PNG स्टैटिक इमेज बनती हैं. साथ ही, आपके दस्तावेज़ में इंजेक्ट करने के लिए,
<link>एलिमेंट वाला एचटीएमएल कोड मिलता है. PWA ऐसेट जनरेटर, इसी तरह के टूल का एक उदाहरण है. - क्लाइंट-साइड जनरेटर, एक JavaScript टूल है जो मौजूदा डिवाइस के टाइप और स्क्रीन साइज़ के आधार पर, स्टार्टअप इमेज के एक या उससे ज़्यादा base64 वर्शन को
<link>में डाले गए एलिमेंट में जोड़ सकता है. आपके पास मेमोरी में मौजूद कैनवस का इस्तेमाल करने, इमेज को रेंडर करने, और उसे PNG फ़ाइल के साथdata:यूआरआई में बदलने का विकल्प है. PWA Compat लाइब्रेरी, इस्तेमाल में आसान क्लाइंट-साइड लाइब्रेरी है. ऐसा करने के लिए, Android की सामान्य लॉन्च स्क्रीन की नकल की गई है.
Apple मोबाइल प्लैटफ़ॉर्म पर PWA का पता लगाना
आपको अपने PWA में प्रोग्रेसिव एन्हैंसमेंट और सुविधा की पहचान करने की सुविधा का इस्तेमाल करना चाहिए. हालांकि, कुछ ऐसे मामले भी हो सकते हैं जिनमें हमारे लिए यह जानना ज़रूरी हो कि उपयोगकर्ता, Apple के मोबाइल प्लैटफ़ॉर्म पर PWA में है या नहीं. जैसे, आपको इंस्टॉल करने के निर्देश देना है या प्लैटफ़ॉर्म के हिसाब से सिर्फ़ iOS वाले ऐप्लिकेशन में लिंक जोड़ना है.
उपयोगकर्ता एजेंट स्ट्रिंग को पढ़ने से बचने के लिए, navigator ऑब्जेक्ट की standalone प्रॉपर्टी देखें. यह प्रॉपर्टी एक नॉन-स्टैंडर्ड प्रॉपर्टी है और यह सिर्फ़ iOS और iPadOS पर WebKit इंजन पर उपलब्ध है.
- अगर
navigator.standaloneकी वैल्यूundefinedहै, तो इसका मतलब है कि उपयोगकर्ता iPadOS या iOS डिवाइस का इस्तेमाल नहीं कर रहा है. - अगर
navigator.standaloneकी वैल्यूfalseहै, तो इसका मतलब है कि उपयोगकर्ता ने ब्राउज़र में PWA खोला और वहां उसका इस्तेमाल किया. - अगर
navigator.standaloneकी वैल्यूtrueहै, तो इसका मतलब है कि उपयोगकर्ता ने होम स्क्रीन से PWA खोला और उसे स्टैंडअलोन PWA का अनुभव मिल रहा है.
फ़ुलस्क्रीन की सुविधा
iOS और iPad पर Safari में, आपके PWA के आइकॉन के लिए डिसप्ले मोड के तौर पर सिर्फ़ display: standalone काम करता है. display: fullscreen, Android डिवाइसों की तरह काम नहीं करता, लेकिन अपने PWA को फ़ुलस्क्रीन मोड में डालने के लिए, बिना स्टैंडर्ड वाले मेटा-टैग का इस्तेमाल किया जा सकता है.
अगली इमेज में, आपको बाईं ओर थीम के रंग वाला डिफ़ॉल्ट स्टैंडअलोन डिज़ाइन दिख सकता है. साथ ही, दाईं ओर फ़ुलस्क्रीन iOS मोड के साथ PWA दिख सकता है, जिसकी मदद से स्टेटस बार के पीछे कॉन्टेंट रेंडर किया जा सकता है.
अगर नीचे दिए गए टैग को अपने एचटीएमएल में जोड़ा जाता है, तो iOS और iPadOS पर आपका PWA, फ़ुल-स्क्रीन मोड में चला जाएगा. हालांकि, यह Android से अलग होता है.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
इस मोड में, डिवाइस का स्टेटस बार (जहां आपको घड़ी, बैटरी लेवल, और सूचना के आइकॉन दिखते हैं) अब भी दिख रहा है. हालांकि, यह बार आपके कॉन्टेंट के ऊपर पारदर्शी बैकग्राउंड के साथ दिखता है.
इस मोड का इस्तेमाल करते समय, अपने डिज़ाइन के प्रति सावधानी बरतें, क्योंकि ऑपरेटिंग सिस्टम आइकॉन को हमेशा सफ़ेद रंग में रेंडर करता है. इसलिए, आपको स्क्रीन के सबसे ऊपरी हिस्से में मौजूद बैकग्राउंड के कंट्रास्ट को हमेशा हल्के रंग में दिखाना चाहिए. साथ ही, ऐप्लिकेशन डिज़ाइन चैप्टर की तरह, सुरक्षित जगह पर कॉन्टेंट को रेंडर करने के लिए, सीएसएस एनवायरमेंट वैरिएबल का इस्तेमाल करना ज़रूरी है.
इंस्टॉलेशन विश्वसनीयता
iOS और iPadOS पर 15.4 वर्शन से पहले के वर्शन पर Safari सिर्फ़ नेटवर्क से मेनिफ़ेस्ट फ़ाइल को लोड करता है, जब उपयोगकर्ता ब्राउज़र में शेयर आइकॉन का इस्तेमाल करके शेयर शीट खोलता है, न कि पेज लोड होने पर. इसलिए, Safari उस समय तक जांच नहीं करता कि आपकी वेबसाइट PWA है या नहीं. इसकी वजह से, मेनिफ़ेस्ट लोड नहीं हो सकते या इसमें बहुत ज़्यादा समय लग सकता है और Safari इसे अनदेखा कर देता है.
जब Safari, मेनिफ़ेस्ट को समय पर लोड नहीं कर पाता, तो "होम स्क्रीन पर जोड़ें" को दबाने से होम स्क्रीन पर एक आइकॉन बन जाता है. हालांकि, इससे ऐप्लिकेशन का अनुभव नहीं मिलता. यह सिर्फ़ Safari टैब का शॉर्टकट होगा.