Upgrade to Pro — share decks privately, control downloads, hide ads and more …

#OfflineFirst

Guille Paz
April 29, 2015

 #OfflineFirst

#OfflineFirst: It's time to think about offline as an application state. Offline is not an error, is a use-case that anyone think about it.

Links:
https://github.com/pazguille/offline-first
http://offlinestat.es
http://opensignal.com/coverage-maps/
http://gabrielecirulli.github.io/2048/

Guille Paz

April 29, 2015
Tweet

More Decks by Guille Paz

Other Decks in Technology

Transcript

  1. Offline First
    @pazguille

    View Slide

  2. View Slide

  3. View Slide

  4. Funcionalidad core
    UX! (css)
    Más UX! (JavaScript)

    View Slide

  5. Offline NO es un error!

    View Slide

  6. Offline ES un estado!

    View Slide

  7. Offline ES mobile!

    View Slide

  8. Offline ES realidad!

    View Slide

  9. E

    View Slide

  10. View Slide

  11. Che, cuál era
    la dirección??

    View Slide

  12. Nose chabón,
    no tengo wifi y
    el 3g anda
    como el ort*!

    View Slide

  13. http://opensignal.com/coverage-maps/

    View Slide

  14. Why?

    View Slide

  15. UX

    View Slide

  16. Performance

    View Slide

  17. Security

    View Slide

  18. How?

    View Slide

  19. ● Separar Data - App (templates, assets)

    View Slide

  20. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)

    View Slide

  21. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)
    ● Guardar Data offline

    View Slide

  22. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)
    ● Guardar Data offline
    ● Detectar conexión

    View Slide

  23. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)
    ● Guardar Data offline
    ● Detectar conexión
    ● Sincronizar la Data (dificil)

    View Slide

  24. Tools

    View Slide

  25. ● Web Storage (localStorage, indexDB)

    View Slide

  26. ● Web Storage (localStorage, indexDB)
    ● AppCache (manifest.appcache)

    View Slide

  27. ● Web Storage (localStorage, indexDB)
    ● AppCache (manifest)
    ● ServiceWorkers

    View Slide

  28. ● Web Storage (localStorage, indexDB)
    ● AppCache (manifest)
    ● ServiceWorkers
    ● Hood.ie

    View Slide

  29. ● Web Storage (localStorage, indexDB)
    ● AppCache (manifest)
    ● ServiceWorkers
    ● Hood.ie
    ● PouchDB

    View Slide

  30. navigator.onLine

    View Slide

  31. Examples

    View Slide

  32. offlinestat.es

    View Slide

  33. View Slide

  34. Thank you!
    @pazguille

    View Slide