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
2. Ola Gasidlo - Javascript for +10 years, full stack - Core Member of Hood.ie - Organizer of OpenTechSchool Dortmund ! twitter@misprintedtype github@zoepage
3. Agenda! 1. What & why? 2. Problems 3. New approach 4. Implementation @misprintedtype
4. What & why? @misprintedtype
5. The internet turned 25 this year! @misprintedtype
6. We grew up. @misprintedtype
7. @misprintedtype
8. amount of mobile-only web users is out of reach @misprintedtype
9. Tell me... @misprintedtype
10. @misprintedtype
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
14. Problems @misprintedtype
15. @misprintedtype
16. @misprintedtype
17. @misprintedtype
18. offline > error handling @misprintedtype
19. inform user @misprintedtype
20. @misprintedtype
21. build trust @misprintedtype
22. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this
23. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this
24. organise data @misprintedtype
25. @misprintedtype
26. decide @misprintedtype
29. @misprintedtype
30. @misprintedtype
31. @misprintedtype
32. @misprintedtype
33. @misprintedtype
37. New Approaches @misprintedtype
38. ! Rethink! (but how?) @misprintedtype
39. http://hood.ie
48. Implementation! @misprintedtype
49. files data
50. files data
51. Manifest @misprintedtype
52. Manifest ++ offline app usage ++ fast loading ++ full experience for users @misprintedtype
53. Manifest <html manifest="example.appcache">
 ...
 </html>! ! ! ! IE8+ / FF 3.5+ / Chrome 4.0+ / Safari 4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+ @misprintedtype
54. Manifest AddType text/cache-manifest .appcache ! @misprintedtype
55. Manifest CACHE MANIFEST # 2013-11-13:v3 ! CACHE index.html ! NETWORK: * 
 FALLBACK: /online.html /offline.html ! @misprintedtype
56. App Cache chrome://appcache-internals/ ! @misprintedtype
57. App Cache is a douchebag! ! http://alistapart.com/article/application-cache-is-a-douchebag
58. App Manifest ! 1. Files always come from the cache (also if you are online!) @misprintedtype
59. App Manifest ! 2. App Cache only updates if manifest changed @misprintedtype
60. App Manifest ! 3. App Cache is an additional cache @misprintedtype
61. App Manifest ! 4. Never change the manifest URL @misprintedtype
62. App Manifest ! 5. Non-cached resources will not load @misprintedtype
63. ! App Cache nanny ! ! https://www.npmjs.org/package/appcache-nanny @misprintedtype
64. Service Worker ! - Additional cache - Deals with all requests - offline first, push notifications, background sync, performance @misprintedtype
65. Service Worker ! ! ! https://github.com/slightlyoff/ServiceWorker https://jakearchibald.github.io/isserviceworkerready/ ! https://www.youtube.com/watch?v=SmZ9XcTpMS4&list=PL37ZVnwpeshGPw2RfUGNQbPsU_WGpi05J @misprintedtype
66. files data
67. files data
68. ! Do not harm humans!! (first law of robotics) @misprintedtype
69. ! Do not lose data!! (first law of offline first) @misprintedtype
70. ! ! ! ! PouchDB + CouchDB = <3 ! @misprintedtype
73. CouchDB ! @misprintedtype
74. @misprintedtype Ruth’s data
 (share with John) John’s data Ruth’s partial data (replicated)
75. PouchDB ! @misprintedtype
76. PouchDB ! @misprintedtype
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
79. ! ! hoodie <3 you! @misprintedtype / @hoodiehq! ! !