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

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

ज़रूरी शर्तें क्या हैं?

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

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