Why You Should Build a Progressive Web App Now

Why You Should Build a Progressive Web App Now

Presented at Smashing Conference

There’s been a lot of discussion about how to build a progressive web app but not a lot of discussion about why businesses should invest in them. Better user experience, faster performance, more engagement—Jason Grigsby explains why progressive web apps are no-brainers for most websites.

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

April 04, 2017
Tweet

Transcript

  1. The Case for Progressive Web Apps

  2. During: @grigs_talks After: @grigs Slides: http://bit.ly/grigs-pwa-sf17

  3. Have you heard the Progressive Web App hype?

  4. None
  5. None
  6. None
  7. WAIT! THE WEB ISN’T DEAD AFTER ALL. GOOGLE MADE SURE

    OF IT IN 2010, THE web died. Or so said the publication you’re CADE METZ BUSINESS 04.20.16 1:00 PM GOOGLE BUSINESS CULTURE DESIGN GEAR SCIENCE SECURITY TRANSPORTATION Wait! The Web Isn't Dead After All. Google Made Sure of It SUBSCRIBE
  8. of building online services and delivering them across the Internet,

    but of using these services. At the very least, it’s not dead. The Progressive Web App The Weather Company offers a smartphone app, like any other sane company that harbors aspirations on the Internet. But it has seen more and more people visit its mobile website in recent years. According to Sheri Bachstein, the Weather Company’s vice president of web, about fifty percent of its web traffic now arrives on mobile phones and tablets (as opposed to the desktop). Yes, more people use the company’s various apps, but increasingly, the mobile web is a vital way of reaching its worldwide audience—not to mention maintaining and expanding that audience. The company now offers what Google calls a “progressive web app.” Basically, this is a website that, in sometimes gradually evolving ways, behaves like a native app. You visit it through a browser, just like any other website. But as you continue to use it, turning on certain tools, it transforms into something more. With a progressive web app, you can set up push notifications, so you know when new content arrives. You can add an icon to your phone’s home screen, so you can rapidly revisit the service. And perhaps most importantly, thanks to a technology called service workers, it can operate both online and off, kinda like a web app. Among other things, this means that when you visit the web app a second time, it loads faster. It’s more like the thing is sitting on your phone. ‘You use it. You like it. And over time, you progressively build a relationship with it.’ —ALEX KOMOROSKE, CHROME PRODUCT MANAGER
  9. None
  10. None
  11. Photo by helin, http://bit.ly/2fg3eME

  12. Time Visibility Technology Trigger Peak of Inflated Expectations Trough of

    Disillusionment Slope of enlightenment Plateau of Productivity Gartner Hype Cycle
  13. None
  14. What is a Progressive Web App?

  15. Source: Google Developers, http://bit.ly/1X36bm2 | Original definition: http://bit.ly/1K8Tm4L Progressive Web

    App Features
  16. Source: FlipKart, http://bit.ly/2ejW2Rr Flipkart’s Progressive Web App

  17. Browsers are providing incentives for PWAs. Photo by Stephen Korecky,

    http://bit.ly/2epjw48
  18. Add to home screen install banners Source: Google, http://bit.ly/2ejW2Rr

  19. Browsers hope they can increase install rates by observing user

    engagement and fine-tuning when they show the banner.
  20. None
  21. Coming Soon… (Likely)

  22. App Stores

  23. SEO Benefits

  24. Progressive Web Apps Simply Make Sense (Irrespective of what you

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

    native app.
  26. DUH!

  27. Sometimes we need to restate the obvious.

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

  29. None
  30. None
  31. 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
  32. 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
  33. 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
  34. © 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.
  35. © 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.”
  36. 2. You should provide a secure site or app for

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

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

  39. 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 ▾
  40. None
  41. 3. You should provide a fast experience for your web

    customers
  42. The Washington Post PWA shows big speed increase

  43. The Washington Post PWA shows big speed increase

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

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

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

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

  48. Push notifications can help increase engagement

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

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

  51. { 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
  52. Every step on the path to a PWA makes sense

    on its own.
  53. Early PWA Returns are Promising

  54. Konga • 92% less data for initial load, vs. native

    app • 82% less data to complete first transaction, vs. native app • 63% less data for initial load, vs. previous mobile web experience • 84% less data to complete first transaction, vs. previous mobile web experience Source: Google, http://bit.ly/2f64lRo
  55. 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
  56. 5miles • 50% decrease in bounce rates • 30% increase

    in time spent on site • 30% better conversion for users who arrived via Add to Home screen Source: Google, http://bit.ly/2eqS5a6
  57. But iOS doesn’t support PWAs…

  58. PWAs work fine on iOS. They are progressive.

  59. Billions use browsers that support PWA features

  60. Billions use browsers that support PWA features Safari has hinted

    at supporting service workers which is the most critical feature.
  61. AliExpress • 104% for new users across all browsers in

    conversion • 82% increase in iOS conversion Source: Google, http://bit.ly/2fq2ckc
  62. The Washington Post saw 5x increase in user engagement

  63. Why? Performance. PWA faster even on iOS.

  64. PWAs are a trojan horse for performance. Photo by Hsing

    Wei, http://bit.ly/2fqmBFV
  65. Progressive Web Apps Simply Make Sense 1. Not every customer

    or potential customer will install your native app. 2. You should provide a secure site or app for your web customers 3. You should provide a fast experience for your web customers 4. Your web customers would benefit from an offline experience 5. Your web customers might benefit from push notifications 6. You can create a text file and some icons for a Web Manifest
  66. Simply making sense != Simple to design and build

  67. Unanswered questions from earliest days of the iPhone

  68. Early on, web pages aped native apps http://smashingtops.com/wordpress/wordpress-plugins/

  69. The web has evolved its own language. http://www.wptouch.com/

  70. When it comes to visual design and interaction patterns, start

    by forgetting everything you know about conventional web design, and instead imagine you’re actually designing a native app. —Owen Campbell-Moore, Designing Great UIs for Progressive Web Apps
  71. http://www.flickr.com/photos/adventuresof/111667571/ Say What?

  72. It’s important to pay attention to detail here since native

    apps have given users expectations around touch interactions and information hierarchy which are important to match to avoid creating a jarring experience. —Owen Campbell-Moore, Designing Great UIs for Progressive Web Apps
  73. What makes something an app?

  74. How do user’s expectations change when they consider something to

    be an app?
  75. Four related questions and few small details

  76. 1. How much does your design match the platform?

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

    Design
  78. How many platforms will you adapt to?

  79. What about desktop browsers?

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

    design across platforms.
  81. 2. What impact does going chromeless have on our user

    experiences?
  82. What happens when you remove browser chrome? display: "standalone" display:

    "fullscreen" display: "browser"
  83. What happens when you remove browser chrome? display: "standalone" display:

    "fullscreen" status bar navigation bar No URL, tabs, or menu
  84. What happens when you remove browser chrome? display: "fullscreen" No

    URL, tabs, menu or back button!
  85. Full screen does have hidden controls Pull down for reload

    Swipe from bottom for navigation bar
  86. We’re spoiled by our browsers Photo by Garry Wilmore, http://bit.ly/2noXVxq

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

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

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

  90. Roughing it in app land

  91. 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?
  92. None
  93. Where does this button go? Does it do the same

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

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

    Web App to their home screen …but every visitor will install your PWA!
  96. None
  97. http://codepen.io/mariusbalaj/full/Jtqbm/

  98. 2out of 1000 mobile users tap share buttons https://www.moovweb.com/anyone-use-social-sharing-buttons-mobile/

  99. None
  100. None
  101. None
  102. Experimental Web Share API to Enable Native Sharing

  103. 3. To App Shell or not to App Shell?

  104. App Shell model of PWAs https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73

  105. Perceived performance matters most By Addy Osmani, http://bit.ly/2o0YBgu

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

    App Shell, 4G PWA with App Shell, 4G
  107. Personally, I’m not a fan of the app-shell model. I

    feel that it prioritises exactly the wrong stuff—the interface is rendered quickly while the content has to wait…I also notice it being used as a get- out-of-jail-free card, much like the ol’ “Single Page App” descriptor; “Ah, I can’t do progressive enhancement because I’m building an app shell/SPA, you see.” —Jeremy Keith, Regressive Web Apps
  108. PWA != SPA

  109. None
  110. 4. What part of your site should be made into

    a Progressive Web App?
  111. Desktop Facebook is one app.

  112. None
  113. Whole site apps

  114. Whole site apps

  115. Whole site apps

  116. Subdomain apps

  117. Tearaway Apps

  118. Tearaway Apps

  119. Tearaway Apps

  120. Four questions for PWAs 1. How much does your design

    match the platform? 2. What impact does going chromeless have on UX? 3. To App Shell or not to App Shell? 4. What part of your site should be made into a PWA?
  121. What makes something an app?

  122. How do user’s expectations change when they consider something to

    be an app?
  123. Great PWAs will get the details right.

  124. Caching and offline strategy

  125. Cache for performance and offline fallback

  126. Cache for performance and offline fallback

  127. Cache recently viewed content for offline use

  128. Cache recently viewed content for offline use

  129. Cache recently viewed content for offline use

  130. Let people choose what to cache offline

  131. Let people choose what to cache offline

  132. Cache app ahead of time

  133. Cache app ahead of time

  134. AMP to PWA Install Path

  135. Accelerated Mobile Project

  136. Accelerated Mobile Project

  137. AMP to PWA Install Path https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/

  138. Push notification etiquette

  139. Don’t immediately ask for permission to send push notifications

  140. Many people are annoyed by notifications http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications

  141. None
  142. Photo by Scott Hart, http://bit.ly/2or1K9Y

  143. None
  144. Planning for your PWA

  145. Progressively Punny

  146. Progressive Roadmap to a PWA {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 Wrench by Tony Gines from the Noun Project Oct 18 • Offline pages • Offline indicator • Improved font loading Nov 22 • Push notifications • HTTP/2 Link Preload Dec 7 • Small tweaks • PWA announced
  147. Every step on the path to a PWA makes sense

    on its own.
  148. Photo by Kerry J, http://bit.ly/2fuTKOx

  149. None
  150. Thank You!