Progressive Web Apps

Las progressive web apps o PWAs han roto la barrera existente entre aplicación web y aplicación móvil.

Tradicionalmente una aplicación nativa se construía para una plataforma específica (android, iOS, Windows…) Respetando las normas y restricciones de cada una. Presumiblemente aprovechaban mejor los recursos de cada sistema y tenían un funcionamiento más fluido.

Las aplicaciones web han estado presentes prácticamente desde el comienzo de internet, permitiendo ejecutar software directamente desde el navegador, pero estando ligadas a él de tal forma que era imposible su ejecución sin depender del navegador, además de no poder funcionar en segundo plano en dispositivos móviles.

Se basan en estándares web abiertos y están escritas principalmente, como una aplicación web convencional, en HTML, CSS y JavaScript. Utilizan también la tecnología de service workers que permite ejecutar servicios en segundo plano en los navegadores, y guardan su caché en el navegador que utilices para poder cargar el contenido directamente desde esa memoria y poder funcionar y ejecutarse cuando estás sin conexión. Permiten funcionar a las progressive web apps como aplicaciones convencionales en un dispositivo móvil.

Este tipo de aplicaciones poseen cierto tipo de ventajas, como no depender de markets de aplicaciones, poseer integración con notificaciones push, el funcionamiento sin conexión a Internet o la posibilidad de probar una versión más ligera antes de bajarte una aplicación nativa de verdad.

Además en un mundo donde prima la velocidad (Estudios prueban que usuarios frente a  aplicaciones que tardan más de 3 segundos en arrancar, no quieren volver a utilizarlas) las PWAs son la mejor herramienta dado su gran rendimiento y ligereza.

angular pwa

¿Cómo crear progressive web apps?

Debe ser segura. Para crear una aplicación PWA, debemos crear una aplicación web con certificación SSL y servida en HTTP/2

Debe ser rápida, tardar poco tiempo en cargar, ejecutarse, sincronizarse en background y recuperar o enviar datos almacenados en memoria cuando tenga conexión.

Debe ser responsive, adaptarse a diferentes tipos de pantalla.

Debe registrar service workers. API que permite la sincronización en segundo plano, trabajar con notificaciones push y la ejecución sin conexión.

  • Pueden acceder al DOM directamente.Un service worker es un proxy de red programable.
  • Se rescinde cuando no están en uso y se reinicia cuando se lo necesita,
  • Los service workers hacen gran uso de las promesas.

Este código verifica si la API del service worker está disponible. Si está disponible, se registra el service worker una vez que se carga la página.

if (‘serviceWorker’ in navigator) {

 window.addEventListener(‘load’, function() {

   navigator.serviceWorker.register(‘/sw.js’).then(function(registration) {

     // Registration was successful

     console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);

   }).catch(function(err) {

     // registration failed 🙁

     console.log(‘ServiceWorker registration failed: ‘, err);

   });

 });

}

¿Qué falta aún por implementar?

Esta tecnología fue creada por ingenieros de Google en 2015, desde entonces tanto Windows (año 2017,  EdgeHTML 17.17063) como Apple (año 2018, iOS 11.3 and macOS 10.13.4) han incorporado progresivamente esta tecnología a sus navegadores, aunque a día de hoy todavía existen incompatibilidades o funcionalidades incompletas.

¿Qué pueden hacer las PWAs para dispositivos móviles en Android y no en iOS?

En Android puedes almacenar más de 50mb.

Android no borra los archivos almacenados si no usas la app, aunque puede hacerlo si existe escasez de almacenamiento. También puede solicitar almacenamiento persistente.

Acceso bluetooth para dispositivos BLE.

Reconocimiento por voz.

Sincronización en background y notificaciones push.

Acceso rápido para instalar la app.

No se puede instalar más de una instancia de la aplicación.

Compatibility
Integración inicial de progressive web apps 

Limitaciones en iOs frente a aplicaciones nativas

Si el usuario no usa la app en días, se perderá el almacenamiento, volviéndose a descargar cuando se inicie la app de nuevo.

Sin acceso a Beacons, Touch ID, Face ID, ARKit, altímetro, sensor de batería.

Sin acceso a información como contactos o mensajes.

Sin acceso a los pagos mediante Apple-pay.

¿Cómo instalar progressive web apps?

Para instalar una PWA en android solamente debe servirse en la página web y entrar desde su navegador móvil. Automáticamente aparecerá un mensaje para instalarla.

En iOS se debe añadir manualmente a la pantalla de inicio. El propio sistema operativo detectará que no es una web al uso y automáticamente se descargará e instalará en forma de PWA.

¡Listo! Nuestra PWA estará preparada para usarse como una aplicación más.

Related links

Related links

Deja un comentario

Responsable » Solidgear.
Finalidad » Gestionar los comentarios.
Legitimación » Tu consentimiento.
Destinatarios » Los datos que me facilitas estarán ubicados en los servidores SolidgearGroup dentro de la UE.
Derechos » Podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

By completing the form you agree to the Privacy Policy

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.