ऐसे कई बेहतर तरीके हैं जिनसे आपके PWA के कन्वर्ज़न और इस्तेमाल को बेहतर बनाया जा सकता है.
ऐप शॉर्टकट
ऐप्लिकेशन शॉर्टकट, आपके पीडब्ल्यूए के डीप लिंक की स्टैटिक सूची होती है. ये आपके मेनिफ़ेस्ट में लिखे जाते हैं. वेब ऐप्लिकेशन मेनिफ़ेस्ट की खास बातें. इसकी मदद से, पीडब्ल्यूए में अलग-अलग पार्ट या सुविधाओं के लिए शॉर्टकट की सूची बनाई जा सकती है. इनकी मदद से, अक्सर ऐक्सेस किए जाने वाले सेक्शन तक तेज़ी से नेविगेट किया जा सकता है.
ऐप्लिकेशन के शॉर्टकट, ज़्यादातर डेस्कटॉप ऑपरेटिंग सिस्टम और WebAPK वाले Android डिवाइसों पर उपलब्ध होते हैं. ये शॉर्टकट, होम स्क्रीन, डॉक या टास्कबार में ऐप्लिकेशन के आइकॉन पर मौजूद संदर्भ मेन्यू में दिखते हैं. जैसे, इस इमेज में दिखाया गया है:
इस मेन्यू को ऐक्सेस करने के लिए, उपयोगकर्ताओं को PWA के आइकॉन पर राइट क्लिक करना होगा या दबाकर रखना होगा.
शॉर्टकट, मेनिफ़ेस्ट के shortcuts
सदस्य में तय किए जाते हैं. यह मेम्बर का एक कलेक्शन लेता है, जिसमें ये प्रॉपर्टी होती हैं:
name
- यह वह टेक्स्ट होता है जो आम तौर पर संदर्भ मेन्यू में उपयोगकर्ता को दिखाया जाता है.
url
- जब उपयोगकर्ता इस शॉर्टकट से PWA को शुरू करता है, तो वह यूआरएल लोड होना चाहिए. यह यूआरएल आपके PWA के दायरे में होना चाहिए. साथ ही, यह उस सुविधा से डीप लिंक होना चाहिए जिसके बारे में
name
याshort_name
में बताया गया है. short_name
- (ज़रूरी नहीं) छोटा नाम, जिसका इस्तेमाल तब किया जाता है, जब
name
फ़ील्ड की पूरी वैल्यू दिखाने के लिए ज़रूरत के मुताबिक जगह न हो. description
- (ज़रूरी नहीं) इस शॉर्टकट के काम करने के तरीके के बारे में जानकारी
icons
- (ज़रूरी नहीं)
src
,type
,sizes
, और वैकल्पिकpurpose
फ़ील्ड वाले आइकॉन ऑब्जेक्ट का कलेक्शन. इससे यह पता चलता है कि शॉर्टकट के लिए कौनसी इमेज इस्तेमाल की जानी चाहिए
आपको ऐप्लिकेशन शॉर्टकट को, बेहतरीन तरीके से काम करने की सुविधा के तौर पर इस्तेमाल करना चाहिए. इसका मतलब है कि इन शॉर्टकट के हमेशा दिखने पर भरोसा नहीं किया जा सकता. भले ही, ये दिखें, लेकिन यह नहीं पता कि कितने शॉर्टकट दिखेंगे या प्लैटफ़ॉर्म इन आइकॉन को अनदेखा करेगा या नहीं. यह ब्राउज़र के विवेक पर निर्भर करता है. हर प्लैटफ़ॉर्म के बारे में पूरी जानकारी देना इस लेख का मकसद नहीं है. हालांकि, यहां आपको Android और डेस्कटॉप पर यह सुविधा कैसे काम करती है, इस बारे में जानकारी दी गई है. इस अनिश्चितता से निपटने का सबसे अच्छा तरीका यह है कि आइटम को प्राथमिकता के हिसाब से क्रम में लगाया जाए.
यहां दिए गए कोड सैंपल में, ऐप्लिकेशन के अलग-अलग शॉर्टकट के बारे में बताया गया है. Android पर Chrome या डेस्कटॉप पर 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">
चुनौती यह है कि स्टार्टअप इमेज की विंडो का साइज़ ठीक वैसा ही होना चाहिए जैसा पीडब्ल्यूए खोलने पर होगा. इसलिए, अलग-अलग 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
काम करता है.
अगली इमेज में, बाईं ओर थीम कलर के साथ डिफ़ॉल्ट स्टैंडअलोन डिज़ाइन और दाईं ओर फ़ुलस्क्रीन iOS मोड वाला PWA दिख रहा है. इस मोड की मदद से, स्टेटस बार के पीछे कॉन्टेंट रेंडर किया जा सकता है.
अगर आपने अपने एचटीएमएल में यह टैग जोड़ा है, तो iOS और iPadOS पर आपका PWA फ़ुल-स्क्रीन मोड में चलेगा. हालांकि, यह Android से अलग है.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
इस मोड में, डिवाइस का स्टेटस बार (सबसे ऊपर, जहां आपको घड़ी, बैटरी लेवल, और सूचना आइकॉन दिखते हैं) अब भी दिखता है. हालांकि, इसे आपके कॉन्टेंट के ऊपर, पारदर्शी बैकग्राउंड के साथ रेंडर किया जाता है.
इस मोड का इस्तेमाल करते समय, अपने डिज़ाइन को ध्यान से बनाएं. ऐसा इसलिए, क्योंकि ऑपरेटिंग सिस्टम हमेशा आइकॉन को सफ़ेद रंग में रेंडर करेगा. इसलिए, आपको स्क्रीन के सबसे ऊपर मौजूद बैकग्राउंड को हमेशा हल्के रंग के कॉन्टेंट के साथ कंट्रास्ट करना चाहिए. साथ ही, सेफ़ एरिया में कॉन्टेंट रेंडर करने के लिए, सीएसएस एनवायरमेंट वैरिएबल का इस्तेमाल करना ज़रूरी है. इस बारे में ऐप्लिकेशन डिज़ाइन चैप्टर में बताया गया है.
इंस्टॉलेशन की विश्वसनीयता
iOS और iPadOS 15.4 से पहले के वर्शन पर, मेनिफ़ेस्ट फ़ाइल सिर्फ़ तब नेटवर्क से लोड होती है, जब उपयोगकर्ता ब्राउज़र में शेयर आइकॉन का इस्तेमाल करके शेयर शीट खोलता है. यह पेज लोड होने पर नहीं लोड होती. इसलिए, ब्राउज़र तब तक यह जांच नहीं करता कि आपकी वेबसाइट PWA है या नहीं. इस वजह से, ऐसा हो सकता है कि मेनिफ़ेस्ट लोड न हो पाए या इसमें बहुत ज़्यादा समय लगे और ब्राउज़र उसे अनदेखा कर दे.
जब ब्राउज़र, मेनिफ़ेस्ट को समय पर लोड नहीं कर पाता, तब "होम स्क्रीन पर जोड़ें" दबाने पर, होम स्क्रीन पर एक आइकॉन दिखता है. हालांकि, यह ऐप्लिकेशन जैसा अनुभव नहीं देता. यह सिर्फ़ ब्राउज़र टैब का शॉर्टकट होता है.