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

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 इवेंट को null पर सेट करें.
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. ऐनलिटिक्स या अन्य सिस्टम में, इंस्टॉल इवेंट को लॉग करें.

कोड:

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

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

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

यहां कुछ और कार्रवाइयां दी गई हैं, जिन्हें किया जा सकता है:

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