Implementación de almacenamiento de clientes y aplicaciones fuera de línea HTML5

Apoyar el desarrollo de aplicaciones web fuera de línea es otro enfoque de HTML5. Las llamadas aplicaciones web sin conexión son aplicaciones que aún pueden ejecutarse incluso cuando el dispositivo no puede acceder a Internet.

El desarrollo de aplicaciones web fuera de línea requiere varios pasos. La primera es asegurarse de que la aplicación sepa si el dispositivo tiene acceso a Internet para poder realizar la acción correcta a continuación. Luego, la aplicación también debe tener acceso a ciertos recursos (imágenes, Javascript, CSS, etc.) para poder funcionar correctamente. Lo mejor es que debe haber un espacio local para que los usuarios guarden datos, y la lectura y la escritura no se verán obstaculizadas independientemente de si tienen acceso a Internet.

HTML5 y sus API relacionadas hacen realidad el desarrollo de aplicaciones fuera de línea.

Para saber si el dispositivo está en línea o fuera de línea, HTML5 define un atributo navigator.onLine. Un valor de verdadero indica que el dispositivo puede acceder a Internet y un valor de falso indica que el dispositivo está fuera de línea.

 if (navigator.onLine) { // Trabajar normalmente} else { // Realizar tareas en estado fuera de línea}

Dado que navigator.onLine tiene ciertos problemas de compatibilidad, además del atributo navigator.onLine, para determinar mejor si la red está disponible, HTML5 también define dos eventos, en línea y fuera de línea.

Estos dos eventos se activan en el objeto de ventana cuando la red cambia entre fuera de línea y en línea:

 window.addEventListener('online', function() { // Funciona normalmente}); window.addEventListener('offline', function() { // Realiza tareas sin conexión});

En aplicaciones prácticas, es mejor obtener el estado inicial a través de navigator.onLine después de cargar la página. Luego utilice los dos eventos anteriores para determinar si el estado de la conexión de red cambia. Cuando se activa el evento anterior, el valor de la propiedad navigator.onLine también cambiará, pero esta propiedad debe sondearse manualmente para detectar cambios en el estado de la red.

La caché de aplicaciones de HTML5, o appcache para abreviar, está diseñada específicamente para desarrollar aplicaciones web sin conexión. Appcache es un área de caché separada del caché del navegador. Para guardar datos en este caché, use un archivo de manifiesto que enumere los recursos que se descargarán y almacenarán en caché. Ejemplo de archivo de descripción:

 MANIFESTO DE CACHÉ# Commentfile.jsfile.css

Luego cite en html:

 <manifiesto html=./xxx.manifest>

El tipo MIME del archivo xxx.manifest debe ser texto/cache-manifest.

El núcleo de esta API es el objeto applicationCache. Este objeto tiene un atributo de estado. El valor del atributo es una constante que indica el siguiente estado actual del caché de la aplicación:

• 0: Sin caché, es decir, no hay caché de aplicación relacionado con la página
• 1: inactivo, es decir, el caché de la aplicación no se ha actualizado
• 2: Verificar, es decir, descargar el archivo de descripción y buscar actualizaciones
• 3: Descarga, es decir, el caché de la aplicación descarga los recursos especificados en el archivo de descripción.
• 4: La actualización se completa, es decir, el caché de la aplicación actualizó los recursos y todos los recursos se descargaron y se pueden usar a través de swapCache ().
• 5: Abandonado, es decir, el archivo de descripción del caché de la aplicación ya no existe, por lo que la página ya no puede acceder al caché de la aplicación.

Eventos relacionados:

• comprobación: se activa cuando el navegador busca actualizaciones en la caché de la aplicación
• error: se activa cuando ocurre un error durante la búsqueda de actualizaciones o la descarga de recursos
• noupdate: se activa al verificar el archivo de descripción y encontrar que el archivo no tiene cambios.
• descarga: se activa cuando comienza la descarga de recursos de caché de la aplicación
• progreso: se activa continuamente durante el proceso de descarga de archivos de la caché de la aplicación
• updateready: se activa cuando la nueva caché de la aplicación de la página se ha descargado y se puede usar a través de swapCache()
• caché: se activa cuando el caché de la aplicación está completamente disponible

En términos generales, estos eventos se activarán en el orden mencionado anteriormente a medida que se carga la página. Los eventos anteriores también se pueden activar manualmente llamando al método update().

Las cookies HTTP, normalmente denominadas cookies directamente, se utilizan en el cliente para almacenar información de la sesión. El estándar requiere que el servidor envíe el encabezado HTTP Set-Cookie como parte de la respuesta a cualquier solicitud HTTP, que contiene información de la sesión. Ejemplo de encabezado de respuesta del servidor:

HTTP/1.1 200 correcto

Tipo de contenido: texto/html

Establecer cookie: nombre = valor

Otro-encabezado: otro-valor-encabezado

Luego, el navegador establece cookies para la información de la sesión y luego agrega el encabezado HTTP de la cookie a cada solicitud para enviar la información al servidor, como se muestra a continuación:

OBTENER /index.html HTTP/1.1

Cookie: nombre=valor

Otro-encabezado: otro-valor-encabezado

La información adicional enviada al servidor se puede utilizar para verificar de forma única de qué solicitud proviene el cliente.

Las cookies completas incluyen:

1. Nombre: Un nombre que identifica de forma única la cookie. Debe estar codificado en URL.
2. Valor: el valor de la cadena almacenado en la cookie. Debe estar codificado en URL.
3. Dominio: El dominio para el que la cookie es válida.
4. Ruta: para esa ruta en el dominio especificado, se debe enviar una cookie al servidor.
5. Hora de vencimiento: una marca de tiempo que indica cuándo se debe eliminar la cookie.
6. Bandera de seguridad: cuando se especifica, la cookie solo se envía al servidor cuando se utiliza una conexión SSL.