ऐप्लिकेशन के अंदर इंस्टॉल करने का अनुभव देने का तरीका

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

ब्राउज़र से मिलने वाले इंस्टॉल अनुभव के अलावा, सीधे अपने ऐप्लिकेशन में अपना कस्टम इंस्टॉल फ़्लो उपलब्ध कराया जा सकता है.

Spotify के PWA में 'ऐप्लिकेशन इंस्टॉल करें' बटन दिया गया है
Spotify के PWA में दिया गया "ऐप्लिकेशन इंस्टॉल करें" बटन

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

ज़रूरी शर्तें

शुरू करने से पहले, पक्का करें कि आपका PWA इंस्टॉल करने से जुड़ी ज़रूरी शर्तें पूरी करता हो. इनमें आम तौर पर वेब ऐप्लिकेशन मेनिफ़ेस्ट शामिल होता है.

इंस्टॉल करने को बढ़ावा दें

यह बताने के लिए कि आपके प्रोग्रेसिव वेब ऐप्लिकेशन को इंस्टॉल किया जा सकता है या नहीं और कस्टम इन-ऐप्लिकेशन इंस्टॉल फ़्लो उपलब्ध कराने के लिए:

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

beforeinstallprompt इवेंट के लिए सुनें

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

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

इन-ऐप्लिकेशन इंस्टॉलेशन फ़्लो

इन-ऐप्लिकेशन इंस्टॉलेशन उपलब्ध कराने के लिए, ऐसा बटन या दूसरा इंटरफ़ेस एलिमेंट उपलब्ध कराएं जिस पर क्लिक करके उपयोगकर्ता आपका ऐप्लिकेशन इंस्टॉल कर सके. एलिमेंट पर क्लिक करने के बाद, सेव किए गए beforeinstallprompt इवेंट (deferredPrompt वैरिएबल में स्टोर) पर prompt() को कॉल करें. यह उपयोगकर्ता को एक मॉडल इंस्टॉल डायलॉग दिखाता है. इसमें उनसे यह पुष्टि करने के लिए कहा जाता है कि वे आपका PWA इंस्टॉल करना चाहते हैं.

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt, and can't use it again, throw it away
  deferredPrompt = null;
});

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

पता लगाएं कि PWA कब इंस्टॉल हुआ

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

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

पता लगाएं कि PWA को कैसे लॉन्च किया गया था

सीएसएस display-mode मीडिया क्वेरी से पता चलता है कि PWA को ब्राउज़र टैब में या इंस्टॉल किए गए PWA के तौर पर कैसे लॉन्च किया गया था. ऐसा करके, ऐप्लिकेशन को लॉन्च करने के तरीके के हिसाब से अलग-अलग स्टाइल लागू की जा सकती है. उदाहरण के लिए, 'इंस्टॉल करें' बटन को हमेशा छिपाएं और इंस्टॉल किए गए PWA के तौर पर लॉन्च होने पर, 'वापस जाएं' बटन दें.

PWA को लॉन्च करने का तरीका ट्रैक करना

यह ट्रैक करने के लिए कि उपयोगकर्ता आपका PWA कैसे लॉन्च करते हैं, matchMedia() का इस्तेमाल करके display-mode की मीडिया क्वेरी टेस्ट करें. iOS पर Safari अभी तक इस पर काम नहीं करता, इसलिए आपको navigator.standalone की जांच करनी होगी. यह बताता है कि ब्राउज़र एक बूलियन मोड में चल रहा है या नहीं.

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

डिसप्ले मोड में बदलाव होने पर ट्रैक करें

उपयोगकर्ता standalone से browser tab के बीच बदलता है या नहीं, इसे ट्रैक करने के लिए, display-mode मीडिया क्वेरी में हुए बदलावों को सुनें.

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

मौजूदा डिसप्ले मोड के आधार पर यूज़र इंटरफ़ेस (यूआई) अपडेट करें

इंस्टॉल किए गए PWA के तौर पर लॉन्च होने पर, PWA के बैकग्राउंड का कोई अलग रंग लागू करने के लिए, शर्त वाली सीएसएस का इस्तेमाल करें:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

अपने ऐप्लिकेशन का आइकॉन और नाम अपडेट करना

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