पाठ 6 / 29

Installation Experience

Users को अपने home screen पर PWA को add करने देने के लिए install prompts और handling को implement करें।

Installation Flow

Browsers install prompt show करते हैं जब criteria meet होते हैं: HTTPS, valid manifest, service worker और icon। आप customize कर सकते हैं कि prompt users को कब और कैसे दिखाई दे।

Install prompt को handle करें

beforeinstallprompt event को listen करके custom install button दिखाएँ।

let deferredPrompt;

window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  deferredPrompt = e;
  // Show your custom install button
  installBtn.style.display = 'block';
});

installBtn.addEventListener('click', () => {
  deferredPrompt.prompt();
  deferredPrompt.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('App installed!');
    }
  });
});

Output:

Custom install button triggers native install prompt on click.

एक आम गलती

केवल तब install prompts दिखाएँ जब users आपके app के साथ engage करें। Too-eager prompts को dismiss किया जाता है और कई दिनों के लिए फिर से नहीं दिखाया जा सकता।

Installation Metrics and Analytics

Installation rates को track करें और installed apps के साथ user engagement को monitor करें।