बेहतर बनाएं

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

ऐप शॉर्टकट

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

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

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

इस मेन्यू को ऐक्सेस करने के लिए, उपयोगकर्ताओं को 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">

चुनौती यह है कि स्टार्टअप इमेज की विंडो का साइज़ ठीक वैसा ही होना चाहिए जैसा पीडब्ल्यूए खोलने पर होगा. इसलिए, अलग-अलग 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> एलिमेंट वाला एचटीएमएल कोड देता है. ऐसे ही टूल का एक उदाहरण पीडब्ल्यूए ऐसेट जनरेटर है.
  • क्लाइंट-साइड जनरेटर, एक ऐसा JavaScript टूल है जो मौजूदा डिवाइस के टाइप और स्क्रीन के साइज़ के आधार पर, स्टार्टअप इमेज के एक या उससे ज़्यादा base64 वर्शन को <link> इंजेक्ट किए गए एलिमेंट में एम्बेड कर सकता है. आपके पास इन-मेमोरी कैनवस का इस्तेमाल करके, इमेज को रेंडर करने और उसे PNG फ़ाइल के साथ data: यूआरआई में बदलने का विकल्प होता है. PWA कॉम्पट लाइब्रेरी, एक क्लाइंट-साइड लाइब्रेरी है जो इस्तेमाल करने में आसान होती है. इसका इस्तेमाल, Android की सामान्य लॉन्च स्क्रीन की क्लोनिंग करके किया जाता है.

Apple के मोबाइल प्लैटफ़ॉर्म पर PWA का पता लगाना

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

उपयोगकर्ता एजेंट की स्ट्रिंग को पढ़ने से बचने के लिए, navigator ऑब्जेक्ट की standalone प्रॉपर्टी की जांच करें. यह एक नॉन-स्टैंडर्ड प्रॉपर्टी है. इसे सिर्फ़ iOS और iPadOS के WebKit इंजन पर उपलब्ध कराया जाता है.

  • अगर navigator.standalone की वैल्यू undefined है, तो इसका मतलब है कि उपयोगकर्ता के पास iPadOS या iOS डिवाइस नहीं है.
  • अगर navigator.standalone की वैल्यू false है, तो इसका मतलब है कि उपयोगकर्ता ने ब्राउज़र में PWA खोला है और वहां उसका इस्तेमाल कर रहा है.
  • अगर navigator.standalone की वैल्यू true है, तो इसका मतलब है कि उपयोगकर्ता ने होम स्क्रीन से PWA खोला है और उसे अलग से पीडब्ल्यूए का इस्तेमाल किया जा रहा है.

फ़ुलस्क्रीन की सुविधा है

iOS और iPad पर Safari पर, आपके PWA के आइकॉन के डिसप्ले मोड के तौर पर सिर्फ़ display: standalone काम करता है. display: fullscreen, Android डिवाइसों पर काम नहीं करता. हालांकि, PWA को फ़ुलस्क्रीन मोड में चालू करने के लिए, नॉन-स्टैंडर्ड मेटा-टैग का इस्तेमाल किया जा सकता है.

अगली इमेज में, बाईं ओर थीम के रंग के साथ डिफ़ॉल्ट स्टैंडअलोन डिज़ाइन और दाईं ओर, iOS मोड के साथ फ़ुलस्क्रीन मोड का PWA दिख सकता है जिसकी मदद से, स्टेटस बार के पीछे कॉन्टेंट रेंडर किया जा सकता है.

स्टैंडअलोन डिफ़ॉल्ट बिहेवियर (बाएं) और फ़ुलस्क्रीन iOS स्क्रीन (दाएं).

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

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

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

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

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

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

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

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

संसाधन