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 full-size slide

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

    View full-size slide

  3. Offline NO es un error!

    View full-size slide

  4. Offline ES un estado!

    View full-size slide

  5. Offline ES mobile!

    View full-size slide

  6. Offline ES realidad!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. ● Web Storage (localStorage, indexDB)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. navigator.onLine

    View full-size slide

  21. offlinestat.es

    View full-size slide

  22. Thank you!
    @pazguille

    View full-size slide