La aplicación web progresiva no muestra el botón de instalación en la barra del navegador

Estoy tratando de hacer un PWA y nada parece hacer que el botón Instalar como aplicación web aparezca en mi sitio.

El botón de instalación tiene el siguiente aspecto y se muestra en la barra de direcciones:

Aparece cuando voy a un sitio de discurso pero no al mío.

Tengo lo siguiente en la cabeza:

Mi manifiesto está en el directorio raíz y se llama manifest.webmanifest:

{
  "name": "Example 1",
  "short_name": "example1",
  "display": "standalone",
  "start_url": ".",
  "background_color": "#000000",
  "theme_color":"#ffffff",
  "description": "Example web app.",
  "icons": [{
    "src": "https://www.example.com/test/images/icon_512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "share_target": {
    "action":"/new-topic",
    "method":"GET",
    "enctype":"application/x-www-form-urlencoded",
    "params": {
      "title":"title",
      "text":"body"}
  }
}

No hay errores en la consola ahora. Al principio hubo un error que decía que no podía encontrar la imagen del logotipo. Una vez que esa ruta fue correcta, el error desapareció pero aún no hay botón de instalación.

Un ejemplo de un PWA son los foros de speech.org aquí. Este sitio se instala bien.

Probado en Brave/Firefox/OS X

Web progresiva de MDN

Actualizacion encontrada):
Curso Net Ninja sobre PWA

Uso Chrome Inspector para depurar el manifiesto de mi aplicación web:
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

Por ejemplo, muestra los problemas en mi manifest.json:

Después de solucionar los problemas, el ícono de instalación de PWA aparece en la barra de direcciones de Chrome 🙂

Puede encontrar los criterios para una aplicación PWA en los documentos de MDN en https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#how_do_you_make_an_app_a2hs-ready. Agregar a la pantalla de inicio (A2HS) se usa a menudo para explicar las PWA. El criterio es bastante consistente en la mayoría de los navegadores.

Problemas por los que podría no ser reconocido como un PWA:

1. Debe ser servido https (http:// o file:// no trabajará).
2. Debe tener un archivo de manifiesto con los campos correctos completados.
3. Debe tener un icono apropiado para mostrar en la pantalla de inicio.
4. Para Google Chrome, debe tener un trabajador de servicio registrado para permitir que la aplicación funcione sin conexión.

En mi caso el chrom Application La pestaña no muestra ningún error. Pero revisé el sitio usando Lighthouse y seleccionando Progressive Web App categoría. Ahí veo el problema del sitio.

solo asegúrese de que su servidor de alojamiento tenga un SSL porque PWA solo funciona en http://

encuentre mejor documentación sobre PWA en este enlace, https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps.

Parece un error que, en algunos casos, aunque su aplicación es una PWA correcta, el botón de instalación no se muestra.

Veo esto cuando sigues cambiando el manifiesto y actualizando tu página para ver el botón de instalación.

Como solución alternativa, simplemente reinicie Chrome escribiendo chrome://restart en la barra de direcciones.

Para mi aplicación de práctica de PWA, Chrome ESTABA mostrando el ícono de instalación. Pero una vez que lo instalé, incluso después de desinstalarlo, nunca vi otro icono de instalación. Incluso después de reiniciar Chrome, reinstalar el serviceworker, etc… no sé si mi PWA tiene un error o si Chrome tiene un error.