¿Cómo pueden ejecutarse las aplicaciones basadas en navegador en un modo fuera de línea?

La pregunta se centra en el almacenamiento de datos. En el pasado, se habrían utilizado complementos del navegador (por ejemplo, Google Gears o Flash), cookies y otras funciones específicas del navegador, pero los navegadores modernos como Chrome utilizan capacidades HTML más nuevas para el almacenamiento de datos fuera de línea.

Dado que se hace referencia a Gmail sin conexión, estas son algunas de las características HTML que se pueden usar para manejar datos sin una conexión a Internet:

  1. Almacenamiento web a través de los objetos localStorage / sessionStorage. Almacenados como pares clave / valor, los objetos localStorage y sessionStorage son las formas más comunes en que las aplicaciones ‘fuera de línea’ almacenan datos en el cliente. Los objetos localStorage no tienen fecha de vencimiento, mientras que los objetos sessionStorage tienen una fecha de vencimiento, por ejemplo, la duración de la sesión de la página.
  2. Caché de aplicación. Esto implica el almacenamiento del lado del cliente de los tipos de datos específicos de la interfaz de usuario y la lógica de la aplicación. Por ejemplo: Gmail sin conexión utiliza la interfaz de usuario basada en tableta de Gmail, tal vez porque la caché de aplicaciones es más rápida o tiene menos complejidad que la interfaz web estándar.
  3. DBs indexados y / o WebSQL. Estas dos características permiten una base de datos creada localmente. WebSQL permite crear una base de datos SQL (DB) en el cliente. Las bases de datos indexadas permiten la asignación e indexación de clave / valor como en una base de datos relacional.
  4. API de archivo. Permite la interacción cliente / servidor con respecto a los datos estructurados; maneja casos de uso no atendidos por bases de datos más simples.

Dependiendo de las necesidades del usuario y el diseño de la aplicación, un desarrollador usaría alguna combinación de lo anterior para almacenar los datos en el cliente.

Usando Gmail como el ejemplo principal, la aplicación sin conexión necesitaría abordar varios tipos de datos localmente y almacenarlos dentro del perfil de Google Chrome del usuario. Ejemplos:

  • lógica de aplicación,
  • Diseño de interfaz de usuario (HTML, CSS, Javascript, iconos, etc.),
  • mensaje real y datos estructurados de contactos,
  • cookies de sesión / autenticación,
  • etc.

En un Mac OS X 10.7, puede ver dónde se encuentran los datos en su máquina. Vaya a Biblioteca → Soporte de aplicaciones → Google → Chrome → “Predeterminado” {este es mi perfil predeterminado de Chrome}.

Verás carpetas etiquetadas:

  • Caché de aplicaciones
  • bases de datos
  • Sistema de archivos
  • Almacenamiento local

Para obtener detalles significativos sobre todos los métodos de almacenamiento de archivos anteriores, consulte las especificaciones estándar de WC3 y HTML Living:

  • Caché de aplicaciones: http://www.whatwg.org/specs/web-…
  • Almacenamiento web: http://dev.w3.org/html5/webstorage/
  • SQL web: http://dev.w3.org/html5/webdatab…
  • DB indexada: http://www.w3.org/TR/IndexedDB/
  • API de archivo: http://dev.w3.org/2009/dap/file-….

Divulgación completa: solía trabajar en Google (empresa) pero no tengo idea de cómo se construye Gmail Offline.

Es hora de empezar a pensar sin conexión primero.
Este tutorial le mostrará cómo agregar funcionalidad fuera de línea a su sitio en menos de 10 minutos. Cuando haya terminado, sus visitantes ya no serán recibidos con una pantalla de error cuando visiten su sitio sin conexión … En su lugar, podrá controlar el contenido y la experiencia que obtienen.
Para obtener más información: ejecute el sitio web en modo sin conexión con UpUp Javascript Framework