android - permitir - Cómo obtener la ventana emergente Agregar a la pantalla de inicio en el sitio Abrir en el navegador móvil

ventanas emergentes android virus

Question

Cómo obtener esta ventana emergente en el navegador móvil "Agregar a la página de inicio" creará un ícono de chrome en la pantalla de inicio del dispositivo móvil con enlace al sitio en el dispositivo móvil.

Por favor sugiera la solución.

Answer 1

Debe tener lo siguiente para mostrar un archivo de manifiesto.

1. Debe tener un archivo de manifiesto de aplicación web con:

   1. short_name : se utiliza en la pantalla de inicio justo debajo del icono.
   2. nombre - nombre completo de su aplicación
   3. ícono : logotipo / ícono de al menos 192x192 ícono de png (las declaraciones del ícono deben incluir un tipo mimo de imagen / png)
   4. start_url : la página que debe cargarse cuando se abre la aplicación

2. Debe tener un trabajador de servicio registrado en su sitio.

3. Asegúrese de que su sitio se sirva a través de HTTPS (un requisito para usar el trabajador de servicio).

4. Y debe cumplir con la heurística de compromiso del sitio de los navegadores.

Ahora puedes capturar esta ventana emergente y decidir cuándo quieres mostrarla

window.addEventListener("beforeinstallprompt", ev => { 
  // Stop Chrome from asking _now_
  ev.preventDefault();

  // Create your custom "add to home screen" button here if needed.
  // Keep in mind that this event may be called multiple times, 
  // so avoid creating multiple buttons!
  myCustomButton.onclick = () => ev.prompt();
});

Mire el evento antes de la instalación , que puede interceptar y poner en espera.

Este evento tiene un método llamado .prompt() , que le permite hacer que la ventana emergente aparezca a voluntad.

Answer 2

En su archivo de trabajador de servicio js tenga esta única línea.

self.addEventListener(''fetch'', function(event) {});

Answer 3

Encontré este artículo detallado en Medium. Cómo agregar la ventana emergente "Agregar a la pantalla de inicio" en la aplicación web

Paso 1: Crea un archivo service-worker.js en blanco en tu carpeta raíz. Y ponga el siguiente código en su página html, antes de cerrar la etiqueta.

<script>
 if (''serviceWorker'' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register(''service-worker.js'')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn''t. This happened:", err)
    });
 }
</script>

Paso 2: Cree el archivo de manifiesto cree el archivo manifest.json en la carpeta raíz. Agregue la etiqueta de abajo en la sección del encabezado de su página html.

<link rel="manifest" href="/manifest.json">

Paso 3: Agregar configuraciones en el archivo de manifiesto Aquí está la muestra de configuraciones.

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/icons/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/icons/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/icons/launcher-icon-3x.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "assets/icons/launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?utm_source=launcher"
}

En el código anterior, puede reemplazar sus propios valores.

short_name : este nombre es visible en la pantalla de inicio junto con el ícono de la aplicación.

iconos : establece diferentes iconos de tamaño para diferentes tamaños de pantalla

theme_color : este código de color cambiará el color del direccionador en Chrome.

color de fondo : establece el color de fondo para la pantalla de bienvenida.

Nombre : Nombre completo de la aplicación.

Puede validar su manifiesto aquí en https://manifest-validator.appspot.com

Answer 4

Los requisitos oficiales son:

Chrome muestra automáticamente el banner cuando su aplicación cumple con los siguientes criterios:

• Tiene un archivo de manifiesto de aplicación web con:
  • un short_name (usado en la pantalla de inicio)
  • un nombre (usado en el banner)
  • un ícono de png de 144x144 (las declaraciones de íconos deben incluir un tipo mime de imagen / png)
  • un start_url que carga
• Tiene un trabajador de servicio registrado en su sitio.
• Se sirve a través de HTTPS (un requisito para usar el trabajador de servicio).
• Se visita al menos dos veces, con al menos cinco minutos entre visitas.

fuente: https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

Puede omitir estos requisitos para fines de prueba o depuración habilitando un indicador de chrome:

chrome: // flags / # bypass-app-banner-engagement-check