Going “Offline First”
Google Progressive Web Apps Roadshow
(Sub-Saharan Africa)
Slide 2
Slide 2 text
• Ire Aderinokun
• UI Designer and Front-End Developer
• Head of Technology, Big Cabal
• Google Developer Expert (Web
Technologies)
Slide 3
Slide 3 text
The Problem of Offline
Slide 4
Slide 4 text
The “Offline First” Model
Slide 5
Slide 5 text
Part 1
The Theory
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Step 1
Architect the App Shell
Slide 8
Slide 8 text
The App Shell Model
Slide 9
Slide 9 text
Why use the App Shell Model?
https://developers.google.com/web/updates/2015/11/app-shell
Slide 10
Slide 10 text
Why use the App Shell Model? (cont.)
vs
Slide 11
Slide 11 text
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?
Slide 12
Slide 12 text
Step 2
Implement the App Shell
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Step 3
Start with a “Fast First” Load
Slide 15
Slide 15 text
Progressive Web Apps should start fast and be usable
immediately
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)
Slide 18
Slide 18 text
Step 4
Use Service Workers to
Pre-Cache the App Shell
Slide 19
Slide 19 text
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.
Cache the App Shell and Assets
https://github.com/GoogleChrome/sw-toolbox
Slide 26
Slide 26 text
Serve the App Shell from Cache
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Step 5
Use Service Workers to
Cache Fetched Data
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Cache Fetched Data
http://www.html5rocks.com/en/tutorials/service-worker/introduction/#lifecycle
Slide 32
Slide 32 text
Step 6
Support Native Integration
Slide 33
Slide 33 text
Web App Install Banners
for Chrome/Opera on Android
Slide 34
Slide 34 text
Web App Manifest
Slide 35
Slide 35 text
Add to Homescreen Elements
for Safari
http://www.imore.com/ios-7-review
Slide 36
Slide 36 text
Apple Mobile Web App Metadata
Slide 37
Slide 37 text
Tile Icon for Windows
Slide 38
Slide 38 text
Microsoft Web App Metadata
Slide 39
Slide 39 text
Step 7
Deploy to a Secure Host
Slide 40
Slide 40 text
Prepare Assets for Production
• Minify HTML
• Concatenate and minify JavaScript
• Minify CSS (and optionally inline Critical CSS)
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
Step 8
Testing and Audits
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
https://github.com/trungdq88/github-explorer
Slide 45
Slide 45 text
Part 2
Putting it to Practice
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
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