Menu

Clase 1 - Creando una PWA

classPWA - May 21, 2018 por Carlos Rojas | Edita este Post.

!Hola! y bienvenido a esta serie de lecciones que te enseñaran como hacer una Progressive Web App en Javascript. Las PWAs ya estan en todas las conversaciones del Front Actual y en esta serie te enseñamos de que se trata.

¿ Que es una Progressive Web App ?

Una Progressive Web App es una WebApp que se adapta a los moviles y entrega al usuario una experiencia similar a la que entregaria una App descargada del App Store o del Google Play Store.

También según la definicion de Google debén tener 3 caracteristicas principales.

  • Confiabilidad. Siempre tenemos una versión ligera de nuestra App en el dispositivo y por lo tanto no vamos a mostrar el Downsaur.

  • Rapido. Debemos responder rapidamente a las solicitudes del usuario con nuestro contenido base cacheado.

  • Atrayente. Vamos a sentir que estamos usando una App movil nativa. adicionalmente, tendremos notificaciones en segundo plano para una experiencia inmersiva.

¿ Que necesito para crear una PWA ?

Para ser detectado como una PWA necesitas 4 cosas:

  • Una WebApp que actue correctamente en Moviles.
  • Un Web manifesto que indicara a tu Movil que esta app puede ser instalada.
  • Un Icono que sera utilizado como acceso a la App.
  • Un Service Worker que permitira realizar tareas en segundo plano.

Cada uno de estos tiene un papel importante en lograr la experiencia que queremos.

¿ Que vamos a construir ?

Vamos a crear una app que va a tener estas características:

  • Vas a leer noticias desde un Feed (RSS).
  • Puedes registrar usuarios.
  • Puedes autenticar usuarios.
  • Puedes resetear la contraseña.

¿ Que tecnologias y librerias vamos a utilizar ?

Listo eso es todo por ahora. pero mientras tanto puedes leer los siguientes enlaces :)

Hasta la proxima clase :)

Ver código

¡Compártelo!