इस ग्लिच में वेब मेनिफ़ेस्ट शामिल है, जिसमें ज़रूरी फ़ील्ड शामिल हैं, ताकि वेब ऐप्लिकेशन को इंस्टॉल किया जा सके बनाया जा सके.
इसमें 'इंस्टॉल करें' बटन भी होता है, जो डिफ़ॉल्ट रूप से छिपा होता है.
beforeinstallprompt इवेंट को सुनें
जब ब्राउज़र beforeinstallprompt इवेंट को फ़ायर करता है, तो इससे पता चलता है कि वेब ऐप्लिकेशन को इंस्टॉल किया जा सकता है और उपयोगकर्ता को 'इंस्टॉल करें' बटन दिखाया जा सकता है. beforeinstallprompt इवेंट तब ट्रिगर होता है, जब ऐप्लिकेशन इंस्टॉल करने की ज़रूरी शर्तों को पूरा करता है.
इवेंट को कैप्चर करने से डेवलपर, इंस्टॉलेशन को पसंद के मुताबिक बना सकते हैं. साथ ही, उपयोगकर्ता को उस समय इंस्टॉल करने का निर्देश दे सकते हैं जब उन्हें लगता है कि यह सबसे अच्छा समय है.
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
windowऑब्जेक्ट में,beforeinstallpromptइवेंट हैंडलर जोड़ें.eventको ग्लोबल वैरिएबल के तौर पर सेव करें; हमें बाद में प्रॉम्प्ट दिखाने के लिए इसकी ज़रूरत होगी.- 'इंस्टॉल करें' बटन दिखाएं.
कोड:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
'इंस्टॉल करें' बटन पर होने वाले क्लिक को हैंडल करें
इंस्टॉल करने की सूचना दिखाने के लिए, सेव किए गए beforeinstallprompt इवेंट पर prompt() को कॉल करें. prompt() को कॉल करने की प्रोसेस, 'इंस्टॉल करें' बटन क्लिक हैंडलर में की जाती है, क्योंकि
prompt() को उपयोगकर्ता के जेस्चर से कॉल करना ज़रूरी है.
- 'इंस्टॉल करें' बटन के लिए, क्लिक इवेंट हैंडलर जोड़ें.
- सेव किए गए
beforeinstallpromptइवेंट के दौरानprompt()को कॉल करें. - प्रॉम्प्ट के नतीजे लॉग करें.
- सेव किए गए
beforeinstallpromptइवेंट को शून्य पर सेट करें. - 'इंस्टॉल करें' बटन छिपाएं.
कोड:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
इंस्टॉल इवेंट को ट्रैक करें
'इंस्टॉल करें' बटन से वेब ऐप्लिकेशन इंस्टॉल करने से, लोगों को इसे इंस्टॉल करने का सिर्फ़ एक तरीका मिलता है. वे Chrome के मेन्यू, मिनी-इन्फ़ोबार, और खोज वाली पट्टी में मौजूद आइकॉन की मदद से भी इस्तेमाल कर सकते हैं. appinstalled इवेंट को सुनकर, इंस्टॉल करने के इन सभी तरीकों को ट्रैक किया जा सकता है.
windowऑब्जेक्ट में,appinstalledइवेंट हैंडलर जोड़ें.- इंस्टॉल इवेंट को आंकड़ों या अन्य तरीकों में लॉग करें.
कोड:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
इसके बारे में और पढ़ें
बधाई हो, आपका ऐप्लिकेशन अब इंस्टॉल किया जा सकता है!
यहां कुछ अतिरिक्त चीज़ें दी गई हैं, जो आप कर सकते हैं: