Manual de Progressive Web Apps

En el Manual de Progressive Web Apps vamos a abordar una de las novedades más destacadas para la realización de sitios web de los últimos años, que está revolucionando el mundo del desarrollo, pero sobre todo el modo en el que los usuarios consumen los sitios y aplicaciones web.

Progressive Web Apps (PWA), o aplicaciones progresivas, son el eslabón que faltaba entre los sitios web y las apps para móviles. Permiten llegar mucho más lejos en el desarrollo de características de las páginas web, acercándose a las posibilidades de desarrollo de apps para móviles (aquellas que instalas en el dispositivo a partir de los correspondientes stores de aplicaciones).

Gracias a las Progressive Web Apps podemos instalar aplicaciones en el sistema operativo, colocando un icono en el lanzador de aplicaciones, igual que si hubieses descargado tu app. Pueden funcionar en background, aunque no tengas abierta la página de un sitio web, recibir notificaciones push, mostrar una pantalla de arranque mientras cargan, etc.

En resumen, son aplicaciones muy parecidas a las apps, pero que se pueden instalar sólo con entrar en una página web, sin necesidad de forzar a los usuarios a descargarse e instalar la aplicación a través de una store. Para facilitar todas estas novedosas funcionalidades usan por debajo los servicios ofrecidos por el navegador, en vez de los que ofrecen los sistemas operativos.

Las aplicaciones progresivas las desarrollas con tecnologías web, son ligeras y rápidas y no están supeditadas al uso de ningún framework. Las haces con tecnologías estándar, como HTML, CSS y sobre todo Javascript.

En el Manual de PWA te enseñamos a implementar las características disponibles en este modelo de aplicación, con lenguajes estándar, que podrás aplicar a cualquier tecnología de desarrollo que desees utilizar.

Si te parece útil este manual ayúdanos compartiendo!! :)

Introducción a las Progressive Web Apps

Comenzaremos aclarando qué es una Progressive Web App, para que los lectores entiendan qué nos ofrecen y cómo van a revolucionar la web. Veremos que, gracias a ellas, la experiencia de usuario mejora con respecto a aplicaciones web tradicionales, ya que se puede hacer una gama nueva de funcionalidades. Además, para iniciarnos de una manera práctica, veremos cómo crear una aplicación progresiva rápidamente, apoyándonos en librerías y frameworks disponibles para el desarrollo.

1.- Qué es Progressive Web Apps

Qué son las Progressive Web Apps, características y tecnologías para desarrollar este tipo de aplicaciones web.

2.- Crea tu primer Progressive Web App con Ionic

Explicaciones generales sobre las Progressive Web Apps y sobre cómo comenzar el desarrollo de aplicaciones progresivas usando el framework Ionic 2.
Aprender a usar las nuevas utilidades de Progressive Web Apps

Para construir aplicaciones progresivas necesitamos conocer una serie de nuevas utilidades disponibles en el navegador, que debemos incorporar en los desarrollos. Comenzaremos por el archivo manifest.json, con el que podemos ofrecer mucha información adicional sobre la app. Veremos luego los service workers, una herramienta fundamental, el corazón de las funcionalidades novedosas de las aplicaciones progresivas. Veremos además que el propio Javascript tiene una serie de API adicionales que podremos usar en los service workers para implementar diversas mejoras en la web.

3.- Entendiendo el manifest de las Progressive Web Apps

Entendiendo el manifiesto, archivo manifest.json, uno de los principales elementos de las progressive web apps, dedicados especificar datos acerca de una web.

4.- Service Workers

Qué son los service workers, qué cosas podemos hacer con ellos, qué problemas solucionan, cuál es su ciclo de vida y como registrar un service worker en un sitio web.

5.- Entendiendo Fetch API en PWA

Qué es Fetch API, una de las API de los Service Workers. Te explicamos su funcionamiento con ejemplos y aplicaciones en las Progressive Web Apps.

6.- Entendiendo el Cache API

Qué es el caché API, cómo funciona para el desarrollo de novedades asombrosas de las Progressive Web Apps. Ejemplos de uso de cache API en el service worker.

7.- Estrategias Offline en PWA

Explicamos una característica fundamental de las Progressive Web Apps (PWA) como es la capacidad de trabajar offline, junto con las estrategias offline que podemos implementar.

8.- Entendiendo IndexedDB

Qué es IndexedDB y cómo trabajar con este sistema de base de datos transaccional que está integrado en el navegador y podemos usar para desarrollar aplicaciones web y PWA.

Compartir

Comentarios

martin

11/7/2018
pwa con pagina php
hola! es posible crear una pwa a partir de un site cuyas paginas son todas .php de manera tal que funcione offline?
Gracias!!

Alba

13/11/2018
PWA en un sitio PHP
En principio no habría problema por la extensión del fichero para incorporar características de PWA.