Saltar al contenido principal

Usar la PWA del sitio web

Una Progressive Web App (PWA) es un sitio web que el navegador puede presentar con una experiencia similar a una aplicación. Permite que los clientes abran un sitio guardado desde un icono de la pantalla de inicio, en lugar de tener que navegar primero a una pestaña del navegador. El aviso de instalación, el funcionamiento sin conexión, las notificaciones y el rendimiento dependen del navegador, el dispositivo, la configuración del sitio desplegado y los permisos.

Confirma la experiencia activa antes de prometerla

Las capturas documentan un flujo del navegador, no garantizan la publicación de una versión. Una PWA ofrece contenido en caché sin conexión, notificaciones push u otras capacidades solo cuando el sitio desplegado y el navegador del cliente las admiten y habilitan. Esta documentación no probó ninguna PWA desplegada, dispositivo de cliente, notificación ni flujo de pedidos.

Agrega el sitio web a la pantalla de inicio de iPhone o iPad​

Usa Safari para abrir el sitio web. Si el navegador ofrece una acción para agregar ese sitio a la pantalla de inicio, sigue el aviso del dispositivo.

Safari muestra la opción de agregar un sitio web a la pantalla de inicio

Elige la acción para agregar el sitio web a la pantalla de inicio.

Acción de iOS para agregar el sitio web a la pantalla de inicio

Antes de confirmar, asigna un nombre al acceso directo.

Cuadro de diálogo de iOS para asignar un nombre al acceso directo del sitio web

Si la acción se completa, el dispositivo agrega un icono a la pantalla de inicio.

Acceso directo al sitio web en una pantalla de inicio de iOS

Selecciona el icono para volver al sitio web.

Sitio web abierto desde el acceso directo instalado en la pantalla de inicio

Los navegadores Android ofrecen un flujo parecido para instalar o agregar a la pantalla de inicio, pero las etiquetas y la secuencia exacta varían según el navegador y el dispositivo.

Qué puede ofrecer una PWA​

Cuando el sitio desplegado está configurado y el navegador lo admite, una PWA puede proporcionar:

  • Acceso rápido: el cliente puede abrir el sitio desde un icono guardado en vez de buscarlo en el navegador.
  • Contenido en caché o sin conexión: un service worker puede ofrecer algunos recursos cuando la conectividad es limitada. No supongas que todas las páginas, el catálogo, el carrito o las acciones de pedidos funcionan sin conexión.
  • Notificaciones: el sitio puede solicitar permiso para enviar notificaciones del navegador cuando lo permitan su configuración y el navegador del cliente; los permisos y la entrega no son automáticos.
  • Una superficie similar a una aplicación: el sitio guardado puede reducir los pasos necesarios para volver a la experiencia de pedidos.
  • Instalación desde el navegador: cuando el navegador ofrece esa opción, los clientes pueden guardar el sitio web sin descargar una aplicación nativa desde una tienda.

Dónde puede ayudar​

  • Un minorista en línea puede usar una experiencia similar a una aplicación para facilitar que los clientes regresen al catálogo.
  • Un grupo de restaurantes puede guardar un acceso directo web para facilitar el regreso al sitio de pedidos; para navegar el menú sin conexión, se necesita una configuración de caché verificada.
  • Un servicio de entrega puede combinar una PWA con su experiencia para clientes, pero el seguimiento del pedido y las actualizaciones requieren flujos de producto y notificación verificados por separado.

Revisa antes de compartir el flujo​

  1. Abre el sitio web de prueba aprobado que no sea de producción en el navegador y dispositivo de destino.
  2. Confirma que el navegador ofrezca la acción de instalación o de agregar a la pantalla de inicio.
  3. Revisa el nombre del icono, la marca, la URL inicial y las páginas que los clientes pueden abrir.
  4. Si vas a describir el uso sin conexión o las notificaciones, verifica esos comportamientos por separado en el sitio desplegado y según el estado de los permisos.

Guías relacionadas: Administrar Ordering Website · Configurar Ordering Widget