HTML5 permite a los desarrolladores crear aplicaciones web que se ejecutan incluso sin una conexión a Internet. Por sorprendente que pudiera parecer en un primer momento, Tiene sentido una aplicación OFFLINE en el mundo actual? Probablemente sí.

 

La mayoría de las transacciones comerciales no pueden iniciarse sin una conexión a un sistema de back-end. Son operaciones que dependen de datos cambiantes, y de una actualización con el backend. Si bien es cierto que incluso la Antártida tiene acceso a Internet , todavía hay otros lugares remotos de la Tierra – sobre todo en las naciones en desarrollo – donde una conexión a Internet es a menudo inexistentes o poco fiable lento. Si quieres aprovechar estas oportunidades, sigue leyendo…

Para hacer una solicitud en línea completa, tendrá que conocer dos nuevas características del navegador HTML5

  1. Almacenamiento en caché de las páginas web para verlas sin conexión: Los navegadores pueden ser instruidos para descargar porciones de sitios web completos y caché de ellos en la computadora de su usuario final (o incluso páginas web enteras!). Cuando intentan acceder a su sitio web sin conexión a Internet, estas páginas en caché se vuelven en su pantalla como si fueran devueltos por el servidor.
  2. Desconectado almacenamiento de datos locales: Hasta ahora uno de la manera más amplia y verdaderamente multi-navegador de persistir los datos en el ordenador del usuario final, era mediante el uso de cookies. También hay varias restricciones sobre el tipo y el tamaño de los datos que se pueden almacenar usando cookies. HTML5 estandariza (o ‘está en el proceso de estandarización’ para ser más precisos) algo llamado “index DB”. Mediante el uso de JavaScript DOM APIs, puede crear una base de datos NoSQL con almacenes de objetos para almacenar objetos de Javascript en el sistema del usuario final. Incluso puede crear índices en estas tiendas de objetos y el uso de cursores para repetir conjuntos de objetos.

 

El almacenamiento en caché y el almacenamiento de datos local no sólo son útiles para aplicaciones fuera de línea;incluso pueden ser usados ​​para aumentar el rendimiento de las aplicaciones en línea. Los datos para cosas como valor F4 estático utilizado con frecuencia ayuda a, por ejemplo, se podrían almacenar en caché en el sistema del cliente para reducir el número de viajes redondos. Asimismo, si bien sólo creamos una aplicación de escritorio en este ejemplo, los recursos pueden ser cacheados por los navegadores móviles modernos también. Así que vamos a empezar!

 

 

La aplicación de demostración

¿Qué estamos haciendo?

En este documento vamos a aprender cómo crear una aplicación UI5 sencillo que contiene sólo un par de campos y un botón ‘Enviar’. Si una conexión Internet está disponible, esta técnica ha sido empujado a un servicio de back-end. Si una conexión a Internet no está disponible, los datos se almacenan de forma local – hasta que una conexión a Internet disponible.

 

¿Qué estamos aprendiendo?

Para ello, tendremos que tener una idea de los temas siguientes:

  1. Instruir al navegador que los recursos de caché para el acceso sin conexión
  2. Comprobación de si tenemos una conexión de red
  3. Creación y uso de una base de datos local

 

 

La construcción de la interfaz de usuario

Ciertamente no una impresionante interfaz de usuario, estoy de acuerdo, pero esto no es lo que estamos enfocando en la actualidad. Tengamos una mirada rápida en el createContent () método y pasar a las cosas más emocionantes.onSubmit () es un método que crearemos más adelante en el controlador de la vista para controlar el evento de prensa.

ui.png

ui.png

 

 

Comprobación de la conectividad de red

Hay varias maneras de comprobar si una conexión de red disponible. La técnica más común es comprobar lanavigator.onLine propiedad. Pero como bien informada desarrolladores de interfaz de usuario, lo mejor es que nos mantengamos lejos de esta propiedad (por ahora).

En Chrome y Safari, si el navegador no es capaz de conectarse a una red de área local (LAN) o un router, que es fuera de línea; regresan cumplen todas las demás condiciones. Así, mientras que se puede asumir que el navegador está en línea cuando se devuelve un valor falso, no se puede suponer que un cierto valor significa necesariamente que el navegador puede acceder a Internet. Usted podría obtener falsos positivos, por ejemplo en los casos en que el equipo se está ejecutando un software de virtualización que tiene adaptadores ethernet virtuales que siempre están “conectados”. – Mozilla Developer Network Referencia API Web

 

Entonces, ¿cómo más podemos comprobar la conectividad? Si bien puede haber mejores alternativas, una técnica que nunca me ha fallado hasta ahora es como se muestra aquí . Todo lo que estamos haciendo, es el envío de un XMLHttpRequest ligero al anfitrión de nuestro archivo HTML (nuestro servidor). Si la solicitud tiene éxito, sabemos que tenemos una conexión de red activa. Si falla la petición, entonces es seguro asumir que, o bien no hay conexión a Internet o nuestro servidor está caído. Nos intencionalmente añada un número aleatorio hasta el final de la dirección URL como un parámetro de consulta; esto hace que nuestra petición de URL “único” y asegura que el navegador en realidad trata de llegar a la URL a través de la red (en lugar de simplemente devolver un resultado posiblemente en caché)

 

Es fácil probar esta función antes de usarla. Sólo tiene que abrir una nueva pestaña en Chrome, vaya a cualquier URL, abra Herramientas para Desarrolladores y ejecutar esta función como una expresión de función Inmediatamente invoca (IIFE) en la consola.

(Function () {.. código aquí …}) ();

 

Verá que devuelve verdadero o falso como se esperaba. También puede echar un vistazo a la solicitud de red exacta que se envió, mediante la ficha “Red”.

ping.png

 

Vamos a seguir adelante y crea un nuevo método en nuestro controlador de este fragmento de código.

hostReachable.png

 

 

Manipulación “Enviar” cuando esté en línea

Esta parte es muy sencillo. Si nuestro servidor es accesible cuando el usuario hace clic en “Enviar”, simplemente empujamos nuestros datos a nuestro servicio web. Ya hemos creado de nuestro controlador onSubmit método para ser el ‘Enviar’ ‘pulse’ controlador de eventos de botón. Si una conexión Internet está disponible, llamamos a nuestro servicio web.

onsubmit.png

 

Preparación para el almacenamiento fuera de línea

IndexedDB es una base de datos NoSQL que ya está disponible en todos los navegadores modernos para aplicaciones web usen. Podemos crear varias “mesas” dentro de nuestra base de datos. No se llaman “tablas”, sin embargo, porque no son exactamente tabular. Se llaman tiendas de objetos, y que poseen múltiples objetos de datos (a diferencia de varias filas de datos). Si bien no es comparable con bases de datos SQL, cuando se trata de versatilidad para escenarios muy complejos, hay un puñado de características que ofrece IndexedDB a nuestra disposición, como los índices y los cursores. Para obtener más información, consulte la documentación del MDN .

 

Crear un almacén de objetos IndexedDB

Ahora escribiremos un método para nuestro controlador llamado prepareIDB () . Todo lo que tiene que hacer es crear una base de datos y nuestro almacén de objetos, y obtener una referencia a la base de datos para su uso posterior.

 

Como la mayoría de las operaciones en un IndexedDB son asíncronas, cada operación se representa por una solicitud de objeto. Estos objetos emiten eventos para representar varios estados de la operación que están representando. En el siguiente fragmento de código, el ‘ indexedDB.open petición ‘emite varios eventos, como upgradeneeded y éxito,que podemos asociar controladores de eventos a.

crear IDB.png

 

Si el OFFLINE_DB base de datos no existe en el navegador del usuario, la onupgradeneeded controlador de eventos se activa, seguida de onSuccess . Si las tiendas de bases de datos y objetos ya existen, sólo el onSuccesscontrolador se invoca.

En el onSuccess manejador, obtenemos una referencia a nuestra base de datos y la almacenamos en el controladormyDB atributo personalizado. Por cada operación que realizamos utilizando nuestra base de datos (lectura y escritura), vamos a utilizar esta referencia.

 

El upgradeneeded evento realidad indica que la versión de la base de datos que está intentando abrir no está disponible (y no sólo de que no existe la base de datos solicitada). Por ejemplo, si usted fuera a decidir añadir 2 nuevas tiendas de objetos a la misma base de datos, deberá añadir losdb.createObjectStore () declaraciones en el onupgradeneeded controlador de eventos. Para informar al navegador que desea onupgradeneeded que se activará de nuevo a pesar de que ya existe la base de datos, es necesario incrementar el ‘número de versión de base de datos’, que es el segundo parámetro en nuestro llamado a window.indexedDB.open ().

 

Vamos a poner una llamada a prepareIDB () dentro de la onInit () método de nuestro controlador.

controlador oninit.png

 

Con el lanzamiento de nuestra aplicación, podemos comprobar el uso de herramientas para desarrolladores de Chrome que nuestras tiendas de objetos de base de datos y están listos para la acción!

idb.png

 

Escriba un método para escribir datos

Nuestro próximo objetivo es crear un método de ayuda que acepta un objeto como parámetro y lo escribe en el almacén de objetos. En nuestra aplicación de demostración en curso, los datos que se escriben es sumamente sencilla estructurados. Cada registro es simplemente un objeto con dos atributos – nombre y comentario.

 

writeToIDB.png

Vamos a añadir una llamada a este método en la otra parte de nuestra onSubmit método controlador.

 

 

Escriba un método para enviar datos desde IndexedDB al servidor

Si no estamos conectados a la red, que estamos escribiendo los datos a nuestra base de datos local. Pero tarde o temprano, estos datos deben terminar en el servidor. ¿Cómo nos las arreglamos para hacer eso? Una solución es comprobar la conectividad de red cada 2 segundos (mientras que 2 segundos es más fácil de probar, a 2 minutos es probablemente más práctico), y empujan todos los datos sin conexión al servidor si está disponible.

 

checkAndSync.png

 

Ahora, para asegurarse de que nuestra checkAndSync () método se llama cada 2 segundos, vamos a configurar un intervalo en el de nuestro controlador onInit () método.

 

oninit checkandsync.png

¿No podemos escribir directamente this.checkAndSync () en su lugar? ¿No es lo mismo?

No, no lo es. Cuando se ejecuta la función que estamos pasando a window.setInterval, se ejecuta con un contexto diferente función. Eso significa, “esto” se referirá a la ventana de objeto y no nuestro controlador, y por lo tanto la checkAndSync método no serán accesibles. Para superar esto, se aprovecha una característica muy interesante de Javascript llamada “cierres”. He escrito unaentrada en el blog sobre los cierres en SCN, que le puede resultar útil.

 

¿No podemos escribir window.setInterval (oController.checkAndSync, 2000); ?

Aunque sintácticamente correcta, no podemos. ¿Se puede saber por qué?

 

¿No deberíamos eliminar los objetos en el almacén de objetos después de empujar al servidor?

Absolutamente correcto. Tenemos que – simplemente no estamos cubriendo en este documento, sin embargo.

 

Recursos de almacenamiento en caché para el acceso sin conexión

El manifiesto de la caché es un archivo especial que usted necesita para crear y enlazar su página HTML. Este archivo indica al navegador que los recursos se debe almacenar en caché y hacer disponible sin conexión. Este archivo normalmente se nombra cualquier cache.manifest o manifest.appcache . Pero antes de crear este recurso, tenemos que saber qué recursos de caché. La forma más sencilla de hacer esto, es marcando la pestaña “Red” en la herramienta de desarrollo de Chrome, mientras que su aplicación UI5 está ejecutando. Usted puede utilizarlo para conseguir una lista de CSS, JS y otros recursos que su aplicación está solicitando para mientras se ejecuta.

Cuando intenté correr mi aplicación (estoy usando intencionalmente la pesada savia-ui-core-all.js archivo), anoté todos los archivos que estaban siendo solicitados por la red, y les agregué a mi archivo de manifiesto para hacerlos todos disponibles sin conexión. Una descripción detallada de la estructura de este archivo se puede encontrar aquí .

 

file.png manifiesta

 

Una vez que se crea una caché de la aplicación en el navegador del usuario, se utilizan el contenido de caché incluso cuando el usuario está conectado a internet! La caché se descarta y se actualiza sólo cuando el propio archivo de manifiesto cambia. Es por eso que es una buena idea tener un comentario en su archivo, por ejemplo ” # Versión 1 “. De esta manera, cada vez que actualice el número de versión, el archivo de manifiesto se convierte en “cambiada”, y el navegador descartará su caché existente y crear una nueva caché.

 

Los archivos de caché tienen que ser servido por su servidor con el tipo MIME especial ” text / cache-manifiesto “. Esto es bastante fácil de hacer si usted está usando un servidor Apache. Sólo tiene que añadir la siguiente línea dentro de su <IfModule mime_module> sección en httpd.conf .

AddType text / manifest-manifiesto de la caché

 

Si está utilizando HTTPS en el servidor ( SSLEngine en opción en Apache), puede sólo los recursos de caché que se sirven mediante el protocolo HTTPS. Encontrar a cabo (la manera dura) acaba de perder 4 horas de mi día de hoy.

 

Para enlazar este archivo de manifiesto en nuestro archivo HTML, todo lo que necesitamos hacer es añadir otro atributo en nuestro <html> etiqueta como se muestra a continuación.

 

manifest.png

 

Ahora cuando inicio mi solicitud, es interesante ver que ninguno de los archivos Javascript o CSS se solicita a través de la red – todos están servidos desde la caché de la aplicación!

 

desde cache.png

 

Listo para rodar.

Nuestra aplicación está finalmente listo. También es genial, sólo necesita una conexión de red cuando se lance por primera vez. Incluso tiene su propia base de datos en línea IndexedDB NoSQL  para almacenar datos hasta que se inserta en el servidor.

Bastante limpio, ¿eh?

 

Como siempre, sus comentarios y críticas son bienvenidos!

Acerca de albertoarceti
Administrador de sistemas informáticos, y erps en la industria farmacéutica.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: