वेब ऐप्लिकेशन मेनिफ़ेस्ट

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

हर ऐप्लिकेशन के लिए, हर PWA में एक मेनिफ़ेस्ट होना चाहिए, जो आम तौर पर रूट फ़ोल्डर में होस्ट किया जाता है. साथ ही, उन सभी एचटीएमएल पेजों से लिंक होना चाहिए जिनसे आपका पीडब्ल्यूए इंस्टॉल किया जा सकता है. इसका आधिकारिक एक्सटेंशन .webmanifest है, इसलिए अपने मेनिफ़ेस्ट का नाम app.webmanifest जैसा कुछ रखा जा सकता है.

अपने PWA में वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ना

वेब ऐप्लिकेशन मेनिफ़ेस्ट बनाने के लिए, सबसे पहले JSON ऑब्जेक्ट से एक टेक्स्ट फ़ाइल बनाएं. इसमें स्ट्रिंग वैल्यू वाली कम से कम एक name फ़ील्ड हो:

app.webmanifest:

{
   "name": "My First Application"
}

लेकिन फ़ाइल बनाना ही काफ़ी नहीं है, ब्राउज़र को यह जानने की भी ज़रूरत है कि वह मौजूद है.

अपने मेनिफ़ेस्ट से लिंक करना

ब्राउज़र को अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट के बारे में बताने के लिए, आपको इसे अपने PWA से लिंक करना होगा. ऐसा करने के लिए, आपको अपने PWA के सभी एचटीएमएल पेजों पर, <link> एचटीएमएल एलिमेंट का इस्तेमाल करके, rel एट्रिब्यूट को manifest पर सेट करना होगा. यह सीएसएस स्टाइलशीट को किसी दस्तावेज़ से लिंक करने के तरीके जैसा ही है.

index.html:

<html lang="en">
  <title>This is my first PWA</title>
  <link rel="manifest" href="/app.webmanifest">

मेनिफ़ेस्ट को डीबग करना

यह पक्का करने के लिए कि मेनिफ़ेस्ट को सही तरीके से सेट अप किया गया है, आप Firefox में इंस्पेक्टर और Chromium पर आधारित हर ब्राउज़र में DevTools का इस्तेमाल कर सकते हैं.

Chromium ब्राउज़र के लिए

DevTools में

  1. बाएं पैनल में ऐप्लिकेशन में जाकर, मेनिफ़ेस्ट चुनें.
  2. मेनिफ़ेस्ट के फ़ील्ड को ब्राउज़र पर पार्स किए गए फ़ील्ड की जांच करें.

Firefox के लिए

  1. इंस्पेक्टर खोलें.
  2. ऐप्लिकेशन टैब पर जाएं.
  3. बाएं पैनल में, मेनिफ़ेस्ट विकल्प चुनें.
  4. मेनिफ़ेस्ट के फ़ील्ड को ब्राउज़र पर पार्स किए गए फ़ील्ड की जांच करें.

पीडब्ल्यूए इस्तेमाल करने के अनुभव को डिज़ाइन करना

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

बेसिक फ़ील्ड

फ़ील्ड के पहले सेट में आपके पीडब्ल्यूए की मुख्य जानकारी दिखती है. इनका इस्तेमाल, इंस्टॉल किए गए PWA का आइकॉन और विंडो बनाने के लिए किया जाता है. साथ ही, इनसे यह भी तय किया जाता है कि यह कैसे शुरू होगा. ये वजह हैं:

name
आपके PWA का पूरा नाम. यह ऑपरेटिंग सिस्टम की होम स्क्रीन, लॉन्चर, डॉक या मेन्यू में मौजूद आइकॉन के साथ दिखेगा.
short_name
ज़रूरी नहीं है. यह आपके पीडब्ल्यूए का छोटा नाम होता है. इसका इस्तेमाल तब किया जाता है, जब name फ़ील्ड की पूरी वैल्यू दिखाने के लिए ज़रूरी जगह नहीं होती. काट-छांट की संभावना को कम करने के लिए, इसे 12 वर्णों से कम रखें.
icons
src, type, sizes, और वैकल्पिक purpose फ़ील्ड वाले आइकॉन ऑब्जेक्ट की कलेक्शन, जिसमें यह बताया गया है कि किन इमेज को पीडब्ल्यूए को दिखाना चाहिए.
start_url
वह यूआरएल जिसे PWA को तब लोड करना चाहिए, जब उपयोगकर्ता, इंस्टॉल किए गए आइकॉन से उसे शुरू करता है. हमारा सुझाव है कि ऐब्सलूट पाथ का इस्तेमाल करें. इसलिए, अगर आपके PWA का होम पेज आपकी साइट का रूट है, तो इसे '/' पर सेट किया जा सकता है का इस्तेमाल करें. अगर आपने स्टार्ट यूआरएल नहीं दिया है, तो ब्राउज़र उस यूआरएल का इस्तेमाल कर सकता है जिस पर पीडब्ल्यूए को शुरुआत के तौर पर इंस्टॉल किया गया था. यह एक डीप लिंक हो सकता है. जैसे, आपकी होम स्क्रीन के बजाय प्रॉडक्ट की जानकारी.
display
fullscreen, standalone, minimal-ui या browser में से कोई एक, जिसमें बताया गया है कि ओएस को पीडब्ल्यूए विंडो कैसे बनानी चाहिए. अलग-अलग डिसप्ले मोड के बारे में ज़्यादा जानने के लिए, ऐप्लिकेशन डिज़ाइन चैप्टर पढ़ें. ज़्यादातर मामलों में, इस्तेमाल के उदाहरण standalone लागू किए जाते हैं.
id
ऐसी स्ट्रिंग जो एक ही ऑरिजिन पर होस्ट किए गए दूसरे पीडब्ल्यूए की तुलना में, इस पीडब्ल्यूए की खास तौर पर पहचान करती है. अगर यह सेट नहीं है, तो start_url का इस्तेमाल फ़ॉलबैक वैल्यू के तौर पर किया जाएगा. ध्यान रखें कि आने वाले समय में start_url को बदलने पर, हो सकता है कि किसी क्वेरी स्ट्रिंग की वैल्यू को बदलते समय, ब्राउज़र यह पता न लगा पाए कि पीडब्ल्यूए पहले से इंस्टॉल है.

आइकॉन

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

अगर आपको आइकॉन का सिर्फ़ एक साइज़ चुनना है, तो यह 512 x 512 पिक्सल का होना चाहिए. हालांकि, 192 x 192, 384 x 384, और 1024 x 1024 पिक्सल साइज़ वाली इमेज भी शामिल करने का सुझाव दिया जाता है.

"icons": [
   {
      "src": "icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
   },
   {
      "src": "icons/1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
   }
]

अगर कोई आइकॉन नहीं दिया जाता है या आइकॉन सुझाए गए साइज़ में नहीं हैं, तो कुछ प्लैटफ़ॉर्म पर आप इंस्टॉल करने से जुड़ी शर्तें पास नहीं कर पाएंगे. अन्य प्लैटफ़ॉर्म पर, आइकॉन अपने-आप जनरेट होगा. उदाहरण के लिए, पीडब्ल्यूए के स्क्रीनशॉट या सामान्य आइकॉन का इस्तेमाल करके.

मास्क किए जा सकने वाले आइकॉन

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

ऐसा करने के लिए, एक ऐसी स्क्वेयर इमेज फ़ाइल उपलब्ध कराएं जिसका मुख्य आइकॉन “सेफ़ ज़ोन” में हो. इस सर्कल के बीच में आइकॉन की चौड़ाई का 40 प्रतिशत हिस्सा, आइकॉन के बीच में होता है. (नीचे दी गई इमेज देखें.) जिन डिवाइसों पर मास्क किए जा सकने वाले आइकॉन काम करते हैं वे ज़रूरत के हिसाब से आपके आइकॉन को मास्क कर देंगे.

वर्ग आइकन के अंदर 40 प्रतिशत त्रिज्या के मध्य वृत्त के रूप में चिह्नित सुरक्षित क्षेत्र

यहां मास्क वाले ऐसे आइकॉन का उदाहरण दिया गया है जो आम तौर पर इस्तेमाल होने वाले अलग-अलग आकारों में रेंडर किया जाता है:

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

ऐसा आइकॉन जो मास्केबल आइकॉन के लिए सही नहीं है.

इस इमेज को ज़्यादा पैडिंग (जगह) की मदद से इस्तेमाल किया जा सकता है.

ज़्यादा पैडिंग (जगह) वाला आइकॉन, मास्क के लिए सही होता है.

मास्क किए जा सकने वाले आइकॉन का साइज़, कम से कम 512 x 512 होना चाहिए. इसे बनाए जाने के बाद, इसे अपने icons कलेक्शन में जोड़ा जा सकता है. इससे, डिवाइसों पर बेहतर अनुभव मिलेगा:

"icons": [
   {
      "src": "/icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
   },
   {
      "src": "/icons/1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
   },
   {
      "src": "/icons/512-maskable.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
   },
]

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

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

theme_color
ऐप्लिकेशन का डिफ़ॉल्ट रंग, जो कभी-कभी ओएस के साइट के डिसप्ले के तरीके पर असर डालता है. उदाहरण के लिए, डेस्कटॉप पर विंडो और टाइटल बार का रंग या मोबाइल डिवाइसों पर स्टेटस बार का रंग. इस रंग को एचटीएमएल theme-color <meta> एलिमेंट से बदला जा सकता है.
background_color
ऐप्लिकेशन की स्टाइलशीट लोड होने से पहले, उसके बैकग्राउंड में दिखने वाला प्लेसहोल्डर का रंग. फ़िलहाल, iOS और iPadOS पर Safari और ज़्यादातर डेस्कटॉप ब्राउज़र इस फ़ील्ड को अनदेखा करते हैं.
scope
PWA के नेविगेशन स्कोप में बदलाव करता है. इससे, यह तय किया जा सकता है कि इंस्टॉल किए गए ऐप्लिकेशन की विंडो में क्या दिखेगा और क्या नहीं. उदाहरण के लिए, अगर आपने किसी ऐसे पेज को लिंक किया है जो दायरे से बाहर है, तो वह आपकी पीडब्ल्यूए विंडो के बजाय, इन-ऐप्लिकेशन ब्राउज़र में रेंडर होगा. हालांकि, इससे आपके सर्विस वर्कर के दायरे में कोई बदलाव नहीं होगा.

अगली इमेज में दिखाया गया है कि PWA इंस्टॉल करते समय, डेस्कटॉप डिवाइस पर टाइटल बार के लिए theme_color फ़ील्ड का इस्तेमाल कैसे किया जाता है.

किसी अलग थीम रंग के साथ डेस्कटॉप पर इंस्टॉल किया गया एक ही PWA.

मेनिफ़ेस्ट में रंग तय करते समय, जैसे कि theme_color और background_color में, आपको सीएसएस नाम वाले कलर, जैसे कि salmon या orange, आरजीबी कलर, जैसे कि #FF5500 या कलर फ़ंक्शन का इस्तेमाल बिना पारदर्शिता के करना चाहिए, जैसे कि rgb() या hsl(). ज़्यादा जानकारी के लिए, ऐप्लिकेशन का डिज़ाइन चैप्टर देखें.

इसे आज़माएं

स्प्लैश स्क्रीन

कुछ डिवाइसों पर, आपका पीडब्ल्यूए लोड होते समय एक स्टैटिक इमेज रेंडर होती है, ताकि उपयोगकर्ता को तुरंत सुझाव मिल सके.

स्प्लैश स्क्रीन जनरेट करने के लिए Android, theme_color, background_color, और icon वैल्यू का इस्तेमाल करता है.

Android पर PWA इंस्टॉल करने पर, डिवाइस एक स्प्लैश स्क्रीन जनरेट करेगा. इसमें, आपकी मेनिफ़ेस्ट फ़ाइल से मिली जानकारी को इस डायग्राम में दिखाया गया है.

Android की स्प्लैश स्क्रीन पर मौजूद PWA, मेनिफ़ेस्ट से अलग-अलग वैल्यू ले रहा है.

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

विस्तारित फ़ील्ड

फ़ील्ड के अगले सेट में, आपके पीडब्ल्यूए के बारे में ज़्यादा जानकारी मिलती है. ये सभी विकल्प ज़रूरी नहीं हैं.

lang
मेनिफ़ेस्ट की वैल्यू की मुख्य भाषा के बारे में बताने वाला भाषा टैग, जैसे कि अंग्रेज़ी के लिए en, ब्राज़ीलियन पॉर्चुगीज़ के लिए pt-BR या हिन्दी के लिए in.
dir
दिशा-निर्देश देने लायक मेनिफ़ेस्ट फ़ील्ड (जैसे कि name, short_name, और description) दिखाने की दिशा. मान्य वैल्यू auto, ltr (बाएं से दाएं), और rtl (दाएं से बाएं) हैं.
orientation
ऐप्लिकेशन इंस्टॉल होने के बाद, ऐप्लिकेशन के लिए उनका पसंदीदा ओरिएंटेशन. कोई गेम इसे सिर्फ़-लैंडस्केप ओरिएंटेशन का अनुरोध करने के लिए सेट कर सकता है. कई वैल्यू स्वीकार की जाती हैं. अगर शामिल किया जाता है, तो आम तौर पर portrait या landscape साफ़ तौर पर दी जाती है.

प्रमोशन वाले फ़ील्ड

फ़ील्ड के चौथे सेट की मदद से, अपने PWA के बारे में प्रमोशन से जुड़ी जानकारी दी जा सकती है. उदाहरण के लिए, इंस्टॉल फ़्लो, लिस्टिंग, और खोज के नतीजों में.

description
इस बात की जानकारी कि पीडब्ल्यूए क्या करता है.
screenshots
पीडब्ल्यूए को दिखाने के लिए, src, type, और sizes (icons ऑब्जेक्ट से मिलता-जुलता) वाले स्क्रीनशॉट ऑब्जेक्ट की कलेक्शन. साइज़ की कोई पाबंदी नहीं है.
categories
ऐसी कैटगरी की कैटगरी जिनका इस्तेमाल PWA को लिस्टिंग के लिए, संकेत के तौर पर किया जाना चाहिए. इसका इस्तेमाल जानी-पहचानी कैटगरी की सूची से भी किया जा सकता है. आम तौर पर, ये वैल्यू अंग्रेज़ी के छोटे अक्षरों में होती हैं.
iarc_rating_id
अगर आपके पास पीडब्ल्यूए के लिए इंटरनैशनल एज रेटिंग कोअलिशन सर्टिफ़िकेशन कोड है. इसका इस्तेमाल यह तय करने के लिए किया जाना चाहिए कि आपका PWA किन उम्र के लोगों के लिए सही है.

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

Android पर प्रमोशनल फ़ील्ड की वैल्यू देने पर, आपको बेहतर इंस्टॉलेशन यूज़र इंटरफ़ेस (यूआई) मिल सकता है, जैसा कि अगले वीडियो में देखा जा सकता है

इन प्रचार फ़ील्ड को काम करते देखें:

क्षमताओं वाले फ़ील्ड

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

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

संसाधन