Aplicación para cualquier entorno  
Tags: android, ios
Published: 2021-05-17 01:56:07

 # Aplicación web progresiva
Ir a la navegaciónIr a la búsqueda
Una aplicación web progresiva (PWA por sus siglas en inglés) es un tipo de software de aplicación que se entrega a través de la web, creado utilizando tecnologías web comunes como HTML, CSS y JavaScript. Está destinado a funcionar en cualquier plataforma que use un navegador compatible con los estándares. La funcionalidad incluye trabajar sin conexión, notificaciones push y acceso al hardware del dispositivo, lo que permite crear experiencias de usuario similares a las aplicaciones nativas en dispositivos móviles y de escritorio. Dado que una aplicación web progresiva es un tipo de página web o sitio web conocido como aplicación web, no hay ningún requisito para que los desarrolladores o usuarios instalen las aplicaciones web a través de sistemas de distribución digital como Apple App Store o Google Play. 

**funete :https://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web_progresiva**




En mi caso uso framework php LARAVEL con un packet https://github.com/silviolleite/laravel-pwa

en donde guía paso a paso de forma sencilla el instalación, 
tambien y solo queda de hacer los ajustes de reemplazar las imagenes que renderizara la app que esta en public/images/icons/
respetando los nombre, 

Eso es fácil, pero quedaría mas vistoso si es que hacemos un modal y ponemos un botón con un evento en donde podremos hacerlo de la misma forma, la función seria 


<script>

  window.onload = (e) => { 
    // Declare init HTML elements
    const buttonAdd = document.querySelector('#buttonAdd');

    let deferredPrompt;
    window.addEventListener('beforeinstallprompt', (e) => {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      deferredPrompt = e;
    });

    // Add event click function for Add button
    buttonAdd.addEventListener('click', (e) => {
      // Show the 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 A2HS prompt');
          } else {
            console.log('User dismissed the A2HS prompt');
          }
          deferredPrompt = null;
        });
    });
  }
</scrip>





fuente:https://developer.mozilla.org/en-US/docs/Web/API/Window/onbeforeinstallprompt

Window.onbeforeinstallprompt
La Window.onbeforeinstallpromptpropiedad es un controlador de eventos para procesar a beforeinstallprompt, que se envía a los dispositivos cuando se le pide a un usuario que "instale" una aplicación web. Su evento asociado puede guardarse para más tarde y usarse para avisar al usuario en un momento más adecuado. 

Sintaxis
window.addEventListener("beforeinstallprompt", function(event) { ... });
window.onbeforeinstallprompt = function(event) { ...};
Ejemplo
El siguiente ejemplo usa el beforeinstallpromptevento para hacer operativo un botón de instalación, usando el evento dentro de un controlador de clic.

window.addEventListener("beforeinstallprompt", function(beforeInstallPromptEvent) {
  beforeInstallPromptEvent.preventDefault(); // Prevents immediate prompt display

  // Shows prompt after a user clicks an "install" button
  installButton.addEventListener("click", function(mouseEvent) {
    // you should not use the MouseEvent here, obviously
    beforeInstallPromptEvent.prompt();
  });

  installButton.hidden = false; // Make button operable
});