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

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium