Aplicación web progresiva (PWA)

Una aplicación web progresiva (PWA, por sus siglas en inglés) es una aplicación web que le permite brindar una experiencia similar a una aplicación nativa a los usuarios de dispositivos móviles, de forma que tengan una experiencia rápida, sin contratiempos e interesante en su sitio.

Las PWA se cargan al instante, responden rápidamente a las interacciones del usuario y se sienten como una aplicación natural. No necesitan una app store para su instalación y permiten a los usuarios volver a entrar en el sitio instantáneamente, incluso cuando un dispositivo está fuera de línea.

Atención

  • Las PWA solo se pueden habilitar en sitios HTTPS. Para obtener más información, consulte SSL (HTTPS)HTTPS).

  • Chrome para Android admite las PWA. Si las PWA están habilitadas, el navegador pregunta automáticamente si el usuario desea agregar el sitio en la pantalla de inicio.

  • También puede agregar una PWA en dispositivos IOS que corren con la versión 11.3. Sin embargo, dado que el mensaje automático "agregar a la pantalla" del navegador aún no está disponible, los usuarios deberán agregar PWA manualmente. Para obtener más información sobre cómo hacerlo, visite el Soporte técnico de Apple.

Para activar la función PWA:

  1. En el panel izquierdo, haga clic en SEO y configuración y, a continuación, haga clic en Aplicación sitio web progresivo (PWA).

  2. Haga clic en el botón Activar aplicación sitio web progresivo .

  3. (Opcional) Haga clic en el botón Servir primero el marcado de páginas desde la caché . Esta configuración cambia nuestra estrategia de almacenamiento en caché del service worker (para sitios en tiempo de ejecución); en lugar de registrar primero en la red, obtendrá la página primero del caché (siempre que no se vuelva a publicar). La opción de almacenar en caché primero (activar) puede ser la mejor opción si sabe que el sitio y sus activos no van a cambiar mucho, ya que cargará rápidamente la información almacenada en caché y estará disponible más fácilmente para los clientes sin conexión. Usar la red primero (con esta opción desactivada) es mejor cuando los datos deben estar lo más actualizados posible.

  4. (Opcional) Haga clic en Habilitar navegadores móviles para aplicar que se instale el sitio como una aplicación. Cuando esta opción está activada, puedes configurar los siguientes ajustes:

    • Nombre. Este es el nombre que se muestra en la pantalla de inicio y el mensaje "agregar a la pantalla de inicio". Puede tener hasta 60 caracteres.

    • Nombre corto. Este es el nombre que se emplea cuando no hay suficiente espacio para mostrar el nombre completo; por ejemplo, en la pantalla de inicio del celular. Este nombre puede tener hasta 60 caracteres, pero le sugerimos que lo haga lo más corto posible.

    • Icono. Este es el ícono que aparece en la pantalla de inicio del dispositivo móvil y en la pantalla de presentación cuando se carga la aplicación. Debe tener al menos 192 pixeles de ancho y estar en formato .png. formato.

    • Color de fondo de la pantalla de bienvenida. Este es el color que aparece mientras se carga el sitio.

Cuando un usuario accede a un sitio habilitado con PWA desde su dispositivo móvil, verá el botón Agregar a pantalla de inicio, que aparece debajo del sitio. Una vez que se agregue a la pantalla de inicio, el icono se mostrará en su dispositivo para un rápido acceso al sitio (similar a una aplicación).

Ahora el usuario puede volver a entrar al sitio utilizando este icono, incluso si el dispositivo está fuera de línea.

24517246525719-pwa_4pantallas.gif