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

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

इंस्टॉल डायलॉग बॉक्स को बेहतर बनाया जा रहा है

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

Microsoft Edge इंस्टॉल करने का अनुरोध.

कुछ ब्राउज़र, इंस्टॉल करने के प्रॉम्प्ट के अनुभव को बेहतर बनाते हैं. इसके लिए, मेनिफ़ेस्ट में प्रमोशन वाले फ़ील्ड इस्तेमाल किए जाते हैं. इनमें description, categories, और screenshots शामिल हैं. उदाहरण के लिए, अगर Android पर Chrome का इस्तेमाल किया जा रहा है और आपका PWA, description और screenshots फ़ील्ड के लिए वैल्यू देता है, तो इंस्टॉल करने का डायलॉग बॉक्स, होम स्क्रीन पर जोड़ें जानकारी बार से एक बड़े और ज़्यादा जानकारी वाले डायलॉग बॉक्स में बदल जाता है. यह डायलॉग, किसी ऐप स्टोर से इंस्टॉल करने के अनुरोध की तरह ही काम करता है.

प्रचार फ़ील्ड को काम करते देखें:

beforeinstallprompt इवेंट

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

  1. beforeinstallprompt इवेंट सुनें.
  2. इसे सेव करें (आपको बाद में इसकी ज़रूरत होगी).
  3. इसे अपने यूज़र इंटरफ़ेस (यूआई) से ट्रिगर करें.

beforeinstallprompt इवेंट, इसके कैप्चर, और बाद में कस्टम इस्तेमाल के लिए, इवेंट लिसनर का उदाहरण देखने के लिए, नीचे दिया गया कोड देखें.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

इसके बाद, अगर उपयोगकर्ता पसंद के मुताबिक बनाए गए 'इंस्टॉल करें' बटन पर क्लिक करता है, तो पहले से सेव किए गए deferredPrompt का इस्तेमाल करें और उसके prompt() तरीके को कॉल करें. ऐसा इसलिए, क्योंकि उपयोगकर्ता को आपका ऐप्लिकेशन इंस्टॉल करने के लिए अब भी ब्राउज़र की प्रोसेस पूरी करनी होगी. आपने उपयोगकर्ता को PWA इंस्टॉल करने के लिए सही जानकारी देने तक, इवेंट को देरी से पूरा किया.

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

इवेंट शुरू नहीं होगा, अगर:

  • उपयोगकर्ता ने पहले से ही मौजूदा PWA इंस्टॉल कर लिया है. यह सिर्फ़ डेस्कटॉप और Android पर WebAPK के लिए मान्य है.
  • ऐप्लिकेशन, PWA इंस्टॉल करने की ज़रूरी शर्तों को पूरा नहीं करता.
  • PWA को मौजूदा डिवाइस पर अन्य वजहों से इंस्टॉल नहीं किया जा सकता. उदाहरण के लिए, ऐसा डिवाइस जो कीऑस्क मोड में है या जिसके पास अनुमति नहीं है.

सूचना देने के लिए सबसे अच्छी जगह

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

आंकड़े इकट्ठा करना

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

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

उदाहरण देखें

Chromium ब्राउज़र (डेस्कटॉप या Android) पर नीचे दिए गए सैंपल को आज़माएं.

Fallback

अगर यह ब्राउज़र पर beforeinstallprompt काम नहीं करता या इवेंट ट्रिगर नहीं होता, तो ब्राउज़र के इंस्टॉलेशन के अनुरोध को ट्रिगर करने का कोई और तरीका नहीं है. हालांकि, जो प्लैटफ़ॉर्म उपयोगकर्ता को iOS जैसे मैन्युअल रूप से PWA इंस्टॉल करने की अनुमति देते हैं उन पर, ये निर्देश उपयोगकर्ता को दिखाए जा सकते हैं.

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

एलिमेंट को सिर्फ़ ब्राउज़र मोड में रेंडर करने के लिए, display-mode मीडिया क्वेरी का इस्तेमाल करें:

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

कोडलैब (कोड बनाना सीखना)

लाइब्रेरी

कस्टम इंस्टॉल प्रॉम्प्ट को रेंडर करने में मदद के लिए, ये लाइब्रेरी देखें:

संसाधन