Cómo publicar y actualizar tu Progressive Web App

Tu PWA

Tu app también puede ser una Progressive Web App, o PWA: un sitio web que funciona como una app, en cualquier navegador, en un teléfono o un ordenador, sin tienda. Así se publica (se activa) y se mantiene al día.

Todo empieza en «Publish my project», arriba de cada página. Tu PWA es inmediata, sin requisitos previos.

Antes de publicar

Antes de publicar, dale a tu PWA su icono. En «My App», «App icon», Custom, es el «Apple Touch Icon», bajo PWA.

Luego, en la barra lateral, abre Publish, PWA, Publish: la página «PWA publication».

Cinco pasos opcionales te permiten ir más lejos: tu propio nombre de dominio, el posicionamiento en buscadores, las notificaciones push web, una clave de mapa y un sitemap. Ninguno es obligatorio.

Un aviso te indica cuándo una función necesita algo más en una PWA: aquí, una que usa la geolocalización necesita una clave API.

Y Redirection define adónde van los visitantes si algún día desactivas tu PWA.

Publicar tu PWA

Cuando estés listo, haz clic en «Publish my PWA».

GoodBarber genera tu PWA. Tarda unos minutos.

Tu PWA está en línea, en su propia dirección. Sigue el enlace o escanea el código QR con tu teléfono.

Para desactivarla, harías clic en Disable: los visitantes irían adonde elegiste en Redirection.

En «Publish my project», tu PWA ya aparece como Live.

Abrir tu PWA

Abre su dirección en cualquier navegador. En un ordenador, tu app se ve como un sitio web.

En un teléfono, se ve igual que tu app.

Los visitantes también pueden instalarla: en el menú de Chrome, es «Install and create shortcut».

Un toque en Install… y tu icono se suma a sus apps… y se abre a pantalla completa, como una app nativa.

Actualizar tu PWA

Ahora, cambia algo en tu app: en la cabecera, el «Logo color», por ejemplo.

La vista previa lo muestra al instante… pero tu PWA no: muestra lo último que publicaste.

«Publish my project» pasa a «Update now»: hay modificaciones esperando a publicarse.

En Publish, PWA, Update, «Live update» lista las modificaciones que salen con «Update now».

Otras, como una nueva extensión o un permiso, requieren reconstruir tu PWA: esperan aquí hasta que hagas clic en «Rebuild my PWA».

Para publicar tu cambio, abre «Publish my project» y haz clic en «Update now»… y luego confirma.

Unos segundos después, tu proyecto está actualizado.

Recarga tu PWA: el cambio ya está. Los visitantes lo reciben la próxima vez que la abran.

Contenido nuevo

El contenido es distinto. Publica un artículo en una de tus secciones… y aparece en tu PWA al instante, sin que tengas que actualizar nada.

«Publish my project» sigue indicando «Project updated». A partir de ahora, ahí publicarás tus cambios.