आपने एक वेब ऐप्लिकेशन डिज़ाइन किया है, उसका कोड और सेवा वर्कर लिखा है, और आखिर में वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ा है, ताकि यह बताया जा सके कि उपयोगकर्ता के डिवाइस पर 'इंस्टॉल' होने पर, यह कैसे काम करना चाहिए. इसमें हाई रिज़ॉल्यूशन वाले आइकॉन शामिल हैं, जैसे कि एक मोबाइल फ़ोन के लॉन्चर या ऐप्लिकेशन स्विचर का या आपके मोबाइल फ़ोन के वेब ऐप्लिकेशन को उपयोगकर्ता की होम स्क्रीन पर.
कई ब्राउज़र, वेब ऐप्लिकेशन मेनिफ़ेस्ट के हिसाब से काम करेंगे, लेकिन यह ज़रूरी नहीं है कि हर ब्राउज़र
को जोड़ा भी जा सकता है. PWACompat डालें,
ऐसी लाइब्रेरी जो आपके वेब ऐप्लिकेशन मेनिफ़ेस्ट को लेकर, काम के meta या link टैग अपने-आप शामिल करती है
जैसे अलग-अलग साइज़ के आइकॉन, फ़ेविकॉन, स्टार्टअप मोड, रंग वगैरह के लिए.
इसका मतलब है कि अब आपको असंख्य, मानक और गैर-मानक टैग (जैसे
<link rel="icon" ... /> या <meta name="orientation" ... />). 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 फ़ोर्क वगैरह) के लिए फ़ॉलबैक मेटा टैग बनाएं और इनके बारे में जानकारी दें वेब ऐप्लिकेशन कैसे खुलना चाहिए
- मेनिफ़ेस्ट के आधार पर थीम का रंग सेट करता है
Safari के लिए, PWACompat ये काम भी करता है:
- डिसप्ले मोड
standalone,fullscreenयाminimal-uiके लिएapple-mobile-web-app-capable(Chrome ब्राउज़र के बिना खोलना) सेट करता है - यह नीति
apple-touch-iconइमेज बनाती है और पारदर्शी आइकॉन में मेनिफ़ेस्ट बैकग्राउंड जोड़ती है: अगर ऐसा नहीं होता है, तो iOS पारदर्शिता को काले रंग के - डाइनैमिक स्प्लैश इमेज बनाता है, जो Chromium पर आधारित ब्राउज़र के लिए जनरेट की गई स्प्लैश इमेज से काफ़ी मिलती-जुलती होती हैं
अगर आपको ब्राउज़र से जुड़ी अतिरिक्त सहायता के लिए, ज़्यादा योगदान देना है या मदद करनी है, तो PWACompat, GitHub पर है.
इसे आज़माएं
PWACompat की सुविधा, Airहॉर्न, v8.dev, और इमोजी टाइपर. आपकी साइटों का हेडर एचटीएमएल आसान हो सकता है: सिर्फ़ मेनिफ़ेस्ट तय करें और बाकी का काम PWACompat को करने दें.
📢🤣🎉