Creando Progressive Web Apps con Oracle JET (II)

En la primera parte de este post (Progressive Web Apps con Oracle JET I) ya indicábamos que las aplicaciones web progresivas o progressive web apps (PWA) no son algo reciente, pero que la inclusión de Apple dentro de este universo ha generado una gran expectación a su alrededor.

 

En esta segunda parte del post vamos a mostrar un ejemplo práctico en el que utilizaremos Oracle JET.

 

Apostamos por Oracle JET por la flexibilidad que nos brinda a la hora de desarrollar una aplicación (híbrida, app web o pwa), aunque existen otros productos como Oracle Visual Builder que ya vienen preparados para habilitar la aplicación como PWA (ver vídeo “Progressive Web Apps (PWA) Development with Oracle Visual Builder”).

 

Para poder probar todo el potencial que nos brinda tener una aplicación PWA, he optado por crear una aplicación que detecte nuestra geolocalización y la muestre en un mapa; además crearemos un “serviceWorker” (más adelante lo definiremos), para indicarle al navegador que esta aplicación será instalable dentro del dispositivo móvil y qué ficheros queremos que guarde en el almacenamiento.

 

Creamos nuestra app

Lo primero que hacemos es crear nuestra aplicación Oracle JET basándonos en la plantilla basic (nos bastará para este ejemplo):

 

 

Diseño de la vista (index.html)

 

 

Para la vista usaremos los siguientes componentes (de arriba hacia abajo):

 

 

 

 

  • Oj-button: botón que lanza un evento para la obtención de las coordenadas.

 

 

  • Latitude y longitude: campos con las coordenadas capturadas por el navegador.

 

 

 

  • Google Map. En este caso utilizamos un Jet composite component como en el primer componente para mostrar el mapa con la localización de las coordenadas.

 

 

  • Controller.js. En la parte del controlador simplemente especificar el evento de “getLocation” para que capture la localización y las guarde en las variables.

 

 

  • ServiceWorker.js. También conocido como el programador de servicio, es un elemento programático muy simple que permite guardar y acceder a recursos en el caché. Este concepto básico es muy importante en el funcionamiento de una web progresiva, ya que este es el que permite que pueda hacer cosas como ser ejecutada sin conexión, y poder registrar acciones mientras se está offline para que luego sean cargadas cuando se disponga de internet.

 

 

  • Manifest. El manifiesto es un archivo JSON que contiene toda la meta información sobre la app: el nombre, el color del tema, el color del fondo, el icono y otros aspectos muy básicos. Sería el equivalente a un encabezado de una página web normal, pero en un archivo independiente.

 

 

 

  • Main.js. Dentro del main.js añadimos serviceWorker (anteriormente creado), solo si el navegador permite el registro de serviceWorker.

 

 

  • Index.html. Por último debemos añadir al index.html una referencia al manifest creado anteriormente para tener acceso a los metadatos.

 

 

 

Publicar la aplicación…

 

Finalmente será necesario contar con un servidor seguro con su correspondiente certificado SSL que garantice la privacidad y seguridad de los clientes. Los navegadores no ejecutarán una PWA que se encuentre alojada en un servidor HTTP.

 

Por esta necesidad hemos usado como servidor heroku, ya que nos proporciona una interfaz con certificado SSL, y hemos envuelto la aplicación un proyecto node con el módulo express para mostrarla.

Enlace de la aplicación: https://pwa-node.herokuapp.com/

 

Resumen

Las progressive web apps son una evolución natural de las aplicaciones web que difuminan la barrera entre la web y las aplicaciones nativas. Las ventajas de las PWA respecto a sus competidores son obvias y prometedoras, pues no requieren descargarse e instalarse, se actualizan automáticamente cada vez que se abren, suponen un ahorro de recursos, no dependen necesariamente de la conexión a Internet y su carácter multiplataforma permite probarlas online antes de enraizarlas en el dispositivo.

 

Progressive Web App ejecutada en móvil y desktop

 

 

Mensaje preguntando al usuario si desea añadir la aplicación en el dispositivo.

 

Al ejecutarlo como una aplicación, eliminamos la barra de navegación y mostramos splash screen.

 

Referencias de interés

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