Slide 1
Slide 1 text
Offline First
@pazguille
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Funcionalidad core
UX! (css)
Más UX! (JavaScript)
Slide 5
Slide 5 text
Offline NO es un error!
Slide 6
Slide 6 text
Offline ES un estado!
Slide 7
Slide 7 text
Offline ES mobile!
Slide 8
Slide 8 text
Offline ES realidad!
Slide 9
Slide 9 text
E
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Che, cuál era
la dirección??
Slide 12
Slide 12 text
Nose chabón,
no tengo wifi y
el 3g anda
como el ort*!
Slide 13
Slide 13 text
http://opensignal.com/coverage-maps/
Slide 14
Slide 14 text
Why?
Slide 15
Slide 15 text
UX
Slide 16
Slide 16 text
Performance
Slide 17
Slide 17 text
Security
Slide 18
Slide 18 text
How?
Slide 19
Slide 19 text
● Separar Data - App (templates, assets)
Slide 20
Slide 20 text
● Separar Data - App (templates, assets)
● Servir App (templates, assets)
Slide 21
Slide 21 text
● Separar Data - App (templates, assets)
● Servir App (templates, assets)
● Guardar Data offline
Slide 22
Slide 22 text
● Separar Data - App (templates, assets)
● Servir App (templates, assets)
● Guardar Data offline
● Detectar conexión
Slide 23
Slide 23 text
● Separar Data - App (templates, assets)
● Servir App (templates, assets)
● Guardar Data offline
● Detectar conexión
● Sincronizar la Data (dificil)
Slide 24
Slide 24 text
Tools
Slide 25
Slide 25 text
● Web Storage (localStorage, indexDB)
Slide 26
Slide 26 text
● Web Storage (localStorage, indexDB)
● AppCache (manifest.appcache)
Slide 27
Slide 27 text
● Web Storage (localStorage, indexDB)
● AppCache (manifest)
● ServiceWorkers
Slide 28
Slide 28 text
● Web Storage (localStorage, indexDB)
● AppCache (manifest)
● ServiceWorkers
● Hood.ie
Slide 29
Slide 29 text
● Web Storage (localStorage, indexDB)
● AppCache (manifest)
● ServiceWorkers
● Hood.ie
● PouchDB
Slide 30
Slide 30 text
navigator.onLine
Slide 31
Slide 31 text
Examples
Slide 32
Slide 32 text
offlinestat.es
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Thank you!
@pazguille