The Case for Progressive Web Apps

The Case for Progressive Web Apps

Presented at Frontend PDX as part of a book launch party. The book can be found at https://abookapart.com/products/progressive-web-apps

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

November 16, 2018
Tweet

Transcript

  1. The Case for Progressive Web Apps

  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. eXtra Electronics • 12% click-through rate • 100% more sales

    from users arriving via web push • 4x increase in re-engagement Source: Google, http://bit.ly/2eqSf18
  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. Source: FlipKart, http://bit.ly/2ejW2Rr Flipkart’s Progressive Web App

  18. Source: https://blog.twitter.com/ 2017/how-we-built-twitter-lite Twitter Lite Twitter Lite is interactive in

    less than 5 seconds over 3G on most devices, with average load times reduced by over 30%.
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22

  27. 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
  28. Progressive web apps allow us to build experiences that previously

    required a native application.
  29. https://www.youtube.com/watch?v=3tb-1MWg44Y

  30. The hype can be a turn off https://twitter.com/elliotecweb/status/864070806569066497

  31. 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
  32. None
  33. Do we need a progressive web app?

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

    your organization have a website?
  35. 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.
  36. Progressive Web Apps Simply Make Sense (Irrespective of what you

    do on native)
  37. 1. Not every customer or potential customer will install your

    native app.
  38. DUH!

  39. Sometimes we need to restate the obvious.

  40. Plus, there are cracks in the app store.

  41. None
  42. None
  43. Over 2 million apps available in iOS and Android app

    stores. Source: Statista, http://bit.ly/2fleesH | Photo by Blake Patterson, http://bit.ly/2foGNpj
  44. 8+ apps 5-7 apps 4 apps 3 apps 2 apps

    1 app 0 apps 49% 13% 11% 8% 6% 7% 6% U.S. smartphone users’ number of apps downloads per month Source: Comscore 2016 U.S. Mobile App Report, http://bit.ly/2d27iPI
  45. Average Android App Retention of Daily Active Users Source: Quettra

    via Andrew Chen http://bit.ly/1Hq53AR Percentage of Users Still Active 0% 25% 50% 75% 100% Days Since App Install 0 1 3 7 14 30 60 90
  46. None
  47. © comScore, Inc. Proprietary. 26 Advertising and marketing is becoming

    a more important driver of app installs, while the app store’s influence may have peaked. App acquisition appears to be moving from ‘pull’ to ‘push’. App stores remain the most important method, but they are no longer growing in importance. Meanwhile, more users are now discovering apps from websites, digital ads and traditional media ads, highlighting the increasing importance of traditional push marketing for user acquisition. Most Common App Discovery Channels Among Smartphone Users Source: comScore MobiLens, U.S., Age 13+, 3 Month Average Ending June 2016 vs. June 2015 21% 14% 16% 9% 8% 9% 8% 6% 21% 14% 16% 11% 8% 11% 9% 9% 0% 5% 10% 15% 20% 25% Searched app store Featured/ Top List in app store via friend/ family via comment/ review/ social site via news/ print review/ TV show via a website via Ad on device browser/ app via Ad on TV/ print/ billboard % of Smartphone Users Jun-2015 Jun-2016 App Store Word-of-Mouth/Opinion Advertising/Marketing Being in the app store is no longer enough. Cost of acquisition higher.
  48. © comScore, Inc. Proprietary. 15 And mobile audience growth is

    being driven more by mobile web properties, which are actually bigger and growing faster than apps. A comparison of the Top 1000 Apps vs. the Top 1000 Mobile Web Properties shows that despite apps dominance in usage time, mobile web is responsible for big audiences on mobile. Mobile web audiences are almost 3x the size and growing 2x as fast as app audiences. Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties Source: comScore Mobile Metrix, U.S., Age 18+ - 2,000 4,000 6,000 8,000 10,000 12,000 Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015 Sep-2015 Dec-2015 Mar-2016 Jun-2016 Unique Visitors (000) Apps Mobile Web +82% vs. 2014 +45% vs. 2014 “Mobile web audiences are almost 3x the size and growing 2x as fast as app audiences.”
  49. 2. You should provide a secure site or app for

    your web customers
  50. Image by CHRISTOPHER DOMBRES, http://bit.ly/2fKjJoC

  51. Photo by Mario Antonio Pena Zapatería, http://bit.ly/2fuQ27D

  52. Let’s Encrypt is a free, automated, and open Certificate Authority.

    We are a 501(c)(3) nonprofit. We're running a crowdfunding campaign to support our operations, please consider contributing now! Get Started Donate FROM OUR BLOG Nov 1, 2016 Launching Our Crowdfunding Campaign Today we kicked off our first crowdfunding campaign with the goal of raising enough funds to cover about one month of our operations - $200,000. Read more Oct 27, 2016 Our First Grant: The Ford Foundation We are proud to announce that The Ford Foundation has awarded us a grant to help our growing operations. Read more Oct 24, 2016 Squarespace OCSP Stapling Implementation MA JOR SPONSORS Documentation Get Help Donate ▾ About Us ▾
  53. Not part of PWAs, but big speed boost only possible

    with HTTPS.
  54. 3. You should provide a fast experience for your web

    customers
  55. The Washington Post PWA shows big speed increase

  56. The Washington Post PWA shows big speed increase

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

  58. 4. Your web customers would benefit from an offline experience

  59. Service workers are also key to providing an offline experience

  60. 5. Your web customers might benefit from push notifications

  61. Push notifications can help increase engagement

  62. 6. You can create a text file and some icons

    for a Web Manifest
  63. Manifest files are simple JSON documents

  64. { name: "Cloud Four", short_name: "Cloud Four", description: "We design

    and develop responsive websites and progressive web apps.", icons: [ { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" }, { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" } ], theme_color: "#456BD9", background_color: "#FFFFFF", display: "standalone", orientation: "natural", start_url: "/", gcm_sender_id: "482941778795" } Manifest files are simple JSON documents
  65. Every step on the path to a PWA makes sense

    on its own.
  66. FUD Fear, Uncertainty, Doubt

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

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

    are on a different device.
  69. 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.
  70. The web can’t do [insert thing here]

  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. https://www.flickr.com/photos/ashleyrosex/2861690380 The web can do more than we think.

  85. But iOS doesn’t support PWAs…

  86. None
  87. PWAs work fine on older browers. They are progressive.

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

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

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

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

  92. PWAs are a trojan horse for performance.

  93. https://developers.google.com/web/showcase/2017/wego

  94. How do we create a plan for this?

  95. Progressively Punny

  96. PWAs are progressive because… They are built on Progressive Enhancement

  97. PWAs are progressive because… They promote a progressive relationship with

    your users First page • Page loads fast normally • Service worker installs after core content • Service worker pre-fetches assets • Assets explicitly cached Second page • Page loads even faster because of cache • App shell loading pattern? User indicates interest • Check to see if browser supports push • Ask if user wants notifications • If yes, ask browser for permission. User responds to notification • We can provide an improved experience Browser detects engagement • Asks user if they want to add to home screen • Now app may have better experience
  98. 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
  99. Progressive Web App Blueprint Planning & Definition

  100. Define Your Ideal Progressive Web App

  101. 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
  102. Benchmark & Plan to Measure

  103. Progressive Web App Blueprint Planning & Definition Technical Debt (if

    Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap
  104. Assess Current Website

  105. Is Your Website Reasonably Fast?

  106. Is it Usable?

  107. 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
  108. 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
  109. Every step on the path to a PWA makes sense

    on its own.
  110. None
  111. More in the book! Available now. Follow @abookapart or @thepwabook

    for updates. https://abookapart.com/products/ progressive-web-apps No 28 PROGRESSIVE WEB APPS Jason Grigsby
  112. Thank You!

  113. 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.