onappinstalled - for when an app is installed.

Chrome recientemente (al menos en 2017) implementó window.onappinstalled event. Se activa cuando un usuario instala una aplicación web progresiva a través de la API Agregar a la pantalla de inicio (la función prompt () del evento entregado a través del evento onbeforeinstallprompt or ahora más importante a través del método manual Agregar a pantalla de inicio.

Esta es una adición muy útil porque le permite ver el compromiso en el mensaje frente a las personas que utilizan los banners del sistema o los botones de menú para instalar una aplicación web progresiva.

Lo he agregado a Airhorner para que pueda verlo en acción si está conectado DevTools. El código está abajo que administra onbeforeinstallprompt y onappinstalled; en este caso, uso onbeforeinstallprompt para diferir el mensaje de instalación a un botón personalizado, y onappinstalled para limpiar la interfaz de usuario y hacer algunos análisis básicos.

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));
};

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.