$30 off During Our Annual Pro Sale. View Details »

PWA Challenges — Toronto Web Perf Meetup

PWA Challenges — Toronto Web Perf Meetup

Jason Grigsby

November 28, 2018

More Decks by Jason Grigsby

Other Decks in Technology


  1. PWA Challenges

  2. We need a progressive web app!

  3. What is a progressive web app?

  4. How do we create a plan for this?

  5. Do we need a progressive web app?

  6. How does the CEO even know about progressive web apps?

  7. Cool. I’ve been wanting to play with service workers… Maybe

    we can use Vue.js here as well… I wonder if this can be used as excuse to switch to node js…
  8. None
  9. How does the CEO even know about progressive web apps?

  10. None
  11. None
  12. Ola Cabs • 68% increase in mobile traffic • Tier

    2 cities conversion rate same as native app. Tier 3 cities, conversion rate is 30% higher with PWA. • PWA is 200KB which 300x smaller than Android and 500x than iOS. • 20% of users who book in the PWA had previously uninstalled app. Source: Google, http://bit.ly/2q9D4EA
  13. Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

  14. None
  15. What is a progressive web app?

  16. Original Definition by Frances Berriman and Alex Russell Responsive 

    Fit any form factor. RWD FTW! Connectivity Independent
 Offline features thanks to service workers. App-like interactions
 App shell for apps navigation. Fresh
 Up-to-date thanks to service workers. Safe
 Served on HTTPS. Discoverable
 Manifest files identify them as apps. Re-engageable
 Push notifications bring people back to apps. Installable
 Can be installed to the home screen w/o app stores. Linkable
 Still part of the web—URLs still work. Progressive
 Use progressive enhancement for better experience.
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22

  25. PWA is a website that has been enhanced with: {manifest}

    https service worker Credit to Jeremy Keith for explicitly declaring a technical definition: https://adactio.com/journal/13098
  26. {manifest} https service worker

  27. service worker

  28. Progressive Web App Service Worker Cache Network Explicit control of

    network requests and cache
  29. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr

  30. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr

  31. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr

  32. Side note: Measuring the impact of your own service worker

    using synthetic data is a pain (right now?).
  33. None
  34. Service workers are also key to providing an offline experience

    and push notifications
  35. PWA is a website that has been enhanced with: {manifest}

    https service worker But PWAs can be much more…
  36. Progressive web apps allow us to build experiences that previously

    required a native application.
  37. The hype can be a turn off https://twitter.com/elliotecweb/status/864070806569066497

  38. The name isn’t for you and worrying about it is

    distraction from just building things that work better for everyone. The name is for your boss, for your investor, for your marketeer. —Frances Berriman, Naming Progressive Web Apps
  39. None
  40. Do we need a progressive web app?

  41. If so, you would probably benefit from a PWA. Does

    your organization have a website?
  42. Does your organization make money on your website via e-commerce,

    advertising, or some other method? If so, you definitely need a progressive web app.
  43. FUD Fear, Uncertainty, Doubt

  44. We already have a native app, why do we need

    a PWA?
  45. Reach people who don’t have your native app installed or

    are on a different device.
  46. Your website is often a customer’s first interaction with your

 A better web experience will likely mean more revenue and more native app installs.
  47. The web can’t do [insert thing here]

  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. https://www.flickr.com/photos/ashleyrosex/2861690380 The web can do more than we think.

  62. But iOS doesn’t support PWAs…

  63. None
  64. PWAs work fine on older browers. They are progressive.

  65. AliExpress • 104% for new users across all browsers in

    conversion • 82% increase in iOS conversion Source: Google, http://bit.ly/2fq2ckc
  66. Wego • 50% increase in iOS conversion • 35% increase

    in average iOS session duration Source: Google, https://bit.ly/2uOsoNM
  67. The Washington Post saw 5x increase in user engagement

  68. Why? Performance. PWA faster even without SW.

  69. PWAs are a trojan horse for performance.

  70. LET’S DO THIS!

  71. 1. Making it feel like an app 2. Installation and

    Discovery 3. Offline mode 4. Push Notifications 5. Beyond PWAs
  72. 1. Making it feel like an app 2. Installation and

    Discovery 3. Offline mode 4. Push Notifications 5. Beyond PWAs
  73. Making it feel like an app

  74. None
  75. Like obscenity and brunch, web apps can be described but

    not defined. —Jeremy Keith, By any other name
  76. Make it look native? https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt

  77. Do you switch design language between platforms? Material Design iOS

  78. How many platforms will you adapt to?

  79. What about desktop browsers?

  80. Will you jump every time the platform changes?

  81. Define your own design and be consistent. Tripcase maintains same

    design across platforms.
  82. More immersive experience https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/

  83. Manifest file display options display: "standalone" display: "fullscreen" display: "browser"

    display: “minimal-ui”
  84. We’re spoiled by our browsers

  85. The warm comforts of the browser navigation bar status bar

    address bar
  86. The warm comforts of the browser info, refresh, download tabs

    downloads find in page
  87. The warm comforts of the browser sharing printing email

  88. Roughing it in app land

  89. Adding a back button is harder than it seems •

    Manage the browser history so back button goes to right location. • Back button in an app often implies a hierarchy, not simply going to the last screen you were on. • Do you rearchitect your site to create an app hierarchy?
  90. None
  91. Where does this button go? Does it do the same

    thing as the browser back button? Should there be an app back button?
  92. .backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen)

    { .backButton { display: block; } } Display mode media query
  93. Not every customer or potential customer will add your Progressive

    Web App to their home screen …but every visitor will “install” your PWA!
  94. Fast, Fluid Experience

  95. Provide Immediate Feedback

  96. Smooth Pages — Avoid Jumps, Use Skeleton Pages

  97. App Shell model of PWAs

  98. App Shell means first paint happens quickly No PWA, No

    App Shell, 4G PWA with App Shell, 4G
  99. WARNING: App Shell model often assumes you’re building a single

    page application
  100. None
  101. PWA != SPA

  102. Should feeling like an app be the goal? Should feeling

    like an app be your goal?
  103. Feel Like an App Website with Performance Improvements Full screen,

    app shell with native design language Minimal-ui Standalone System Fonts Fullscreen Animation and Polish App Shell Native Design MORE COMPLEX LESS COMPLEX
  104. Offline Mode

  105. Cache for performance and offline fallback

  106. Offline Fallback Pages Can Keep People Engaged • Trivago found

    that 67% of people continue to browse the site when they come back online. Source: http://bit.ly/2GoXjCi
  107. Many Hidden Challenges

  108. DOMException: Quota exceeded.

  109. None
  110. WHAT? 

  111. When 7 KB = 7 MB!

  112. https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses

  113. <img src='https://cors.example.com/path/to/image.jpg' crossorigin=‘anonymous’> <link rel='stylesheet' href='https://cors.example.com/ path/to/styles.css' crossorigin='anonymous'>

  114. None
  115. Cache recently viewed content for offline use

  116. Cache recently viewed content for offline use

  117. Display the Information You Have

  118. Let User’s Choose What They Want Offline

  119. Pre-cache Content and Apps

  120. Give People Transparency and Control

  121. Offline Interactivity — Or Disallow Editing

  122. None
  123. The goal isn’t offline; offline is just a special case

    of flakiness (and the easiest one to detect technically). PWAs and SWs give you the ability to be reliable for your users. That’s the advantage across all connection states (even online!) —Alex Russell
  124. Offline Cache for Performance Only Offline Interactivity Offline Fallback Offline

    Indicator Cache Recently Viewed Pages Disable Interactivity Pre-cache Predetermined Pages Pre-cache Dynamic Items User Choose What to Cache MORE COMPLEX LESS COMPLEX
  125. Beyond PWAs

  126. Accelerated Mobile Project

  127. I have some opinions about AMP…

  128. But if you must AMP, then AMP to PWA Install

    Path https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/
  129. Auto-login with Credential Management API

  130. Payment Request API

  131. Redefining Perceived Performance

  132. None
  133. None
  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. Beyond PWAs Basic PWA Multiple New APIs Autofill Support AMP

    to PWA Credential Management API Camera, other sensors Payment Request API AMP in PWA MORE COMPLEX LESS COMPLEX
  141. How do we create a plan for this?

  142. PWAs are progressive because… Progressive Roadmap {manifest} https Jul 13

    Redesign launches Better security with HTTPS Faster site via HTTP/2 Better bookmarks via manifest Oct 3 Faster pages Offline fallback It’s a PWA! service worker Oct 18 Offline pages Offline indicator Improved font loading Nov 22 Push notifications HTTP/2 Link Preload Dec 7 Small tweaks PWA announced
  143. Every step on the path to a PWA makes sense

    on its own.
  144. None
  145. Available now! Follow @thepwabook for updates. https://abookapart.com/products/ progressive-web-apps No 28

  146. Thank You!

  147. Thank You! White Blank Notebook by Tirachard Kumtanom Woman Executive

    Holding Tablet by Pixabay Schedule Planning by Startup Stock Photos Hackers by Christopher Dombres NSA by by Mario Antonio Pena Zapatería Map Location Symbol by Tumisa Smartphone on Bridge by Jeremy Levin Hype by Kerry J Instagram App on iPhone by Pixabay Man in Fuzzy Hat by Gratisography Southbank - Samsung Galaxy S8 (1) by TaylorHerring Now THIS is comfort! by Garry Wilmore Trojan Horse by Hsing Wei Cold Snow Man Person Asphalt Blur Car City by Pixabay Woman Listening to Music by bruce mars Woman and Dog by Tookapic Focus by Mark Hunter Person Holding Silver iPhone by rawpixel.com MacBook Air Beside Painting by rawpixel.com Android Phone by freestocks.org Smart Watch by Oliur Rahman Apple Office Internet iPad by Pixabay Woman Jumping by Quang Anh Ha Nguyen SEM by Pixabay Legs on Chair by kaboompics.com In Hiding by Taylor McBride Medusa Kill Switch by Scott Hart White Auto Gauge by Mikes Photos Blue and Silver Stethoscope by Pixabay Tortoise by Frans Van Heerden iPhone Photo on Railroad Tracks by Kaique Rocha database by ✦ Shmidt Sergey ✦ from the Noun Project Cloud by Blackwoodmedia.com.au from the Noun Project Responsive Design by Delwar Hossain from the Noun Project cogs by Gregor Cresnar from the Noun Project Special thanks to these fabulous people who graciously shared their work under Creative Commons.