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

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

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

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

  • डिवाइस पर वेब ऐप्लिकेशन या नेटिव ऐप्लिकेशन, दोनों इंस्टॉल नहीं हैं.
  • इसमें वेब ऐप्लिकेशन मेनिफ़ेस्ट शामिल होता है. इसमें ये चीज़ें शामिल होती हैं:
    • 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 डिवाइस को रिमोट डीबगिंग की मदद से फ़िल्टर किया जा सकता है.