onappinstalled – for when an app is installed.

Chrome has recently (well at least in 2017) implemented window.onappinstalled event. It is triggered when a user installs a progressive web app either via the Add to Homescreen API (the prompt() function on the event delivered via the onbeforeinstallprompt event) or now more importantly via the manual method of Add to Homescreen.
This is a very useful addition because it allows you to see engagement on the prompt vs people who use the system banners or menu buttons to install a progressive web app.


This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

Chrome has recently (well at least in 2017) implemented window.onappinstalled event. It is triggered when a user installs a progressive web app either via the Add to Homescreen API (the prompt() function on the event delivered via the onbeforeinstallprompt event) or now more importantly via the manual method of Add to Homescreen.

This is a very useful addition because it allows you to see engagement on the prompt vs people who use the system banners or menu buttons to install a progressive web app.

I've added it to Airhorner so you can see it in action if DevTools is attached. The code is below that manages onbeforeinstallprompt and onappinstalled - in this case I use onbeforeinstallprompt to defer the install prompt to a custom button, and onappinstalled to clean up the UI and do some basic analytics.

const Installer = function(root) {
  let promptEvent;

  const install = function(e) {
    if(promptEvent) {
      promptEvent.prompt();
      promptEvent.userChoice
        .then(function(choiceResult) {
          // The user actioned the prompt (good or bad).
          // good is handled in 
          promptEvent = null;
          ga('send', 'event', 'install', choiceResult);
          root.classList.remove('available');
        })
        .catch(function(installError) {
          // Boo. update the UI.
          promptEvent = null;
          ga('send', 'event', 'install', 'errored');
          root.classList.remove('available');
        });
    }
  };

  const installed = function(e) {
    promptEvent = null;
    // This fires after onbeforinstallprompt OR after manual add to homescreen.
    ga('send', 'event', 'install', 'installed');
    root.classList.remove('available');
  };

  const beforeinstallprompt = function(e) {
    promptEvent = e;
    promptEvent.preventDefault();
    ga('send', 'event', 'install', 'available');
    root.classList.add('available');
    return false;
  };

  window.addEventListener('beforeinstallprompt', beforeinstallprompt);
  window.addEventListener('appinstalled', installed);

  root.addEventListener('click', install.bind(this));
  root.addEventListener('touchend', install.bind(this));
};


This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan


Print Share Comment Cite Upload Translate Updates
APA

Paul Kinlan | Sciencx (2018-04-13T12:20:31+00:00) onappinstalled – for when an app is installed.. Retrieved from https://www.scien.cx/2018/04/13/onappinstalled-for-when-an-app-is-installed/

MLA
" » onappinstalled – for when an app is installed.." Paul Kinlan | Sciencx - Friday April 13, 2018, https://www.scien.cx/2018/04/13/onappinstalled-for-when-an-app-is-installed/
HARVARD
Paul Kinlan | Sciencx Friday April 13, 2018 » onappinstalled – for when an app is installed.., viewed ,<https://www.scien.cx/2018/04/13/onappinstalled-for-when-an-app-is-installed/>
VANCOUVER
Paul Kinlan | Sciencx - » onappinstalled – for when an app is installed.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/04/13/onappinstalled-for-when-an-app-is-installed/
CHICAGO
" » onappinstalled – for when an app is installed.." Paul Kinlan | Sciencx - Accessed . https://www.scien.cx/2018/04/13/onappinstalled-for-when-an-app-is-installed/
IEEE
" » onappinstalled – for when an app is installed.." Paul Kinlan | Sciencx [Online]. Available: https://www.scien.cx/2018/04/13/onappinstalled-for-when-an-app-is-installed/. [Accessed: ]
rf:citation
» onappinstalled – for when an app is installed. | Paul Kinlan | Sciencx | https://www.scien.cx/2018/04/13/onappinstalled-for-when-an-app-is-installed/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.