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.

Progressive Web App Challenges

512 views

Published on

Presented at performance.now() conference

Published in: Technology
  • Be the first to comment

Progressive Web App Challenges

  1. 1. PWA Challenges
  2. 2. We need a progressive web app!
  3. 3. What is a progressive web app?
  4. 4. How do we create a plan for this?
  5. 5. Do we need a progressive web app?
  6. 6. How does the CEO even know about progressive web apps?
  7. 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. 8. How does the CEO even know about progressive web apps?
  9. 9. 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
  10. 10. Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
  11. 11. What is a progressive web app?
  12. 12. 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.
  13. 13. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22
  14. 14. 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
  15. 15. {manifest}https service worker
  16. 16. service worker
  17. 17. Progressive Web App Service Worker Cache Network Explicit control of network requests and cache
  18. 18. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr
  19. 19. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr
  20. 20. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr
  21. 21. Service workers are also key to providing an offline experience and push notifications
  22. 22. PWA is a website that has been enhanced with: {manifest}https service worker But PWAs can be much more…
  23. 23. Progressive web apps allow us to build experiences that previously required a native application.
  24. 24. https://www.youtube.com/watch?v=3tb-1MWg44Y
  25. 25. The hype can be a turn off https://twitter.com/elliotecweb/status/864070806569066497
  26. 26. 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
  27. 27. Do we need a progressive web app?
  28. 28. If so, you would probably benefit from a PWA. Does your organization have a website?
  29. 29. 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.
  30. 30. FUDFear, Uncertainty, Doubt
  31. 31. We already have a native app, why do we need a PWA?
  32. 32. Reach people who don’t have your native app installed or are on a different device.
  33. 33. Your website is often a customer’s first interaction with your company. 
 A better web experience will likely mean more revenue and more native app installs.
  34. 34. The web can’t do [insert thing here]
  35. 35. https://www.flickr.com/photos/ashleyrosex/2861690380 The web can do more than we think.
  36. 36. But iOS doesn’t support PWAs…
  37. 37. PWAs work fine on older browers. They are progressive.
  38. 38. AliExpress • 104% for new users across all browsers in conversion • 82% increase in iOS conversion Source: Google, http://bit.ly/2fq2ckc
  39. 39. Wego • 50% increase in iOS conversion • 35% increase in average iOS session duration Source: Google, https://bit.ly/2uOsoNM
  40. 40. The Washington Post saw 5x increase in user engagement
  41. 41. Why? Performance. PWA faster even without SW.
  42. 42. PWAs are a trojan horse for performance.
  43. 43. LET’S DO THIS!
  44. 44. 1. Making it feel like an app 2. Installation and Discovery 3. Offline mode 4. Push Notifications 5. Beyond PWAs
  45. 45. 1. Making it feel like an app 2. Installation and Discovery 3. Offline mode 4. Push Notifications 5. Beyond PWAs
  46. 46. Making it feel like an app
  47. 47. Like obscenity and brunch, web apps can be described but not defined. —Jeremy Keith, By any other name
  48. 48. Make it look native? https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt
  49. 49. Do you switch design language between platforms? Material Design iOS Design
  50. 50. How many platforms will you adapt to?
  51. 51. What about desktop browsers?
  52. 52. Will you jump every time the platform changes?
  53. 53. Define your own design and be consistent. Tripcase maintains same design across platforms.
  54. 54. More immersive experience https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/
  55. 55. Manifest file display options display: "standalone" display: "fullscreen"display: "browser" display: “minimal-ui”
  56. 56. We’re spoiled by our browsers
  57. 57. The warm comforts of the browser navigation bar status bar address bar
  58. 58. The warm comforts of the browser info, refresh, download tabs downloads find in page
  59. 59. The warm comforts of the browser sharing printing email
  60. 60. Roughing it in app land
  61. 61. 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?
  62. 62. Where does this button go? Does it do the same thing as the browser back button? Should there be an app back button?
  63. 63. .backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen) { .backButton { display: block; } } Display mode media query
  64. 64. Not every customer or potential customer will add your Progressive Web App to their home screen …but every visitor will “install” your PWA!
  65. 65. Fast, Fluid Experience
  66. 66. Provide Immediate Feedback
  67. 67. Animate Transitions to Support Wayfinding
  68. 68. Smooth Pages — Avoid Jumps, Use Skeleton Pages
  69. 69. App Shell model of PWAs
  70. 70. App Shell means first paint happens quickly No PWA, No App Shell, 4G PWA with App Shell, 4G
  71. 71. WARNING: App Shell model often assumes you’re building a single page application
  72. 72. PWA != SPA
  73. 73. Should feeling like an app be the goal? Should feeling like an app be your goal?
  74. 74. 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 COMPLEXLESS COMPLEX
  75. 75. Offline Mode
  76. 76. Cache for performance and offline fallback
  77. 77. 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
  78. 78. Many Hidden Challenges
  79. 79. DOMException: Quota exceeded.
  80. 80. WHAT? 
 THE BROWSER ONLY DOWNLOADED 15 THUMBNAIL IMAGES!
  81. 81. When 7 KB = 7 MB!
  82. 82. https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses
  83. 83. <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'>
  84. 84. Cache recently viewed content for offline use
  85. 85. Cache recently viewed content for offline use
  86. 86. Highlight Stale Information
  87. 87. Display the Information You Have
  88. 88. Let User’s Choose What They Want Offline
  89. 89. Pre-cache Content and Apps
  90. 90. Give People Trasparency and Control
  91. 91. Offline Interactivity — Background Sync https://developers.google.com/web/updates/2015/12/background-sync
  92. 92. Offline Interactivity — Or Disallow Editing
  93. 93. 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
  94. 94. 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 COMPLEXLESS COMPLEX
  95. 95. Beyond PWAs
  96. 96. Accelerated Mobile Project
  97. 97. I have some opinions about AMP…
  98. 98. 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/
  99. 99. Auto-login with Credential Management API
  100. 100. Payment Request API
  101. 101. Redefining Perceived Performance
  102. 102. 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 COMPLEXLESS COMPLEX
  103. 103. How do we create a plan for this?
  104. 104. 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
  105. 105. Progressive Web App Blueprint Planning & Definition
  106. 106. Define Your Ideal Progressive Web App
  107. 107. Offline Interactivity Cache for Perf Only Offline Native App Stores Website with Perf Improvements Full Screen, App Shell New APIs No Add to Home Screen Basic PWA Feels Like An App Installation and Discovery No Push Notifications Personalized and Integrated Push Push Notifications Beyond PWAs
  108. 108. Benchmark & Plan to Measure
  109. 109. Progressive Web App Blueprint Planning & Definition Technical Debt (if Necessary) Baseline PWA Front-end Additions Larger Initiatives Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap Assess current website Fix performance issues Fix usability issues Manifest HTTPS Service worker for performance Offline Fallback Cache recently viewed pages Precache popular or important pages Add third-party push notification service CMS plugin for push notifications Payment Request API Credentials Management API Integrate notifications with backend systems Background sync Move to app shell
  110. 110. Baseline PWA Front-end Additions Larger Initiatives Progressive Web App Blueprint Planning & Definition Technical Debt (if Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap Assess current website Fix performance issues Fix usability issues Manifest HTTPS Service worker for performance Offline Fallback Cache recently viewed pages Precache popular or important pages Add third-party push notification service CMS plugin for push notifications Payment Request API Credentials Management API Integrate notifications with backend systems Background sync Move to app shell
  111. 111. Every step on the path to a PWA makes sense on its own.
  112. 112. Coming November 12th! Preorders available now. Follow @abookapart, @grigs or sign up for the A Book Apart newsletter for updates. https://abookapart.com/products/ progressive-web-apps No 28 PROGRESSIVE WEBAPPS Jason Grigsby
  113. 113. Thank You!
  114. 114. 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.

×