belfastJS_presentation_offline_web_final.pdf

Transcript

1. Offline & progressive web apps
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 @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
14. Not just science fiction…
16. What do I need to do this?
17. • A way to store assets offline • A way to store app information offline • A way to to do things in the background
18. A way to store assets offline
19. App cache
20. Service Worker
21. Service Worker
22. • Activate • Fetch • Sync • Push Service Worker
24. Service worker supports graceful degradation
25. A way to store app information offline
26. Local Storage • Good for small settings • Has to be a string • Synchronous, blocks page
27. Web SQL
28. Indexed DB • Pretty complicated • Implementations still differ • Missing features you would expect
29. Use a wrapper
30. A way to do things in the background
31. Web Worker
32. Service Worker
33. Great, now what?
34. Offline First
36. Why?
37. Performance
38. 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-
40. User experience
41. 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-
42. • Robustness • Less load on the server • No data loss Other advantages
43. Progressive Web Apps
44. App-like Linkable Responsive Design Progressive Enhancement Fresh Discoverable Safe Connectivity Independent Re-engagable Installable*
45. Web Manifest
47. FlipKart PWA • Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds. • 3x more time spent on site • 40% higher re-engagement rate • 70% greater conversion rate among those arriving via Add to Homescreen • 3x lower data usage
48. https://alexturnbull7.github.io/
49. Thanks! Any questions? You can find me at: ◇ @alexturnbull2 ◇ a.turnbull@kainos.com
50. • 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
51. Credits Special thanks to all the people who made and released these awesome resources for free: ◇ Presentation template by SlidesCarnival ◇ Photographs by Unsplash