नए एचटीएमएल इंस्टॉल एलिमेंट की मदद से वेब ऐप्लिकेशन इंस्टॉल करना

Patrick Brosset

पब्लिश होने की तारीख: 12 मई, 2026

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

Microsoft Edge की टीम ने Chrome की टीम के साथ मिलकर, Chromium में <install> एलिमेंट को लागू किया है. अब यह सुविधा, Chrome या Edge के वर्शन 148 में फ़्लैग के तौर पर उपलब्ध है. इसका इस्तेमाल किया जा सकता है. साथ ही, यह ऑरिजिन ट्रायल के तौर पर भी उपलब्ध है. इसका इस्तेमाल, दोनों ब्राउज़र में वर्शन 148 से लेकर 153 तक किया जा सकता है.

इसे आज़माएं और जानें कि यह वेब इंस्टॉल एपीआई (navigator.install()) से कितना अलग है. इस एपीआई का अपना ऑरिजिन ट्रायल है.

समस्या

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

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

<install> एलिमेंट

नए <install> एचटीएमएल एलिमेंट के कॉन्टेंट और प्रज़ेंटेशन को ब्राउज़र कंट्रोल करता है. <geolocation> जैसे अन्य अनुमति एलिमेंट की तरह ही, बटन के लेबल टेक्स्ट, भाषा, और दिखने के तरीके पर ब्राउज़र का कंट्रोल होता है. इसका मतलब है कि वह उपयोगकर्ता के क्लिक को, इरादे के असली सिग्नल के तौर पर भरोसा कर सकता है.

"Wonderful ऐप्लिकेशन इंस्टॉल करें" लेबल वाले बटन पर क्लिक करने वाले व्यक्ति को, इंस्टॉल करने का प्रॉम्प्ट दिखने पर शायद हैरानी न हो.

ब्राउज़र बटन को रेंडर करता है. इसलिए, आपको कम से कम कोड के साथ भरोसेमंद इंस्टॉल की सुविधा मिलती है. साथ ही, JavaScript में beforeinstallprompt सेरेमनी को व्यवस्थित करने की ज़रूरत नहीं होती.

मौजूदा ऐप्लिकेशन इंस्टॉल करना

अगर मौजूदा पेज, ऐसे मेनिफ़ेस्ट से लिंक है जिसमें id फ़ील्ड है, तो आपको सिर्फ़ एक एलिमेंट की ज़रूरत होगी:

<install></install>

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

कोई दूसरा ऐप्लिकेशन इंस्टॉल करें

अगर आपको किसी ऐसे वेब ऐप्लिकेशन को इंस्टॉल करना है जो मौजूदा पेज से अलग ऑरिजिन पर है, तो installurl एट्रिब्यूट का इस्तेमाल करके, दूसरे वेब ऐप्लिकेशन पर जाएं:

<install installurl="https://awesome-app.com/"></install>

अगर https://awesome-app.com पर मौजूद पेज, ऐसे मेनिफ़ेस्ट से लिंक होता है जिसमें id फ़ील्ड तय किया गया है, तो आपको कुछ और करने की ज़रूरत नहीं है.

अगर कोई id फ़ील्ड मौजूद नहीं है, तो manifestid एट्रिब्यूट का इस्तेमाल करके, कैलकुलेट किया गया मेनिफ़ेस्ट id उपलब्ध कराएं:

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

कंप्यूट किया गया मेनिफ़ेस्ट id पाने के लिए:

1. DevTools खोलें.
2. ऐप्लिकेशन टैब पर जाएं.
3. पहचान सेक्शन में जाकर, कैलकुलेट किया गया ऐप्लिकेशन आईडी की वैल्यू कॉपी करें.

<install> बटन का इस्तेमाल करके, किसी दूसरे ऑरिजिन के ऐप्लिकेशन इंस्टॉल करने का मतलब है कि आपके पास ऐसा कैटलॉग पेज बनाने का विकल्प होता है जिस पर जाकर लोग एक साथ कई ऐप्लिकेशन इंस्टॉल कर सकते हैं. हर ऐप्लिकेशन के लिए, अलग <install> बटन होगा.

फ़ॉलबैक कॉन्टेंट उपलब्ध कराना

अगर ब्राउज़र पर <install> एलिमेंट काम नहीं करता है, तो एलिमेंट के अंदर डाला गया एचटीएमएल दिखेगा:

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

सहायता का पता लगाना

अगर फ़ॉलबैक कॉन्टेंट आपके इस्तेमाल के लिए काफ़ी नहीं है और आपको उन ब्राउज़र पर अलग उपयोगकर्ता अनुभव लागू करना है जिन पर <install> एलिमेंट काम नहीं करता है, तो JavaScript का इस्तेमाल करके यह पता लगाएं कि <install> एलिमेंट काम करता है या नहीं:

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

इवेंट हैंडल करना

<install> एलिमेंट, इवेंट ट्रिगर करता है. इन इवेंट को सुना जा सकता है. जैसे, सदस्यता लिंक हो जाने, लिंक करने के अनुरोध के खारिज हो जाने, और पुष्टि करने से जुड़ी गड़बड़ियों के इवेंट:

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

इसे आज ही आज़माएँ

<install> एलिमेंट को आज़माने के लिए, आपके पास दो विकल्प हैं:

• सिर्फ़ अपने डिवाइस पर एलिमेंट की जांच करें.
• ऑरिजिन ट्रायल के लिए रजिस्टर करके, असली स्थितियों में उपयोगकर्ताओं के साथ एलिमेंट को टेस्ट करें.

लोकल तौर पर टेस्ट करना

आज ही अपने डिवाइस पर एलिमेंट को आज़माने के लिए:

1. Chrome या Edge के वर्शन 148 या इसके बाद के वर्शन का इस्तेमाल करें.
2. नए टैब में about://flags/#web-app-install-element पर जाएं.
3. वेब ऐप्लिकेशन इंस्टॉल करने का एलिमेंट को चालू है पर सेट करें.
4. ब्राउज़र को रीस्टार्ट करें.

ऑरिजिन ट्रायल का इस्तेमाल करके, अपनी लाइव साइट पर टेस्ट करना

ऑरिजिन ट्रायल की मदद से, आपकी प्रोडक्शन साइट पर मौजूद असली उपयोगकर्ता, इस सुविधा का इस्तेमाल कर सकते हैं. इसके लिए, उन्हें पहले फ़्लैग चालू करने की ज़रूरत नहीं होती.

1. <install> एलिमेंट का ओरिजनल ट्रायल रजिस्ट्रेशन पेज खोलें.
2. साइन इन करें.
3. रजिस्टर करें पर क्लिक करें.
4. अपनी साइट का ऑरिजिन डालें और बाकी का फ़ॉर्म भरें.
5. फ़ॉर्म सबमिट करने के बाद, आपको एक टोकन स्ट्रिंग मिलती है.
6. <meta> टैग का इस्तेमाल करके, अपनी साइट के पेजों में टोकन जोड़ें:

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

इसके अलावा, टोकन को एचटीटीपी रिस्पॉन्स हेडर के तौर पर भी भेजा जा सकता है:

Origin-Trial: YOUR_TOKEN_HERE

यह ओरिजिन ट्रायल, Chrome और Edge, दोनों के लिए उपलब्ध है. इसके लिए, वर्शन 148 से 153 तक का इस्तेमाल किया जा सकता है. साथ ही, एक ही टोकन दोनों ब्राउज़र में काम करेगा. ऑरिजिन ट्रायल के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें:

• Chrome के लिए, ऑरिजिन ट्रायल का इस्तेमाल शुरू करें.
• Edge के लिए, ऑरिजिन ट्रायल का इस्तेमाल करके, एक्सपेरिमेंट के तौर पर उपलब्ध एपीआई और सुविधाओं को टेस्ट करें.

इसे चलाकर देखें

<install> एलिमेंट स्टोर डेमो देखें. यह एक PWA कैटलॉग है, जिसमें <install> एलिमेंट का इस्तेमाल किया जाता है. इससे आपको कई सैंपल ऐप्लिकेशन इंस्टॉल करने की सुविधा मिलती है.

वेब इंस्टॉल एपीआई से तुलना

हम वेब पर ऐप्लिकेशन इंस्टॉल करने की प्रोसेस को बेहतर बनाने के लिए, सिर्फ़ <install> एलिमेंट का इस्तेमाल नहीं कर रहे हैं.

इससे पहले, हमने वेब इंस्टॉल एपीआई (navigator.install()) का इस्तेमाल किया था. यह एक ज़रूरी JavaScript एपीआई है. इसकी मदद से, आपकी साइट एक ही ऑरिजिन या अलग-अलग ऑरिजिन वाले वेब ऐप्लिकेशन को इंस्टॉल करने की सुविधा को ट्रिगर कर सकती है. ज़्यादा जानने के लिए, Web Install API की टेस्टिंग की जा सकती है लेख पढ़ें.

Web Install API का अपना ऑरिजिन ट्रायल भी होता है.

यहां दोनों तरीकों की तुलना की गई है:

हमें आपकी राय का इंतज़ार है

हम इन दोनों तरीकों के बारे में लोगों से सुझाव/राय ले रहे हैं. आपकी ज़रूरतों के हिसाब से, हम <install> एलिमेंट या navigator.install() एपीआई या दोनों के लिए सहायता जोड़ सकते हैं.

<install> एलिमेंट के बारे में सुझाव/राय देने या शिकायत करने के लिए, इस प्रस्ताव के लिए WICG repo पर कोई समस्या खोलें.

navigator.install() API के बारे में सुझाव/राय देने या शिकायत करने के लिए, Developer Feedback: navigator.install versus <install> element समस्या में कोई टिप्पणी जोड़ें.

संसाधन

• ज़्यादा जानकारी: <install> एलिमेंट
• डेमो: <install> एलिमेंट स्टोर
• इस्तेमाल करने के निर्देश और डेमो सोर्स
• Chrome Platform Status एंट्री
• Web Install API की टेस्टिंग की जा सकती है (Edge का ब्लॉग)
• Web Install API के बारे में जानकारी