Recuerdo que cuando entré en ciertos sitios web con Chrome Android, había una ventana emergente en la parte inferior que mostraba algo como:
"¿Quieres instalar un acceso directo en el escritorio de tu casa? Haz clic aquí".
¿Cómo habilitar este comportamiento de "aplicación web progresiva" para los navegadores de Android y los navegadores de iOS, ofreciendo instalar un icono de acceso directo en el escritorio?
Esto es lo que ya probé, sin éxito: en el propio HTML:
<link rel="manifest" href="manifest.json" /> <link href="32.png" rel="icon shortcut" sizes="3232" /> <link href="192.png" rel="apple-touch-icon" /> El manifest.json contiene:
{ "short_name": "myapp", "name": "myapp", "icons": [ { "src": "48.png", "type": "image/png", "sizes": "48x48" }, { "src": "72.png", "type": "image/png", "sizes": "72x72" }, /// etc. same for 96, 144, 192, 512 ], "start_url": "https://example.com", "background_color": "#000000", "display": "standalone", "theme_color": "#000000", "description": "Test" }Nota: no es fácil depurar "Agregar a la pantalla de inicio" en un sitio web dado, porque el aviso no siempre se muestra si ya visitó el sitio web antes, vea mi comentario sobre la respuesta aceptada de Cómo traer de vuelta "Agregar a la pantalla de inicio "banner para la aplicación web progresiva después de eliminar el ícono de la pantalla de inicio?
¿Registraste a un trabajador de servicio? Puede usar el siguiente código si aún no lo ha hecho.
navigator?.serviceWorker.register('/service-worker.js');Debe crear el archivo service-worker.js en la carpeta que contiene su archivo JS principal
Parece que registrar un serviceWorker vacío con:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js').then(() => { console.log('Service Worker Registered'); }); }no es suficiente.
Para mí, era necesario que este trabajador realmente hiciera algo y manejara el evento de install :
self.addEventListener('install', (e) => { e.waitUntil( caches.open('myapp-store').then((cache) => cache.addAll([ '/index.html' ])), ); }); self.addEventListener('fetch', (e) => { console.log(e.request.url); e.respondWith( caches.match(e.request).then((response) => response || fetch(e.request)), ); }); para que se muestre la ventana emergente Add to home screen en Chrome para Android.
Nota: durante sus pruebas, si descarta la ventana emergente "Agregar a la pantalla de inicio" una vez, ya no la verá. Será necesario "eliminar el historial del navegador" para volver a verlo. No es muy útil para depurar esta función A2HS :)
Aquí hay una demostración de trabajo útil de MDN:
https://mdn.github.io/pwa-examples/a2hs/
y en particular el archivo del trabajador del servicio .