Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Why Progressive Web Apps will transform your website

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 85 Anzeige

Why Progressive Web Apps will transform your website

Herunterladen, um offline zu lesen

* Cut through the PWA hype and learn why they really matter
* Discover incentives from Google and Microsoft including SEO benefits
* Learn how other companies have used PWAs to increase revenue
* Put together a high-level plan on converting your website to a PWA

Presented at Portland Digital Summit 2017

* Cut through the PWA hype and learn why they really matter
* Discover incentives from Google and Microsoft including SEO benefits
* Learn how other companies have used PWAs to increase revenue
* Put together a high-level plan on converting your website to a PWA

Presented at Portland Digital Summit 2017

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Why Progressive Web Apps will transform your website (20)

Anzeige

Weitere von Jason Grigsby (20)

Aktuellste (20)

Anzeige

Why Progressive Web Apps will transform your website

  1. 1. Why Progressive Web Apps will transform your website!
  2. 2. Tweets during talk: @grigs_talks Normal twitter: @grigs Slides: bit.ly/dspdx-pwa Our company: CloudFour.com
  3. 3. Portland Open Device Testing Lab
  4. 4. Have you heard the Progressive Web App hype?
  5. 5. 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
  6. 6. 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
  7. 7. Photo by helin, http://bit.ly/2fg3eME
  8. 8. Time Visibility Technology Trigger Peak of Inflated Expectations Trough of Disillusionment Slope of enlightenment Plateau of Productivity Gartner Hype Cycle
  9. 9. What is a Progressive Web App?
  10. 10. https://www.youtube.com/watch?v=3tb-1MWg44Y
  11. 11. Source: Google Developers, http://bit.ly/1X36bm2 | Original definition: http://bit.ly/1K8Tm4L Progressive Web App Features
  12. 12. Source: FlipKart, http://bit.ly/2ejW2Rr Flipkart’s Progressive Web App
  13. 13. Source: riorun.theguardian.com Guardian’s RioRun App
  14. 14. Source: riorun.theguardian.com Guardian’s RioRun App
  15. 15. 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%.
  16. 16. Browsers are providing incentives for PWAs. Photo by Stephen Korecky, http://bit.ly/2epjw48
  17. 17. Add to home screen install banners Source: Google, http://bit.ly/2ejW2Rr
  18. 18. Our internal metrics at Google show that for similar volume of prompting for PWA banners and native app banners — the closest thing to an apples-to- apples comparison we can find — PWA banners convert 5–6x more often. More than half of users who chose to install a native app from these banners fail to complete installing the app whereas PWA installation is near-instant. —Alex Russell, Why Are App Install Banners Still A Thing?
  19. 19. Coming Soon…
  20. 20. App Stores
  21. 21. Progressive Web Apps in Microsoft Store Two ways to get into store: 1. Active submission 2. Passive ingestion Source:
 https://www.slideshare.net/AaronGustafson/progressive-web- apps-and-the-windows-ecosystem-build-2017
  22. 22. SEO Benefits
  23. 23. Progressive Web Apps in Bing Search Results Source:
 https://www.slideshare.net/AaronGustafson/progressive-web- apps-and-the-windows-ecosystem-build-2017
  24. 24. Progressive Web Apps Simply Make Sense (Irrespective of what you do on native)
  25. 25. 1. Not every customer or potential customer will install your native app.
  26. 26. DUH!
  27. 27. Sometimes we need to restate the obvious.
  28. 28. Plus, there are cracks in the app store.
  29. 29. 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
  30. 30. 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
  31. 31. Average Android App Retention of Daily Active Users Source: Quettra via Andrew Chen http://bit.ly/1Hq53AR PercentageofUsersStillActive 0% 25% 50% 75% 100% Days Since App Install 0 1 3 7 14 30 60 90
  32. 32. © 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 %ofSmartphoneUsers 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.
  33. 33. © 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 UniqueVisitors(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.”
  34. 34. 2. You should provide a secure site or app for your web customers
  35. 35. Image by CHRISTOPHER DOMBRES, http://bit.ly/2fKjJoC
  36. 36. Photo by Mario Antonio Pena Zapatería, http://bit.ly/2fuQ27D
  37. 37. 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 ▾
  38. 38. 3. You should provide a fast experience for your web customers
  39. 39. The Washington Post PWA shows big speed increase
  40. 40. The Washington Post PWA shows big speed increase
  41. 41. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr
  42. 42. 4. Your web customers would benefit from an offline experience
  43. 43. Service workers are also key to providing an offline experience
  44. 44. 5. Your web customers might benefit from push notifications
  45. 45. Push notifications can help increase engagement
  46. 46. 6. You can create a text file and some icons for a Web Manifest
  47. 47. Manifest files are simple JSON documents
  48. 48. { 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
  49. 49. Every step on the path to a PWA makes sense on its own.
  50. 50. Early PWA Returns are Promising
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. But iOS doesn’t support PWAs…
  56. 56. PWAs work fine on iOS. They are progressive.
  57. 57. Billions use browsers that support PWA features
  58. 58. Billions use browsers that support PWA features Safari has hinted at supporting service workers which is the most critical feature.
  59. 59. AliExpress • 104% for new users across all browsers in conversion • 82% increase in iOS conversion Source: Google, http://bit.ly/2fq2ckc
  60. 60. The Washington Post saw 5x increase in user engagement
  61. 61. Why? Performance. PWA faster even on iOS.
  62. 62. PWAs are a trojan horse for performance. Photo by Hsing Wei, http://bit.ly/2fqmBFV
  63. 63. 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
  64. 64. Planning for your PWA
  65. 65. Progressively Punny
  66. 66. PWAs are progressive because… They are built on Progressive Enhancement
  67. 67. 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
  68. 68. 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 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
  69. 69. Every step on the path to a PWA makes sense on its own.
  70. 70. Photo by Kerry J, http://bit.ly/2fuTKOx
  71. 71. https://developers.google.com/web/showcase/2017/wego
  72. 72. Thank You!

×