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

AYB14 - offline first <3

AYB14 - offline first <3

not including notes

Ola Gasidlo

October 17, 2014
Tweet

More Decks by Ola Gasidlo

Other Decks in Programming

Transcript

  1. !
    Say Hello To Offline First
    How to build applications for
    the real world
    we <3 AYB

    View Slide

  2. Ola Gasidlo
    - Javascript for +10 years, full stack
    - Core Member of Hood.ie
    - Organizer of OpenTechSchool Dortmund
    !
    twitter@misprintedtype
    github@zoepage

    View Slide

  3. Agenda!
    1. What & why?
    2. Problems
    3. New approach
    4. Implementation
    @misprintedtype

    View Slide

  4. What & why?
    @misprintedtype

    View Slide

  5. The internet turned 25 this year!
    @misprintedtype

    View Slide

  6. We grew up.
    @misprintedtype

    View Slide

  7. @misprintedtype

    View Slide

  8. amount of mobile-only web users is out of reach
    @misprintedtype

    View Slide

  9. Tell me...
    @misprintedtype

    View Slide

  10. @misprintedtype

    View Slide

  11. View Slide

  12. “WE CAN’T KEEP BUILDING APPS WITH THE
    DESKTOP MINDSET OF PERMANENT, FAST
    CONNECTIVITY, WHERE A TEMPORARY
    DISCONNECTION OR SLOW SERVICE IS
    REGARDED AS A PROBLEM AND
    COMMUNICATED AS AN ERROR.”
    @misprintedtype

    View Slide

  13. View Slide

  14. Problems
    @misprintedtype

    View Slide

  15. @misprintedtype

    View Slide

  16. @misprintedtype

    View Slide

  17. @misprintedtype

    View Slide

  18. offline > error handling
    @misprintedtype

    View Slide

  19. inform user
    @misprintedtype

    View Slide

  20. @misprintedtype

    View Slide

  21. build trust
    @misprintedtype

    View Slide

  22. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

    View Slide

  23. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

    View Slide

  24. organise data
    @misprintedtype

    View Slide

  25. @misprintedtype

    View Slide

  26. decide
    @misprintedtype

    View Slide

  27. View Slide

  28. View Slide

  29. @misprintedtype

    View Slide

  30. @misprintedtype

    View Slide

  31. @misprintedtype

    View Slide

  32. @misprintedtype

    View Slide

  33. @misprintedtype

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. New Approaches
    @misprintedtype

    View Slide

  38. !
    Rethink!
    (but how?)
    @misprintedtype

    View Slide

  39. http://hood.ie

    View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. Implementation!
    @misprintedtype

    View Slide

  49. files data

    View Slide

  50. files data

    View Slide

  51. Manifest
    @misprintedtype

    View Slide

  52. Manifest
    ++ offline app usage
    ++ fast loading
    ++ full experience for users
    @misprintedtype

    View Slide

  53. Manifest

    ...

    !
    !
    !
    !
    IE8+ / FF 3.5+ / Chrome 4.0+ / Safari 4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+
    @misprintedtype

    View Slide

  54. Manifest
    AddType text/cache-manifest .appcache
    !
    @misprintedtype

    View Slide

  55. Manifest
    CACHE MANIFEST
    # 2013-11-13:v3
    !
    CACHE
    index.html
    !
    NETWORK:
    *

    FALLBACK:
    /online.html /offline.html
    ! @misprintedtype

    View Slide

  56. App Cache
    chrome://appcache-internals/
    !
    @misprintedtype

    View Slide

  57. App Cache
    is a douchebag!
    !
    http://alistapart.com/article/application-cache-is-a-douchebag

    View Slide

  58. App Manifest
    !
    1. Files always come from the cache
    (also if you are online!)
    @misprintedtype

    View Slide

  59. App Manifest
    !
    2. App Cache only updates if manifest changed
    @misprintedtype

    View Slide

  60. App Manifest
    !
    3. App Cache is an additional cache
    @misprintedtype

    View Slide

  61. App Manifest
    !
    4. Never change the manifest URL
    @misprintedtype

    View Slide

  62. App Manifest
    !
    5. Non-cached resources will not load
    @misprintedtype

    View Slide

  63. !
    App Cache nanny
    !
    !
    https://www.npmjs.org/package/appcache-nanny
    @misprintedtype

    View Slide

  64. Service Worker
    !
    - Additional cache
    - Deals with all requests
    - offline first, push notifications, background sync,
    performance
    @misprintedtype

    View Slide

  65. Service Worker
    !
    !
    !
    https://github.com/slightlyoff/ServiceWorker
    https://jakearchibald.github.io/isserviceworkerready/
    !
    https://www.youtube.com/watch?v=SmZ9XcTpMS4&list=PL37ZVnwpeshGPw2RfUGNQbPsU_WGpi05J
    @misprintedtype

    View Slide

  66. files data

    View Slide

  67. files data

    View Slide

  68. !
    Do not harm humans!!
    (first law of robotics)
    @misprintedtype

    View Slide

  69. !
    Do not lose data!!
    (first law of offline first)
    @misprintedtype

    View Slide

  70. !
    !
    !
    !
    PouchDB + CouchDB = <3
    !
    @misprintedtype

    View Slide

  71. View Slide

  72. View Slide

  73. CouchDB
    !
    @misprintedtype

    View Slide

  74. @misprintedtype
    Ruth’s data

    (share with John)
    John’s data
    Ruth’s partial data
    (replicated)

    View Slide

  75. PouchDB
    !
    @misprintedtype

    View Slide

  76. PouchDB
    !
    @misprintedtype

    View Slide

  77. PouchDB
    !
    browser storage limitation confirm
    Firefox IndexedDB unlimited y
    Chrome / Opera /
    Android 4.4+
    IndexedDB % of storage y
    IE 10+ SQLite 250MB n
    Mobile Safari WebSQL 50MB n
    Sarafi WebSQL 5MB -> 500MB y
    Android 4.3 and
    lower
    IndexedDB 200MB n

    View Slide

  78. View Slide

  79. !
    !
    hoodie <3 you!
    @misprintedtype / @hoodiehq!
    !
    !

    View Slide