Growth of mobile web traffic has been outpacing desktop web traffic for years, and data reveals that users are likely to abandon experiences that too long to load. Progressive web apps aim to be reliable, fast and engaging, regardless of form factor or quality of internet connection. We'll walk through several key aspects of PWAs, illustrating performance and usability improvements by showing quantitative comparisons to an equivalent "classic SPA".

1. Anatomy of a
Progressive Web App
January 20, 2017
Michael North
Agent Conf

2. 2007

6. A lot has changed since 2012

7. Benefits of Each
Approach
WebNative
• Presence on home screen
• Background functionality
• Fast return startup
• Doesn’t require install
• Cross-Platform
• Very similar to desktop web experience

8. Vs

10. Progressive Web Apps

11. Hello!
Formerly Now
• CTO
• UI Architect @
• Lead Engineer @ Imagequix
• Training Partner @
• Staff Engineer @
• Instructor @

12. Major Pieces
Pruning the Critical Path
Tolerating Network Instability
App-Like Characteristics

13. Important Metrics
Pruning the Critical Path
🎨First Paint
👆Interactive
Time to…
📊Data

14. index.html
app.css
app.js
data.json
API
🖥User
Asset Storage
1
2
4
5
6
Static Hosting
3
☁CDN
🎨
First Paint
👆
Interactive
parse
📊
Data
🎨
boot
👆 📊
Client
Rendered
SPA

15. Server-Side Rendering
• ⏱ Don’t have to wait for client-side JS
• 🔗 Better for SEO & sharing links
• ⚠ Node.js and the Browser are different
• 👷 Try not to do the same work twice
• ⚡ HTML is assembled in your data center

16. index.html
app.css
app.js
data.json
API
🖥User
Asset Storage
1
2
6
7
8
Rendering
Server
5
☁CDN
🎨
First Paint
👆
Interactive
parse
📊
Data
🎨
boot
👆📊
Server
Rendered
SPA
3
4

17. Resource Caching Strategies
• Content at a URL is never
changed
• max-age=year
• index.html is the key
• Offline-friendly
• Content at a URL can change
• Cache-Control: no-cache
• Use Last-Modified or ETag
• Involves extra network
requests
Immutable Content “Check w/ server”

18. Service Workers
• A programmable network proxy
• A JavaScript worker
• Only works over HTTPS
• Has a predictable lifecycle
XHR SW WWW
Cache

19. Service Workers
Installing
Activated Error
Idle
FetchTerminated

20. Service Workers
I need item.pngApp
Of course! Here it is.
I have a list of important
resources. I’ll fetch them
all and cache them.
Cache
Precache
🖼

21. Service Workers
App
Just got it for you!
Ok, I’ll get it
Cache
Network or Cache
🖼
I need item.png

22. Service Workers
Took too long. Here’s a
cached version🖼
App
Ok, I’ll get it
Cache
Network or Cache
I need item.png

23. Service Workers
App
Ok, I’ll get it
Cache
Network or Cache
I need item.png
Something went wrong.
Here’s a cached version🖼

24. Service Workers
App
I’ll go download a new
copy in case it changed
Here’s a cached version
Cache
Cache and Update
🖼
I need item.png
Next time you ask, you’ll
get this new version

25. Service Workers
App
I’ll go download a new
copy in case it changed
Here’s a cached version
Cache
Cache, Update and Refresh
🖼
I need item.png
Hey! I’ve got a new
version. Ask me for itpostMessage
🎆

26. Service Workers

27. index.html
app.css
app.js
data.json
API
🖥User
Asset Storage
1
2
6
7
8
Rendering
Server
5
☁CDN
🎨
First Paint
👆
Interactive
parse
📊
Data
🎨
boot
👆📊
Server
Rendered
SPA
3
4

28. index.html
.css
.js data.json
API
🖥User
Asset Storage
1
2
6
7
8
Rendering
Server
5
☁CDN
🎨
First Paint
👆
Interactive
parse
📊
Data
🎨
boot
👆📊
Server
Rendered
PWA v1
3
4
Service
Worker
⚙

29. Storing Dynamic Content
• Cookies - Not worker-friendly, just a string
• LocalStorage - See 👆
• What’s left???

30. Storing Dynamic Content
• Cookies - Not worker-friendly, just a string
• LocalStorage - See 👆
IndexedDB

31. IndexedDB
• 🔢 Versioned
• 🗃 Indexable
• ⚙ Worker-Friendly
• 📅 Durable
• 🔣 Supports values of many types
• ⚠ Not a SQL, or a relational DB

32. IndexedDB
!// Open (or create) the database
let open =
indexedDB.open('MyDatabase', 1);
!// Create and/or Migrate the Schema
open.onupgradeneeded = (evt) !=> {
!// Transactions
open.onsuccess = () !=> {
!!... };
!!... };

33. IndexedDB
!// Create and/or Migrate the Schema
open.onupgradeneeded = (evt) !=> {
};
let db = open.result;
let store = null;
switch (evt.oldVersion) {
case 0: !// Upgrade from 0
!// !!...
case 1: !// Upgrade from 1
!// !!...
}

34. IndexedDB
!// Open (or create) the database
let open =
indexedDB.open('MyDatabase', 1);
!// Create and/or Migrate the Schema
open.onupgradeneeded = (evt) !=> {
!// Transactions
open.onsuccess = () !=> {
!!... };
!!... };

35. IndexedDB

36. App Shell Architecture
Shell loads instantly Dynamic content in the shell

37. index.html
.css
.js data.json
API
🖥User
Asset Storage
1
2
6
7
8
Rendering
Server
5
☁CDN
🎨
First Paint
👆
Interactive
parse
📊
Data
🎨
boot
👆📊
Server
Rendered
PWA v1
3
4
Service
Worker
⚙

38. index.html
.css
.js data.json
API
🖥User
Asset Storage
1
2
6
7
8
Rendering
Server
5
☁CDN
🎨
First Paint
👆
Interactive
parse
📊
Data
🎨
boot
👆📊
Server
Rendered
PWA v2
3
4
Service
Worker
⚙
99
shell html
First Visit
💾
IndexedDB
99
Records

39. LocalRem
ote
shell.html
.css
.js
IndexedDB
API
🖥User
Asset Storage
4
7
8
Rendering
Server
3
☁CDN
🎨
First Paint
👆
Interactive
parse
📊
Data
🎨
boot
👆 📊
Server
Rendered
PWA v2
Service
Worker
⚙
Return Visit
2
1
💾
IndexedDB
5
6
data.json

40. Major Pieces
Pruning the Critical Path
Tolerating Network Instability
App-Like Characteristics
✅
✅

41. App-Like Characteristics

42. App-Like Characteristics
<meta name="apple-mobile-web-app-capable" content="yes">
Get rid of browser UI
App Icons
<link sizes=“180x180" rel=“apple-touch-icon" href="icon.png">
<meta name="mobile-web-app-title" content="Mike.Works">
Bookmark Name
<link href="splash.png" rel="apple-touch-startup-image">
Splash Screen

43. App-Like Characteristics
{
"name": "Mike.Works - World Class Developer Training",
"short_name": "Mike.Works",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#fff",
"description": "World Class Developer Training",
"orientation": "portrait-primary",
"lang": "en-US",
"icons": [ ]
};
manifest.json

44. App-Like Characteristics

45. In The Future…
• 💬 Push Notifications
• 🔁 Background Sync
• ⚛ First-Class Framework Support
• 📦 IndexedDB 2.0
• ⚡ HTTP/2 Optimizations

46. This is getting very
complicated…

47. Reduce the # of
decisions you must make
🤔

48. You will be building
these things…

49. Get Trained.

50. Get Trained.
https://mike.works