PWACompat - सभी ब्राउज़र के लिए वेब ऐप्लिकेशन मेनिफ़ेस्ट

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

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

PWACompat, वेब ऐप्लिकेशन मेनिफ़ेस्ट लेता है और स्टैंडर्ड और नॉन-स्टैंडर्ड मेटा, लिंक वगैरह टैग जोड़ता है.
PWACompat, वेब ऐप्लिकेशन मेनिफ़ेस्ट फ़ाइल लेता है और स्टैंडर्ड और नॉन-स्टैंडर्ड मेटा, लिंक वगैरह टैग जोड़ता है.

इसका मतलब है कि अब आपको अपने पेजों में अनगिनत, स्टैंडर्ड और बिना स्टैंडर्ड वाले टैग (जैसे, <link rel="icon" ... /> या <meta name="orientation" ... />) जोड़ने की ज़रूरत नहीं है. साथ ही, iOS होम स्क्रीन ऐप्लिकेशन के लिए, PWACompat डाइनैमिक रूप से भी स्प्लैश स्क्रीन बनाएगा, ताकि आपको हर साइज़ वाली स्क्रीन के लिए स्क्रीन जनरेट करने की ज़रूरत न पड़े.

इमोजी टाइपर के लिए, iOS की स्प्लैश स्क्रीन, PWACompat की मदद से जनरेट की गई

PWACompat का इस्तेमाल करना

PWACompat का इस्तेमाल करने के लिए, अपने सभी पेजों पर वेब ऐप्लिकेशन के मेनिफ़ेस्ट को लिंक करना न भूलें:

<link rel="manifest" href="manifest.webmanifest" />

इसके बाद, या तो यह स्क्रिप्ट शामिल करें या एसिंक्रोनस लोड किए गए बंडल में इसे जोड़ें:

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

PWACompat आपकी मेनिफ़ेस्ट फ़ाइल फ़ेच करेगा और आपके उपयोगकर्ता के ब्राउज़र के लिए ज़रूरी काम करेगा. इससे कोई फ़र्क़ नहीं पड़ता कि उपयोगकर्ता, मोबाइल डिवाइस का इस्तेमाल कर रहा है या डेस्कटॉप.

हमारा सुझाव है कि खोज इंडेक्स करने के लिए, अच्छी क्वालिटी वाला कम से कम एक शॉर्टकट आइकॉन जोड़ें:

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

ज़्यादा जानकारी के लिए, सबसे सही तरीके देखें.

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

ज़्यादा जानकारी वाली

इसके साथ काम करने वाले ब्राउज़र के लिए, PWACompat क्या करता है? PWACompat आपके वेब ऐप्लिकेशन मेनिफ़ेस्ट को लोड करेगा और:

  • मेनिफ़ेस्ट में सभी आइकॉन के लिए मेटा आइकॉन टैग बनाएं (उदाहरण के लिए, फ़ेविकॉन, पुराने ब्राउज़र के लिए)
  • अलग-अलग ब्राउज़र (जैसे कि iOS, WebKit/Chromium fork वगैरह) के लिए फ़ॉलबैक मेटा टैग बनाएं. साथ ही, यह बताएं कि किसी वेब ऐप्लिकेशन को कैसे खोलना चाहिए
  • मेनिफ़ेस्ट के आधार पर थीम का रंग सेट करता है

Safari के लिए, PWACompat के लिए भी:

  • डिसप्ले मोड standalone, fullscreen या minimal-ui के लिए, apple-mobile-web-app-capable को (ब्राउज़र chrome के बिना खोलने) के लिए सेट करता है
  • apple-touch-icon इमेज बनाता है और मेनिफ़ेस्ट बैकग्राउंड को पारदर्शी आइकॉन में जोड़ता है: नहीं तो, iOS, पारदर्शिता को काले रंग के तौर पर रेंडर करता है
  • यह Chromium-आधारित ब्राउज़र के लिए जनरेट की गई स्प्लैश इमेज से मिलती-जुलती डाइनैमिक स्प्लैश इमेज बनाता है

अगर आपको ब्राउज़र के बारे में ज़्यादा सहायता चाहिए या ज़्यादा योगदान देना है, तो PWACompat, GitHub पर है.

इसे आज़माएं

PWACompat, Airborner, v8.dev, और Emojityper पर लाइव है. आपकी साइटों के हेडर का एचटीएमएल आसान हो सकता है: इसके लिए, मेनिफ़ेस्ट की जानकारी दें और बाकी काम PWACompat को मैनेज करने दें.

📢🤣🎉