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

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

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

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

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

app.webmanifest:

{
   "name": "My First Application"
}

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

आपके मेनिफ़ेस्ट से लिंक किया जा रहा है

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

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

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

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

आइकॉन

इंस्टॉल किए जाने पर आपके सभी उपयोगकर्ताओं के डिवाइसों पर, 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 विंडो के बजाय, इन-ऐप्लिकेशन ब्राउज़र में रेंडर होगा. हालांकि, इससे आपके सर्विस वर्कर का दायरा नहीं बदलेगा.

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

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

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

Try it

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

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

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

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

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

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

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

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

रिसॉर्स