javascriptservice-workerprogressive-web-apps

Is it possible to make an in-app button that triggers the PWA "Add to Home Screen" install banner?


I understand that with a properly made Progressive Web App mobile browsers will display a banner prompting users to 'Install' the app on their home screen.

I have been looking around for a way to trigger that prompt from within the app, but have not been able to find anything.

Is there a line of JavaScript that can be used to call the install prompt banner at any time?? Something that I could add to a install button tucked away in a help screen for instance?

It might be difficult for some users to find the "Add to Home Screen" option if they missed the install banner prompt. I'd like to give them a button they can click to be prompted again.

2020 EDIT: Yes, this is possible in Chrome - see answer below

See this great article: How to provide your own in-app install experience and my working demo of the article's process applied in a React app.

Or for a slightly different approach, see how snapdrop.net did it.


Solution

  • Thanks for all the great answers. Recently it appears that things have become more standardized, and there is a solid way of doing things in chrome at least that allows users to click and install the app even if they missed the prompt etc.

    Pete LePage wrote a very clear article on web.dev called How to provide your own in-app install experience which details the process. The code snippets and process is taken directly from the article.

    1. Listen for the beforeinstallprompt event.
    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();
    });
    
    1. Save the beforeinstallprompt event, so it can be used to trigger the install flow later.
    buttonInstall.addEventListener('click', (e) => {
      // Hide the app provided install promotion
      hideMyInstallPromotion();
      // Show the install 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 install prompt');
        } else {
          console.log('User dismissed the install prompt');
        }
      });
    });
    
    
    1. Alert the user that your PWA is installable, and provide a button or other element to start the in-app installation flow.

    For more details and other capabilities, see the full article.

    I made a working demo of a this process implemented in React. (source code)

    Also, for a slightly different approach, you can see how the maker(s) of Snapdrop implemented an install button in the source code.