Going "Offline First"

This talk was about how to create an "Offline First" Progressive Web Application.

For the Google Progressive Web Apps Roadshow in Sub-Saharan Africa (Nairobi and Lagos)

Transcript

1. Going “Offline First” Google Progressive Web Apps Roadshow (Sub-Saharan Africa)
2. • Ire Aderinokun • UI Designer and Front-End Developer • Head of Technology, Big Cabal • Google Developer Expert (Web Technologies)
3. The Problem of Offline
4. The “Offline First” Model
5. Part 1 The Theory
6. The Steps 1. Architect the App Shell 2. Implement the App Shell 3. Start with a “Fast First” Load 4. Use Service Workers to Pre-Cache the App Shell 5. Use Service Workers to Cache Fetched Data 6. Support Native Integration 7. Deploy to a Secure Host (and Celebrate ) 8. Audits and Testing
7. Step 1 Architect the App Shell
8. The App Shell Model
9. Why use the App Shell Model? https://developers.google.com/web/updates/2015/11/app-shell
10. Why use the App Shell Model? (cont.) vs
11. Designing an App Shell • What needs to be on the screen immediately? • What other UI components are key to the application? • What supporting resources are needed for the application?
12. Step 2 Implement the App Shell
13. The Components • The HTML — Should include the key components of the application that are repeated on each visit • The CSS — Styles for the key components • The JavaScript — Scripts for UI Components (e.g. slide-out navigation) and scripts for main application logic
14. Step 3 Start with a “Fast First” Load
15. Progressive Web Apps should start fast and be usable immediately
16. https://www.youtube.com/watch?v=qDJAz3IIq18&index=5&list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb
17. Store Data Locally with IndexedDB IndexedDB is a low-level API for client-side storage of significant amounts of structured data • JavaScript-based object-oriented • Asynchronous operations • Global storage limit of 50% of free disk space (More about storage limits - https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_evicti on_criteria)
18. Step 4 Use Service Workers to Pre-Cache the App Shell
19. What is a Service Worker? A service worker is a script that runs in the background that can provide features like intercepting and handling fetch requests, background sync, push notifications and more.
21. https://jakearchibald.github.io/isserviceworkerready/
24. Register the Service Worker
25. Cache the App Shell and Assets https://github.com/GoogleChrome/sw-toolbox
26. Serve the App Shell from Cache
28. Step 5 Use Service Workers to Cache Fetched Data
31. Cache Fetched Data http://www.html5rocks.com/en/tutorials/service-worker/introduction/#lifecycle
32. Step 6 Support Native Integration
33. Web App Install Banners for Chrome/Opera on Android
34. Web App Manifest
35. Add to Homescreen Elements for Safari http://www.imore.com/ios-7-review
36. Apple Mobile Web App Metadata
37. Tile Icon for Windows
38. Microsoft Web App Metadata
39. Step 7 Deploy to a Secure Host
40. Prepare Assets for Production • Minify HTML • Concatenate and minify JavaScript • Minify CSS (and optionally inline Critical CSS)
41. Choose a Secure Host • Github Pages — Free, Open Source • Firebase Hosting — Free, Closed Source, Easy HTTPS with Custom Domain Or just get the certificate - • LetsEncrypt.org
42. Step 8 Testing and Audits
43. Lighthouse Auditing and performance metrics for Progressive Web Apps • Chrome Extension - https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefeh nmjammfjpmpbjk • CLI - npm install -g GoogleChrome/lighthouse
44. https://github.com/trungdq88/github-explorer
45. Part 2 Putting it to Practice
47. The Steps 1. Architect the App Shell 2. Implement the App Shell 3. Start with a “Fast First” Load 4. Use Service Workers to Pre-Cache the App Shell 5. Use Service Workers to Cache Fetched Data 6. Support Native Integration 7. Deploy to a Secure Host (and Celebrate ) 8. Audits and Testing
48. Let’s Code! Starter Files - bit.ly/offlinefx App - offline-fx.firebaseapp.com
51. Thank You! www.ireaderinokun.com @ireaderinokun