इसे इंस्टॉल करने लायक बनाएं

Pete LePage

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

इसमें इंस्टॉल करने का बटन भी होता है, जो डिफ़ॉल्ट रूप से छिपा होता है.

beforeinstallprompt इवेंट के लिए सुनना

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

इवेंट कैप्चर करने से, डेवलपर इंस्टॉलेशन को पसंद के मुताबिक बना सकते हैं. साथ ही, वे उपयोगकर्ता को इंस्टॉल करने के लिए, सही समय पर सूचना दे सकते हैं.

1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
2. window ऑब्जेक्ट में beforeinstallprompt इवेंट हैंडलर जोड़ें.
3. event को ग्लोबल वैरिएबल के तौर पर सेव करें. प्रॉम्प्ट दिखाने के लिए, हमें बाद में इसकी ज़रूरत होगी.
4. इंस्टॉल बटन को अनलॉक करें.

कोड:

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() को उपयोगकर्ता के जेस्चर से कॉल किया जाना चाहिए.

1. इंस्टॉल बटन के लिए क्लिक इवेंट हैंडलर जोड़ें.
2. सेव किए गए beforeinstallprompt इवेंट पर prompt() को कॉल करें.
3. प्रॉम्प्ट के नतीजों को लॉग करें.
4. सेव किए गए beforeinstallprompt इवेंट को शून्य पर सेट करें.
5. 'इंस्टॉल करें' बटन छिपाएं.

कोड:

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 इवेंट को सुनकर, इंस्टॉलेशन के इन सभी तरीकों को ट्रैक किया जा सकता है.

1. window ऑब्जेक्ट में कोई appinstalled इवेंट हैंडलर जोड़ें.
2. Analytics या किसी अन्य तरीके से इंस्टॉल इवेंट को लॉग करें.

कोड:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

इसके बारे में और पढ़ें

बधाई हो, आपका ऐप्लिकेशन अब इंस्टॉल किया जा सकता है!

यहां कुछ और काम बताए गए हैं:

• यह पता लगाना कि आपका ऐप्लिकेशन होम स्क्रीन से लॉन्च किया गया है या नहीं
• इसके बजाय, ऑपरेटिंग सिस्टम का ऐप्लिकेशन इंस्टॉल करने का अनुरोध दिखाएं