Progressive Web App (PWA)

Una Progressive Web App (PWA) es una aplicación web que ofrece a tus visitantes en el móvil una experiencia parecida a la de una app nativa: tu sitio se siente rápido, fluido y atractivo.

Las PWA se abren al instante, responden rápido a las interacciones y se sienten como una app de verdad. No necesitan una tienda de aplicaciones para instalarse y permiten volver a entrar al sitio al momento, incluso con el dispositivo sin conexión.

Nota:

• Las PWA solo se pueden activar en sitios HTTPS. Para más información, consulta SSLs (HTTPS).
• Las PWA son compatibles con Chrome para Android. Si la PWA está activada, el navegador pregunta automáticamente al visitante si quiere añadir el sitio a la pantalla de inicio.
• También puedes añadir una PWA en dispositivos iOS con la versión 11.3. Pero como ahí el mensaje automático de «añadir a la pantalla» del navegador todavía no está disponible, los visitantes tendrán que añadir la PWA manualmente. Para saber cómo hacerlo, visita el soporte de Apple.

Activar la función PWA

Para activar la función PWA:

1. En el panel lateral, haz clic en Más y luego en Configuración.
2. Haz clic en Aplicación web progresiva.
3. Haz clic en la opción Activar aplicación web progresiva.
4. (Opcional) Haz clic en la opción Servir primero el marcado de páginas desde la caché. Este ajuste cambia la estrategia de caché de nuestro service worker (en sitios de runtime): en lugar de comprobar primero la red, carga la página primero desde la caché (mientras no se vuelva a publicar). «Cache first» (opción activada) es ideal si sabes que el sitio y sus recursos apenas van a cambiar, porque carga rápido la información guardada y está disponible más fácilmente sin conexión. «Network first» (opción desactivada) es lo mejor cuando los datos deben estar lo más actualizados posible.
5. (Opcional) Haz clic en la opción Habilitar los navegadores móviles para solicitar la instalación del sitio como una aplicación. Cuando está activada, puedes configurar los siguientes ajustes:
   • Nombre Es el nombre que se muestra en la pantalla de bienvenida y en el mensaje «añadir a la pantalla de inicio». Puede tener hasta 60 caracteres.
   • Nombre corto Es el nombre que se usa cuando no hay espacio suficiente para mostrar el nombre completo, por ejemplo en la pantalla de inicio del móvil. Puede tener hasta 60 caracteres, pero te recomendamos que sea lo más corto posible.
   • Icono Es el icono que aparece en la pantalla de inicio del móvil y en la pantalla de bienvenida mientras se carga la app. Debe medir al menos 192 píxeles de ancho y estar en formato .png.
   • Color de fondo de la pantalla de bienvenida. Es el color que se muestra mientras se carga el sitio.

Cuando un visitante abre desde su móvil un sitio con la PWA activada, ve debajo del sitio un botón Add to Home screen. Una vez añadido a la pantalla de inicio, el icono aparece en su dispositivo para acceder al sitio rápidamente (como si fuera una app).

A partir de ese momento, el visitante puede volver a entrar al sitio con este icono, aunque el dispositivo esté sin conexión.