AYB14 - offline first <3

not including notes

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