onappinstalled - for when an app is installed.

Paul Kinlan
Available in: English (Original) Deutsch Français 日本語 मानक हिन्दी русский язык tiếng Việt தமிழ் bahasa Indonesia

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