OFFLINE FIRST

https://github.com/rocimunoz/WebStorage@roci_munoz

OFFLINE FIRST

Offline First

Herramientas almacenamiento en cliente Local Storage/Session Storage

WebSql

IndexedDb

Cache Storage

File System API

Ejemplos

OFFLINE FIRST

Nuevo paradigma de las aplicaciones web y moviles

Prepara las aplicaciones para que respondan en modo offline

Estar offline NO ES UN ERROR, ES UN ESTADO una persona en el metro no tiene conexin

cuando viajamos en avin no hay conexin

nos quedamos sin datos en el movil

viajamos a un pais distinto

lugares sin buena seal

OFFLINE FIRST: FACEBOOK

En estado Offline Podemos escribir comentarios

Podemos enviar fotos

Podemos darle al "like"

OFFLINE FIRST: GOOGLE MAPS

En estado Offline Puedes visualizar mapas

Tamao limite 1.5GB

Durante 30 dias

OFFLINE FIRST: GOOGLE MAPS

En estado Offline Puedes ver muchos tuits que han sido cacheados

Puedes ver notificaciones cacheadas

No te avisa de que estas en modo offline

Problemas en los mensajes directos y edicion del perfil

LOCAL STORAGE

Almacenamiento clave/valor

Limite de espacio entre 2-10 Mb (segun navegador)

Solo permite almacenar cadenas de texto

Los datos almacenados no expiran

Se almacenan en un fichero sqlite en el perfil del navegador C:\Users\[USERNAME]\AppData\Local\Google\Chrome\User Data\Default\Local Storage

SESSION STORAGE

Almacenamiento clave / valor

Limite de espacio entre 2-10 Mb (segun navegador)

Solo permite almacenar cadenas de texto

Los datos almacenados se pierden al cerrar el navegador

Se almacenan en un fichero sqlite en el perfil del navegador

En chrome C:\Users\[USERNAME]\AppData\Local\Google\Chrome\User Data\Default\ Session Storage

LOCAL/SESSION STORAGE

Mtodos getItem(key) : consulta una clave

setItem(key, value) : modifica el valor de un registro

removeItem(key): elimina un registro

clear : borra todos los registros

Eventos window.addEventListener("storage",funcionEvento, false);

WEB SQL

Base de datos relacional en el lado del cliente

No tiene soporte de la W3C desde el 18 Noviembre del 2010

No es parte de la especificacion HTML 5

Firefox y Explorer no dan soporte

Chrome, Safari y Opera tienen soporte

WEB SQL

Basado en SqLite

Limite de 5Mb

Metodos openDatabase(nombre, version, descripcion, tamano)

transaction : gestiona la transaccion

executeSql: ejecuta las querys

Ejemplo: http://html5demos.com/database-rollback

WEB SQL

INDEXED DB

Sistema de almacenamiento local para grandes cantidades

Orientada a objetos la base de datos es un contenedor de objetos

las tablas son objetos

Espacio ilimitado (50Mb en Firefox)

Proporciona 2 APIS separados acceso sincrono : no est soportado (serviceWorkers)

acceso asincrono: uso de callbacks

No utiliza SQL

INDEXED DB

CACHE APP

Permite navegar sin conexion

Mayor velocidad ya que los recursos estn en local

Reduccin de la carga del servidor.

El navegador solo pide al servidor lo que ha cambiado

Necesita fichero Manifiesto

CACHE APP

FILE SYSTEM API

Simula un sistema local de ficheros protegido en cliente

Permite almacenar grandes cantidades de informacin binaria

Alternativa a IndexedDB y WebSql IIndexedDB no permite trabajar con Blobs

WebSql dejo de tener soporte

Almacenamiento de 2 tipos temporal: se borra a decision del navegador (5 Mb)

persistente: el usuario lo borra. Necesita permisos

FILE SYSTEM API

Tiene limitaciones Cross Domain: no podemos acceder a ficheros fuera del dominio

No permite ficheros ejecutables

Restriccin de nombres "Mis Documentos"

No permite acceso file:// (es virtual)

Ejemplo de uso App de musica: El usuario selecciona una cancion. La primera vez se descarga. Si quiere volver a escucharla se recoge de File System API

Subida de N Ficheros con cortes de conexin.

Herramientas: Resumen

OfflineFirst: Prepara tu aplicacion para estar offline

Herramientas Local/Session Storage : Pequeos datos en cliente clave/valor

WebSql: BD Relacionales en cliente. No soporte W3C

IndexedDB: Almacenamiento de objetos en cliente. Util con grandes cantidades de datos. No soporta Blobs

Cache: Soporte para que tu aplicacion funcione en offline

File System API: Soporte para ficheros en cliente. Grandes cantidades de datos. Manejo de Blobs

Enlaces

Github OfflineFirst: https://github.com/offlinefirst

Recopilacion de ejemploshttps://github.com/pazguille/offline-first

Cache usando serviceWorkershttps://jakearchibald.com/2014/offline-cookbook/

File System API http://www.html5rocks.com/es/tutorials/file/filesystem/