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

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

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

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

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

app.webmanifest:

{
   "name": "My First Application"
}

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

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

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

index.html:

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

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

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

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

DevTools में

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

Firefox के लिए

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

PWA का बेहतर अनुभव डिज़ाइन करना

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

बुनियादी फ़ील्ड

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

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

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

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

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 एक मुफ़्त ऑनलाइन टूल है. इसकी मदद से, अपने आइकॉन का मास्क किया जा सकता है और उसकी जांच की जा सकती है.

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

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

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

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

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

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

इसे आज़माएं

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

कुछ डिवाइसों पर, आपके PWA के लोड होने के दौरान स्टैटिक इमेज रेंडर की जाती है, ताकि उपयोगकर्ता को तुरंत सुझाव/राय दी जा सके.

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

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

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

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

एक्सटेंड किए गए फ़ील्ड

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

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

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

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

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

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

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

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

सुविधाओं के फ़ील्ड

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

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

संसाधन