नेटिव ऐप्लिकेशन इंस्टॉल करने का अनुरोध

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

इसके लिए क्या शर्तें हैं?

उपयोगकर्ता को नेटिव ऐप्लिकेशन इंस्टॉल करने का अनुरोध दिखाने के लिए, आपकी साइट को इन शर्तों को पूरा करना होगा:

  • डिवाइस पर, न तो वेब ऐप्लिकेशन इंस्टॉल है और न ही मौजूदा समय में इंस्टॉल किया गया खास ऐप्लिकेशन.
  • इसमें वेब ऐप्लिकेशन मेनिफ़ेस्ट शामिल है. इसमें ये चीज़ें शामिल हैं:
    • short_name
    • name (बैनर प्रॉम्प्ट में इस्तेमाल किया गया है)
    • icons, जिसमें 192 पिक्सल और 512 पिक्सल वाला वर्शन शामिल है
    • prefer_related_applications अब true है
    • related_applications ऑब्जेक्ट में, ऐप्लिकेशन के बारे में जानकारी है
  • एचटीटीपीएस पर दिखाया गया

इन शर्तों को पूरा करने पर, beforeinstallprompt इवेंट ट्रिगर हो जाएगा. इसका इस्तेमाल, लोगों को आपका खास ऐप्लिकेशन इंस्टॉल करने का अनुरोध करने के लिए किया जा सकता है.

ज़रूरी मेनिफ़ेस्ट प्रॉपर्टी

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

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

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

related_applications, ऑब्जेक्ट की सूची वाला कलेक्शन है. यह ब्राउज़र को आपके पसंदीदा नेटिव ऐप्लिकेशन के बारे में जानकारी देता है. हर ऑब्जेक्ट में, एक platform प्रॉपर्टी और एक id प्रॉपर्टी होनी चाहिए. जहां platform play है और id आपका Play Store ऐप्लिकेशन आईडी है.

इंस्टॉल करने का अनुरोध दिखाएं

इंस्टॉल करें डायलॉग दिखाने के लिए, आपको यह करना होगा:

  1. beforeinstallprompt इवेंट सुनें.
  2. उपयोगकर्ता को सूचना दें कि आपका खास ऐप्लिकेशन, बटन या ऐसी अन्य चीज़ों के ज़रिए इंस्टॉल किया जा सकता है जिनसे उपयोगकर्ता जेस्चर वाला इवेंट जनरेट होगा.
  3. सेव किए गए beforeinstallprompt इवेंट में, prompt() को कॉल करके प्रॉम्प्ट दिखाएं.

beforeinstallprompt में सुनें

अगर शर्तें पूरी हो जाती हैं, तो Chrome beforeinstallprompt इवेंट को ट्रिगर करेगा. इसका इस्तेमाल यह बताने के लिए किया जा सकता है कि आपका ऐप्लिकेशन इंस्टॉल किया जा सकता है. इसके बाद, उपयोगकर्ता से इसे इंस्टॉल करने का अनुरोध करें.

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

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

उपयोगकर्ता को यह सूचना दें कि आपका ऐप्लिकेशन इंस्टॉल किया जा सकता है

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

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

प्रॉम्प्ट दिखाएं

इंस्टॉल करने का प्रॉम्प्ट दिखाने के लिए, सेव किए गए इवेंट पर उपयोगकर्ता जेस्चर से prompt() को कॉल करें. इसमें एक मॉडल डायलॉग दिखेगा. इसमें, उपयोगकर्ता से आपके ऐप्लिकेशन को उसकी होम स्क्रीन पर जोड़ने के लिए कहा जाएगा.

इसके बाद, userChoice प्रॉपर्टी से मिला प्रॉमिस सुनें. प्रॉम्प्ट दिखाने और उपयोगकर्ता के जवाब देने के बाद, प्रॉमिस outcome प्रॉपर्टी के साथ एक ऑब्जेक्ट दिखाता है.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

स्थगित इवेंट पर prompt() को सिर्फ़ एक बार कॉल किया जा सकता है. अगर उपयोगकर्ता इसे खारिज कर देता है, तो आपको अगले पेज नेविगेशन पर beforeinstallprompt इवेंट चालू होने तक इंतज़ार करना होगा.

कॉन्टेंट की सुरक्षा नीति का इस्तेमाल करते समय इन बातों का ध्यान रखें

अगर आपकी साइट की कॉन्टेंट की सुरक्षा के बारे में नीति पाबंदी वाली है, तो img-src डायरेक्टिव में *.googleusercontent.com जोड़ना न भूलें, ताकि Chrome आपके ऐप्लिकेशन से जुड़े आइकॉन को Play Store से डाउनलोड कर सके.

कुछ मामलों में *.googleusercontent.com, उम्मीद से ज़्यादा शब्दों में हो सकता है. किसी Android डिवाइस को रिमोट डीबगिंग करके, ऐप्लिकेशन आइकॉन के यूआरएल की पहचान करके इसे कम किया जा सकता है.