The offline web - not an oxymoron

Transcript

1. The offline web – not an oxymoron
2. “ Offline is not an error Offline is a fact of mobile life An app that doesn’t work offline is broken
3. Alex Turnbull Software Engineer Kainos Software, Belfast @alexturnbull2
4. But first…
5. Some offline experiences
6. Not an edge case?
7. Offline isn’t our biggest enemy
8. Better experience?
9. Best experience?
10. But?
12. Demo time
16. Not just science fiction…
18. What do I need to do this?
19. • A way to store assets offline • A way to store app information offline • A way to to do things in the background
20. A way to store assets offline
21. App cache
22. Service Worker
23. • Install • Activate • Fetch • Sync • Push Service Worker
25. Service worker supports graceful degradation
26. A way to store app information offline
27. Local Storage • Good for small settings • Has to be a string • Synchronous, blocks page
28. Web SQL
29. Indexed DB • Pretty complicated • Implementations still differ • Missing features you would expect
30. Use a wrapper
31. A way to do things in the background
32. Web Worker
33. Service Worker
34. Great, now what?
35. Not just mobile first, offline first
37. Why?
38. Performance
39. 1.7 Billion Slow-loading websites cost retailers £1.73bn in lost sales each year. 46% 46% would not return to a poor performing site. 74% 74% of users will abandon after waiting five seconds for a mobile site to load. Performance Matters! https://econsultancy.com/blog/9790-slow-loading-websites-cost-retailers-1-
41. User experience
42. 88% of online consumers are less likely to return to a site after a bad experience. https://econsultancy.com/blog/10936-site-speed-case-studies-tips-and-
43. • Robustness • Less load on the server • No data loss Other advantages
44. 1 Billion expected to come online in India 30 million new internet users at the end of 2014 in India alone http://www.internetlivestats.com/internet-users-by-country/ Other advantages
45. 87% of mobile connections in India are 2G / 60kbs https://gsmaintelligence.com/research/2014/05/measuring-mobile-
46. 15 page loads = 1 hours work at minimum wage in India http://blog.jana.com/2015/05/21/the-data-trap-affordable-smartphones-
47. Providing a fast, reliable, network non dependant experience is really important
48. Polymer
49. • Not just mobile first, build offline first • So many advantages! • We can do this today with existing web technology
50. Thanks! Any questions? You can find me at: ◇ @alexturnbull2 ◇ a.turnbull@kainos.com
51. • Introduction to Service Worker • Video – The ServiceWorker: The network layer is yours to own • Jake Archibald – Offline cookbook • Video – Polymer Going offline • Service Worker draft specification • W3C samples • Making Your App Work Offline: Tips and Cautionary Tales • Tamper Requests With Service Workers • JavaScript Promises • Offline Dropwizard App
52. Credits Special thanks to all the people who made and released these awesome resources for free: ◇ Presentation template by SlidesCarnival ◇ Photographs by Unsplash