Progressive Web Apps con Oracle JET (I)

La web es una plataforma increíble. Su combinación de ubicuidad entre dispositivos y sistemas operativos, su modelo de seguridad centrado en el usuario y el hecho de que ni su especificación ni su implementación estén controladas por una sola empresa hacen de la web una plataforma única para desarrollar software. Cada vez que visitas un sitio web está actualizado y tu experiencia con ese sitio puede ser tan efímera o permanente como desees. Las aplicaciones web pueden llegar a cualquier persona, en cualquier lugar y en cualquier dispositivo con una única base de código.

 

¿Qué son las PWA?

Las aplicaciones web progresivas o progressive web apps (PWA) no son algo nuevo dentro del universo de las aplicaciones móviles. Una PWA aúna características de una página web con las prestaciones de una aplicación nativa, lo que permite que funcione en la misma medida como página web y como aplicación móvil sin depender del sistema operativo.

 

En el año 2015 Google retomo una idea que Apple lanzó junto con su iPhone en 2007 (las aplicaciones desarrolladas en el primer iPhone estaban basadas en HTML5) y la unieron con las oportunidades que les daban los navegadores más modernos. Incluyeron el Service Worker y el Manifest Web App y definieron el resultado con el término de Progressive Web App.

 

Google realizó esfuerzos importantes para promover el desarrollo de las PWAs para Android y progresivamente las empresas decidieron experimentar con ellas. Alibaba, Forbes, Twitter, AliExpress,… son solo algunos ejemplos de empresas que integraron una Progressive Web App o PWA y vieron una mejora significativa en los resultados. Algunos números que lo demuestran:

 

  • AliExpress vio crecer en un 82% sus conversiones de iOS.
  • Washington Post experimentó un aumento de casi 5 veces en la participación de los usuarios.
  • MyNet experimentó un aumento del 19% en las visitas a la página en iOS.

 

Diferencias entre una PWA, una aplicación web y una nativa

 

Para entender este punto debemos recapitular. Una aplicación nativa es aquella que puede ser instalada en el móvil, la app web es aquella que se aloja en un dominio y la app progresiva es la web que puede ser instalada en el dispositivo o navegador. Estos tres conceptos parecen muy similares, pero podemos profundizar más en sus diferencias:

 

  • Conexión a internet

La principal y más clara diferencia entre una app nativa y una aplicación web, es que la primera puede ejecutarse perfectamente sin conexión a internet, mientras que la segunda la necesita, pues sus datos se alojan en un dominio externo. Esta característica es de gran interés cuando la comparamos con una app progresiva, la cual también puede ser ejecutada offline.

 

  •  Almacenamiento

La segunda diferencia clara entre una app nativa y una web es el alojamiento de los datos que la conforman. La primera de ellas se aloja en el almacenamiento interno del móvil, lo que permite que no se necesite nada de internet para ponerla a funcionar ya que solo hay que ejecutarla. Mientras que la segunda se almacena en la nube, siendo necesaria la conexión a internet para poder ejecutarla.

 

Por su parte, las aplicaciones progresivas se almacenan en la memoria caché, ya que son lo suficientemente ligeras para ser cargadas rápidamente desde esta, lo que las hace similares a las apps nativas.

 

  •  Peso

Este es posiblemente el único apartado en el que pierda una app nativa, ya que pueden llegar a ser considerablemente más pesadas que las otras dos. Actualmente podemos encontrar juegos que pesan más de 1GB o herramientas profesionales de cientos de megas. Una app web es mucho más liviana, superando rara vez los 10MB, mientras que las progresivas en promedio ocupan 1MB.

 

  • Notificaciones push

Las notificaciones push son aquellas que te envían tus aplicaciones para recordarte tareas pendientes o por ejecutar a pesar de que esta esté cerrada o en segundo plano. Estas son un factor muy importante en lo que respecta al retorno del usuario, por lo cual tienen un valor de marketing tremendo. Esta es una de las principales características de las aplicaciones nativas, que ahora también son adoptadas por las app progresivas, pero que lamentablemente no están disponibles siempre en las apps webs.

 

  •  Potencia

Actualmente una app mobile puede llegar a ser casi tan potente como un software profesional, de modo que en ese sentido sigue sin tener rival. Tanto las aplicaciones webs como las progresivas son muy limitadas en ese sentido, por lo que no se puede esperar de ellas funciones tan potentes.

 

  •  Multiplataforma

Una app nativa es el equivalente a un programa de ordenador, pero instalado en un móvil. Esto hace que esté limitado a la plataforma en la que se ha instalado, y no puedas luego volver a cargar la app en otro dispositivo sin antes instalarla. Esto no pasa con las apps webs y las aplicaciones progresivas, ya que estas pueden ser multiplataforma con solo cargarlas en un navegador u otro sin problemas.

Compatibilidades con los diferentes navegadores

 

Una de las grandes potencias de las Progressive Web Apps es que son adaptativas, es decir que siempre ofrecerán la mejor experiencia posible en función de la pantalla utilizada para consultarlas, pero también del navegador en el cual se ejecutan. Así, es interesante conocer las capacidades de cada navegador y su compatibilidad con las funcionalidades de las Progressive Web Apps.

 

Funcionalidades disponibles en Chrome en sus diferentes plataformas:

 

 

Funcionalidades disponibles en Safari en sus diferentes plataformas:

 

 

Funcionalidades disponibles en Firefox en sus diferentes plataformas:

 

 

iOS en el centro de la diana

En abril de 2018 Apple introdujo “sigilosamente” las PWAs con la actualización iOS 11.3. Fue un gran paso en el mundo de las Progressive Web Apps porque los desarrolladores de Apple permitieron que los Service Workers, uno de los dos ingredientes cruciales de una PWA, estuvieran disponibles para iOS.

 

Esto permitió a los desarrolladores declarar qué parte de una PWA debía almacenarse en caché, permitió que los sitios web ejecutaran JavaScript en segundo plano (mejorando así el rendimiento general de la App) y también la hizo accesible sin conexión a Internet.

 

Aunque Apple finalmente se ha introducido en las PWAs sigue poniendo algunas limitaciones a la hora de utilizar las PWAs entre las que se encuentra las siguientes:

 

  • No hay notificaciones Push en iOS.
  • Sin sincronización de fondo.
  • No es compatible con cámaras de vídeo.
  • El almacenamiento local está limitado a 50 MB.
  • No es compatible con el uso del sensor de aceleración, giroscopio, bluetooth, Touch ID, ARKit.
  • Si un usuario no utiliza la PWA por varias semanas, Apple elimina todos sus recursos almacenados en caché.
  • Sin integración Siri.
  • Sin reconocimiento de voz.
  • No se puede bloquear la orientación de la pantalla.

 

En este punto me quedo sobre todo con un par de cosas negativas a la hora de utilizar PWAs dentro de una integración en iOS; el punto de las notificaciones push y la limitación de espacio a 50MB (aunque si una aplicación web ocupa más de 50MB, sería una cosa que tendríamos que revisar urgentemente).

 

Resumen

En resumen, lo que se está buscando con la aplicación progresiva es crear webs que puedan ser tan potentes como una app nativa, de modo que la gran duda es, si en algún momento podrían llegar a superarlas. Siendo esta una guerra muy fuerte para ver quién se queda con el trono en el apartado mobile.

 

Incluso con las limitaciones actuales que nos impone iOS, mejorar la experiencia del usuario web significa tener recompensa y según se van viendo los pasos que vamos tomando y las informaciones que circulan por la red es muy probable que Apple se ponga al día con la competencia. Al menos hasta donde se encuentran hoy Chrome, Edge y otros navegadores.

 

En la segunda parte de este post comprobaremos todo el potencial que nos brinda tener una aplicación PWA. Lo haremos  creando una aplicación que detecte nuestra geolocalización y la muestre en un mapa. Para ese ejemplo utilizaremos Oracle JET, por la flexibilidad que nos brinda a la hora de desarrollar una aplicación (híbrida, app web o PWA).

 

Referencias de interés:

 

Leer la segunda parte del post: Creando Progressive Web Apps con Oracle JET (II)

Twitter
LinkedIn
Evolución, innovación y transformación
18 Service Expertise avalados por Oracle 
Nuestra propuesta de valor
Posts 100% Oracle
Sigue nuestro día a día