बेहतर बनाएं

ऐसे कई बेहतर तरीके हैं जिनसे आपके PWA के कन्वर्ज़न और इस्तेमाल को बेहतर बनाया जा सकता है.

ऐप शॉर्टकट

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

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

Android और macOS में ऐप्लिकेशन शॉर्टकट.

इस मेन्यू को ऐक्सेस करने के लिए, उपयोगकर्ताओं को 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 की फ़ुलस्क्रीन स्क्रीन (दाईं ओर).

अगर आपने अपने एचटीएमएल में यह टैग जोड़ा है, तो iOS और iPadOS पर आपका PWA फ़ुल-स्क्रीन मोड में चलेगा. हालांकि, यह Android से अलग है.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

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

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

आपके व्यूपोर्ट का शीर्ष 0px डिफ़ॉल्ट रूप से स्थिति बार के नीचे होता है; अगर आप काला-पारदर्शी मेटा टैग जोड़ते हैं, तो आपके व्यूपोर्ट का शीर्ष 0px स्क्रीन के भौतिक ऊपरी भाग से मेल खाएगा

इंस्टॉलेशन की विश्वसनीयता

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

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

संसाधन