Coders cantabria - Junio (Offline First)
•Descargar como ODP, PDF•
0 recomendaciones•290 vistas
El documento describe las herramientas para almacenamiento en el cliente para aplicaciones offline-first. Estas incluyen Local Storage, Session Storage, WebSQL, IndexedDB, Cache Storage y File System API. Cada una tiene propósitos específicos como almacenar pequeños datos clave-valor, bases de datos relacionales, grandes cantidades de objetos, soporte para aplicaciones en modo offline, y almacenamiento de archivos multimedia respectivamente. El enfoque offline-first asegura que las aplicaciones funcionen aunque no haya conexión a internet.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (18)
Similar a Coders cantabria - Junio (Offline First)
Similar a Coders cantabria - Junio (Offline First) (20)
Último
Último (20)
Coders cantabria - Junio (Offline First)
- 2. OFFLINE FIRST ● Offline First ● Herramientas almacenamiento en cliente – Local Storage/Session Storage – WebSql – IndexedDb – Cache Storage – File System API ● Ejemplos
- 3. 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 conexión – cuando viajamos en avión no hay conexión – nos quedamos sin datos en el movil – viajamos a un pais distinto – lugares sin buena señal
- 4. OFFLINE FIRST: FACEBOOK En estado Offline ● Podemos escribir comentarios ● Podemos enviar fotos ● Podemos darle al "like"
- 5. OFFLINE FIRST: GOOGLE MAPS En estado Offline ● Puedes visualizar mapas ● Tamaño limite 1.5GB ● Durante 30 dias
- 6. 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
- 7. 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]AppDataLocalGoogleChromeUser DataDefaultLocal Storage
- 8. 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]AppDataLocalGoogleChromeUser DataDefault Session Storage
- 9. LOCAL/SESSION STORAGE ● Métodos – 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);
- 10. 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
- 11. 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
- 12. WEB SQL
- 13. 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
- 14. INDEXED DB
- 15. CACHE APP ● Permite navegar sin conexion ● Mayor velocidad ya que los recursos están en local ● Reducción de la carga del servidor. ● El navegador solo pide al servidor lo que ha cambiado ● Necesita fichero Manifiesto <!DOCTYPE html> <html lang="es" manifest="ejemplo.appcache"> <head>
- 16. CACHE APP
- 17. FILE SYSTEM API ● Simula un sistema local de ficheros protegido en cliente ● Permite almacenar grandes cantidades de información binaria ● Alternativa a IndexedDB y WebSql I – IndexedDB 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
- 18. FILE SYSTEM API ● Tiene limitaciones – Cross Domain: no podemos acceder a ficheros fuera del dominio – No permite ficheros ejecutables – Restricción 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 conexión.
- 19. Herramientas: Resumen ● OfflineFirst: Prepara tu aplicacion para estar offline ● Herramientas – Local/Session Storage : Pequeños 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
- 20. Enlaces ● Github OfflineFirst: https://github.com/offlinefirst ● Recopilacion de ejemplos – https://github.com/pazguille/offline-first ● Cache usando serviceWorkers – https://jakearchibald.com/2014/offline-cookbook/ ● File System API – http://www.html5rocks.com/es/tutorials/file/filesystem/