Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Service Workers, PWAs, PRPL, 

and What's Next for Mobile
+Alex Russell
@slightlylate
Chrome is
Performance
Obsessed
Current Perf Projects:
120
Recent & Ongoing Perf Highlights
Service Workers
Save-Data Header
HTTP/2
QUIC
Streams
Intersection Observer API
V8: Igniti...
Recent & Ongoing Perf Highlights
Service Workers
Save-Data Header
HTTP/2
QUIC
Streams
Intersection Observer API
V8: Igniti...
Faster is better.
Source: SOASTA, 2015
2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4...
flickr.com/photos/monado/4405843023
Service workers enable reliable performance
Web server
Service worker
Client side proxy written 

in JavaScript
Cache
example.com
GET	
  /app.html	
  HTTP/1.1	
  
HOST	
  example.com	
  
...
HTTP/1.1	
  200	
  OK	
  
Date:	
  Thu,	
  19	
  ...
example.com
//	
  sw.js	
  
onfetch	
  =	
  function(e)	
  {	
  
	
  	
  if(e.request.url	
  ==	
  "app.html")	
  {	
  
	
...
Progressive Web Apps
Capability
Web
Capability
Reach
App
Web
*
Web
Capability
Reach
App
WebWeb
PWA
Web App Manifests
<link rel="manifest" href="/path/to/manifest.json">
www.washingtonpost.com/pwa/manifest.json
{

"lang": "en",

"short_name": "Wash Post",

"name": "The Washington Post",

"ic...
github.com/GoogleChrome/lighthouse
The RAIL Performance Model
Respond, Animate, Idle, Load
"Respond: 100ms
"Animate: 8ms
"Idle work: 50ms chunks
"Load: 1000ms to
interactive
Source: Paul Lewis
Source: Paul Lewis
Source: Paul Lewis
Mobile's Harder Than It Looks
DOMContentLoaded at 700ms!
Total JS Time < 600ms
onload at 1500ms Smooth animations
Interactive at ~4s
All the jank, all the time
DOMContentLoaded at 2500ms
Script locks UI thread for 2 seconds
onload at 5.7s
Interactive at ~...
Instant first paint w/ Server Render!
Fully loaded & interactive at 500ms!
Total JS Time: ~1 second
First paint is fast
UI thread is locked for 10 seconds
Server-rendered spinner feels stuck
Interactive at ~12 seconds
Interactive at 400ms...yawn?
Total JS is 200ms...so?
Everything that paints is interactive
Additional work is chunked to stay responsive
First paint acknowledges user earlyInt...
#usetheplatform
How we got to 12s of JS…
App bundling
App
Bundle
https://shop/list/ladies_outerwear
Shop - List
Ladies Outerwear Server
Per-route bundling
https://shop/list/ladies_outerwear
Shop - List
Ladies Outerwear Server
list
button
tabs
Optimal /list
b...
https://shop/cart
Shop - Cart
Per-route bundling
Server
list
button
icon-button
Shopping Cart
Optimal /cart
bundle
Per-route bundling
list
button
icon-button
Optimal /cart
bundle
list
button
tabs
Optimal /list
bundle
Duplicated
modules
HTTP/2 to the rescue
Browser Server
All subresources can
be fetched in parallel
RESPONSE
GET: index.html
GET: subresources
RESPONSE
HTTP/2
RESPONSE
GET: index.html
Browser Server
GET: subresources
RESPONSE
Transitive dependencies
discovered & requested
RESPONSE...
GET: index.html
Browser Server
RESPONSE
Transitive dependencies
preemptively pushed
HTTP/2 + Server Push
Response Headers:
content-encoding:
content-length:
content-type:
link:
…
gzip
385
text/html
</shop-app.html>;rel=preload;...
<link rel=“import” href=“polymer.html”>
<link rel=“import” href=“iron-pages.html”>
<link rel=“import” href=“list-view.html...
<link rel=“import” href=“iron-pages.html”>
<link rel=“import” href=“list-view.html”>
<link rel=“import” href=“detail-view....
tabs
button
list
…
Cold cache:
Only load code
critical for /list route
icon-buttonicon
header
drawer
1. Push components fo...
2. Render initial route asap
https://shop/list
3. Pre-cache remaining components
…
…
Code for secondary
routes pre-cached
lazily
https://shop/list
4. Lazy load & create secondary route
https://shop/cart
Push
Render
Pre-cache
Lazy-load
resources for initial route
the initial route asap
code for remaining routes
& create next...
Polymer App Toolbox
Service Worker Foreign Fetch
cdn.thirdpary.com
GET	
  /app.js	
  HTTP/1.1	
  
HOST	
  cdn.thirdparty.com	
  
GET	
  /app.js	
  HTTP/1.1	
  
HOST	
  cdn...
cdn.thirdpary.com
GET	
  /app.js	
  HTTP/1.1	
  
HOST	
  cdn.thirdparty.com	
  
GET	
  /app.js	
  HTTP/1.1	
  
HOST	
  cdn...
Resources
Lighthouse
github.com/GoogleChrome/lighthouse
Offline Web Applications Udacity Course
udacity.com/course/offline...
Progressive web apps
Progressive web apps
Progressive web apps
Progressive web apps
Progressive web apps
Progressive web apps
Progressive web apps
Progressive web apps
Progressive web apps
Progressive web apps
Upcoming SlideShare
Loading in …5
×

Progressive web apps

2,729 views

Published on

Alex Russell Software Engineer, Google at Fastly Altitude 2016
New browser technologies are arriving that are poised to change user and developer expectations of what’s possible on the web; particularly on slow mobile devices with flaky connections. This talk discusses how these new technologies – Service Workers, Progressive Web Apps, HTTP/2, Push, Notifications, and Web Components are being combined, e.g. in the new PRPL pattern, to transform user experiences while improving business results.

Published in: Technology
  • Be the first to comment

Progressive web apps

  1. 1. Service Workers, PWAs, PRPL, 
 and What's Next for Mobile +Alex Russell @slightlylate
  2. 2. Chrome is Performance Obsessed
  3. 3. Current Perf Projects: 120
  4. 4. Recent & Ongoing Perf Highlights Service Workers Save-Data Header HTTP/2 QUIC Streams Intersection Observer API V8: Ignition (Interpreter) V8: Promises Perf Work V8: Orinoco (GC) Cache API: compile cache Web Assembly GPU Rasterization “Slimming Paint” Blink Task Scheduler requestIdleCallback <link rel=‘preload’> CSS font-display Rule Performance Observer API Passive Event Listeners CSS Containment VP9 Client Hints HTML Imports Tab Discarding Shadow DOM “PlzNavigate” Many, Many DevTools Features Pre-paint Tuning Memory Coordinator Offscreen Canvas & Worker GL Partial Raster Foreign Fetch GPU Scheduler Throttle Offscreen Content
  5. 5. Recent & Ongoing Perf Highlights Service Workers Save-Data Header HTTP/2 QUIC Streams Intersection Observer API V8: Ignition (Interpreter) V8: Promises Perf Work V8: Orinoco (GC) Cache API: compile cache Web Assembly GPU Rasterization “Slimming Paint” Blink Task Scheduler requestIdleCallback <link rel=‘preload’> CSS font-display Rule Performance Observer API Passive Event Listeners CSS Containment VP9 Client Hints HTML Imports Tab Discarding Shadow DOM “PlzNavigate” Many, Many DevTools Features Pre-paint Tuning Memory Coordinator Offscreen Canvas & Worker GL Partial Raster Foreign Fetch GPU Scheduler Throttle Offscreen Content
  6. 6. Faster is better. Source: SOASTA, 2015 2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9 180,000 140,000 100,000 60,000 0 20,000 58 45 32 19 0 6 Sessions Load time (in seconds) Bouncerate(%) Sessions Bounce rate 13% bounce rate 20% bounce rate 58% bounce rate
  7. 7. flickr.com/photos/monado/4405843023
  8. 8. Service workers enable reliable performance Web server Service worker Client side proxy written 
 in JavaScript Cache
  9. 9. example.com GET  /app.html  HTTP/1.1   HOST  example.com   ... HTTP/1.1  200  OK   Date:  Thu,  19  Feb  2015  05:21:56  GMT   ...  
  10. 10. example.com //  sw.js   onfetch  =  function(e)  {      if(e.request.url  ==  "app.html")  {          e.respondWith(              caches.match(e.request)          );      }      if(e.request.url  ==  "content.json")  {          //  go  to  the  network  for  updates,          //  meanwhile,  use  cached  content          fetch(...).then(function(r)  {              r.asJSON().then(function(json)  {                  e.client.postMessage(json);              });          });      }   }; GET  /app.html  HTTP/1.1   HOST  example.com   GET  /content.json  HTTP/1.1   HOST  example.com   ... GET  /content.json  HTTP/1.1   HOST  example.com   ... HTTP/1.1  200  OK   Date:  Thu,  19  Feb  2015...   ...  
  11. 11. Progressive Web Apps
  12. 12. Capability Web
  13. 13. Capability Reach App Web * Web
  14. 14. Capability Reach App WebWeb PWA
  15. 15. Web App Manifests <link rel="manifest" href="/path/to/manifest.json">
  16. 16. www.washingtonpost.com/pwa/manifest.json {
 "lang": "en",
 "short_name": "Wash Post",
 "name": "The Washington Post",
 "icons": [
 { "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" },
 { "src": "img/launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" },
 { "src": "img/launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" }
 ],
 "start_url": "/pwa/?utm_source=homescreen",
 "display": "standalone",
 "orientation": "portrait",
 "background_color": "black"
 }
  17. 17. github.com/GoogleChrome/lighthouse
  18. 18. The RAIL Performance Model Respond, Animate, Idle, Load
  19. 19. "Respond: 100ms "Animate: 8ms "Idle work: 50ms chunks "Load: 1000ms to interactive
  20. 20. Source: Paul Lewis
  21. 21. Source: Paul Lewis
  22. 22. Source: Paul Lewis
  23. 23. Mobile's Harder Than It Looks
  24. 24. DOMContentLoaded at 700ms! Total JS Time < 600ms onload at 1500ms Smooth animations Interactive at ~4s
  25. 25. All the jank, all the time DOMContentLoaded at 2500ms Script locks UI thread for 2 seconds onload at 5.7s Interactive at ~7s Total JS Time: ~4 seconds
  26. 26. Instant first paint w/ Server Render! Fully loaded & interactive at 500ms! Total JS Time: ~1 second
  27. 27. First paint is fast UI thread is locked for 10 seconds Server-rendered spinner feels stuck Interactive at ~12 seconds
  28. 28. Interactive at 400ms...yawn? Total JS is 200ms...so?
  29. 29. Everything that paints is interactive Additional work is chunked to stay responsive First paint acknowledges user earlyInteractive at 1.75 seconds 1.3s of JS, but broken up
  30. 30. #usetheplatform
  31. 31. How we got to 12s of JS…
  32. 32. App bundling App Bundle https://shop/list/ladies_outerwear Shop - List Ladies Outerwear Server
  33. 33. Per-route bundling https://shop/list/ladies_outerwear Shop - List Ladies Outerwear Server list button tabs Optimal /list bundle
  34. 34. https://shop/cart Shop - Cart Per-route bundling Server list button icon-button Shopping Cart Optimal /cart bundle
  35. 35. Per-route bundling list button icon-button Optimal /cart bundle list button tabs Optimal /list bundle Duplicated modules
  36. 36. HTTP/2 to the rescue
  37. 37. Browser Server All subresources can be fetched in parallel RESPONSE GET: index.html GET: subresources RESPONSE HTTP/2
  38. 38. RESPONSE GET: index.html Browser Server GET: subresources RESPONSE Transitive dependencies discovered & requested RESPONSE GET: subresources HTTP/2
  39. 39. GET: index.html Browser Server RESPONSE Transitive dependencies preemptively pushed HTTP/2 + Server Push
  40. 40. Response Headers: content-encoding: content-length: content-type: link: … gzip 385 text/html </shop-app.html>;rel=preload;as=document, </iron-pages.html>;rel=preload;as=document, </list-view.html>;rel=preload;as=document, </detail-view.html>;rel=preload;as=document, </cart-view.html>;rel=preload;as=document, </polymer.html>;rel=preload;as=document method: path: scheme: accept: … GET /index.html https text/html … HTTP Request Headers HTTP Response Headers
  41. 41. <link rel=“import” href=“polymer.html”> <link rel=“import” href=“iron-pages.html”> <link rel=“import” href=“list-view.html”> <link rel=“import” href=“detail-view.html”> <link rel=“import” href=“cart-view.html”> <link rel=“import” href=“shop-app.html”> index.html <!doctype html> <html> <head> <link rel=“import” href=“shop-app.html”> </head> <body> <shop-app></shop-app> </body> </html> my-app.html <link rel=“import” href=“iron-pages.html”> <link rel=“import” href=“list-view.html”> <link rel=“import” href=“detail-view.html”> <link rel=“import” href=“cart-view.html”> <template> <iron-pages> <list-view></list-view> <detail-view></detail-view> <cart-view></cart-view> </iron-pages> </template> iron-pages.html <link rel=“import” href=“polymer.html”> <template> list-view.html <link rel=“import” href=“polymer.html”> <template> detail-view.html <link rel=“import” href=“polymer.html”> <template> cart-view.html <link rel=“import” href=“polymer.html”> <template> <header> <h1>[[category.title]]</h1> <span>[[_getPluralizedQuantity(category. </header> <div class="grid"> <template is="dom-repeat" items="[[_ge <a href$="[[_getItemHref(item)]]"> <list-item item=“[[item]]"></list-list-item> </a> </template>
  42. 42. <link rel=“import” href=“iron-pages.html”> <link rel=“import” href=“list-view.html”> <link rel=“import” href=“detail-view.html”> <link rel=“import” href=“cart-view.html”> <link rel=“import” href=“shop-app.html”> <link rel=“import” href=“polymer.html”> Response Headers: link: </shop-app.html>;rel=preload;as=document, </iron-pages.html>;rel=preload;as=document, </list-view.html>;rel=preload;as=document, </detail-view.html>;rel=preload;as=document, </cart-view.html>;rel=preload;as=document, </polymer.html>;rel=preload;as=document
  43. 43. tabs button list … Cold cache: Only load code critical for /list route icon-buttonicon header drawer 1. Push components for initial route https://shop/list
  44. 44. 2. Render initial route asap https://shop/list
  45. 45. 3. Pre-cache remaining components … … Code for secondary routes pre-cached lazily https://shop/list
  46. 46. 4. Lazy load & create secondary route https://shop/cart
  47. 47. Push Render Pre-cache Lazy-load resources for initial route the initial route asap code for remaining routes & create next routes on-demand The PRPL Pattern
  48. 48. Polymer App Toolbox
  49. 49. Service Worker Foreign Fetch
  50. 50. cdn.thirdpary.com GET  /app.js  HTTP/1.1   HOST  cdn.thirdparty.com   GET  /app.js  HTTP/1.1   HOST  cdn.thirdparty.com   ... HTTP/1.1  200  OK   Date:  Thu,  19  Feb  2015...   ...   ???
  51. 51. cdn.thirdpary.com GET  /app.js  HTTP/1.1   HOST  cdn.thirdparty.com   GET  /app.js  HTTP/1.1   HOST  cdn.thirdparty.com   ... HTTP/1.1  200  OK   Date:  Thu,  19  Feb  2015...   ...   ??? !!!
  52. 52. Resources Lighthouse github.com/GoogleChrome/lighthouse Offline Web Applications Udacity Course udacity.com/course/offline-web-applications--ud899 Polymer App Toolbox polymer-project.org/1.0/toolbox/ youtube.com/ChromeDevelopers The Washington Post PWA wapo.com/pwa “Shop” PRPL PWA shop.polymer-project.org Other Great PWA Experiences pwa.rocks Progressive Web App Codelabs developer.google.com/web/progressive-web-apps

×