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 (4)
Debe tener lo siguiente para mostrar un archivo de manifiesto.
Debe tener un archivo de manifiesto de aplicación web con:
- short_name : se utiliza en la pantalla de inicio justo debajo del icono.
- nombre - nombre completo de su aplicación
- ícono : logotipo / ícono de al menos 192x192 ícono de png (las declaraciones del ícono deben incluir un tipo mimo de imagen / png)
- start_url : la página que debe cargarse cuando se abre la aplicación
Debe tener un trabajador de servicio registrado en su sitio.
Asegúrese de que su sitio se sirva a través de HTTPS (un requisito para usar el trabajador de servicio).
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.
En su archivo de trabajador de servicio js tenga esta única línea.
self.addEventListener(''fetch'', function(event) {});
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
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
