If you can't read please download the document
Upload
rocio-munoz
View
118
Download
0
Embed Size (px)
Citation preview
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/