Agregue capturas de pantalla de la aplicación al indicador de instalación de PWA

Agregue capturas de pantalla de la aplicación al indicador de instalación de PWA: Amit Merchant: un blog sobre PHP, JavaScript y más

 

El indicador de instalación es una excelente manera de engañar a sus usuarios para que instalen su PWA (aplicación web progresiva). Pero puede mejorar la experiencia del usuario si puede agregar bonitas capturas de pantalla de su aplicación al aviso de instalación.

Hay un puñado de navegadores que admiten mostrar capturas de pantalla de su aplicación en el indicador de instalación.

Por ejemplo, verifique cómo se ven las capturas de pantalla en el mensaje de instalación de mi aplicación Notepad cuando la abro en Chrome en Android.

Aviso de instalación en Chrome en Android

Como puede ver, las capturas de pantalla de solicitud se parecen a las capturas de pantalla de la aplicación en Google Play Store. Y le da al usuario una mejor idea de cómo se ve la aplicación cuando está instalada y puede brindarle contexto adicional.

Es increíblemente fácil agregarlos a su PWA.

Esencialmente, para agregar capturas de pantalla al indicador de instalación, solo necesita agregar el screenshots propiedad en el manifest.json archivo de su PWA.

Aquí hay un extracto de manifest.json archivo de mi aplicación Bloc de notas.

{
    ...
    "screenshots": [
        {
            "src": "img/screenshot1.png",
            "type": "image/png",
            "sizes": "540x720"
        },
        {
            "src": "img/screenshot2.png",
            "type": "image/png",
            "sizes": "540x720"
        }
    ],
    ...
}

Como puedes ver, el screenshots La propiedad es una matriz de objetos. Cada objeto tiene las siguientes propiedades.

  • src - La URL de la captura de pantalla. También puede utilizar direcciones URL relativas.
  • type - El tipo MIME de la captura de pantalla.
  • sizes - El tamaño de la captura de pantalla.

Una vez que haya agregado el screenshots propiedad a su manifest.json archivo, puede probarlo en un navegador compatible. Actualmente, Chrome en Android es donde he visto funcionar esta función. Pero estoy seguro de que otros navegadores admitirán esta función pronto.

Realmente no hay nada de malo en agregar el screenshots propiedad a su manifest.json archivo incluso si el navegador no lo admite. Simplemente será ignorado.

Si quieres conocer otros artículos parecidos a Agregue capturas de pantalla de la aplicación al indicador de instalación de PWA puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas