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

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;
});

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

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

यहां कुछ अतिरिक्त चीज़ें दी गई हैं, जो आप कर सकते हैं:

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