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

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

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

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

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

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

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() का इस्तेमाल करना चाहिए. ज़्यादा जानकारी के लिए, ऐप्लिकेशन डिज़ाइन वाला चैप्टर देखें.

इसे आज़माएं

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

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

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

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

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

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

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

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

संसाधन