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.

Transcript

1. The Case for
   Progressive
   Web Apps
   

   View Slide

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

   View Slide

3. Have you heard
   the Progressive
   Web App hype?
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

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
   

   View Slide

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
   

   View Slide

9. View Slide

10. View Slide

11. Photo by helin,
    http://bit.ly/2fg3eME
    

    View Slide

12. Time
    Visibility
    Technology Trigger
    Peak of Inflated Expectations
    Trough of Disillusionment
    Slope of enlightenment
    Plateau of Productivity
    Gartner Hype Cycle
    

    View Slide

13. View Slide

14. What is a Progressive Web App?
    

    View Slide

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

    View Slide

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

    View Slide

17. Browsers are providing
    incentives for PWAs.
    Photo by Stephen Korecky, http://bit.ly/2epjw48
    

    View Slide

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

    View Slide

19. Browsers hope they can
    increase install rates by
    observing user engagement
    and fine-tuning when they
    show the banner.
    

    View Slide

20. View Slide

21. Coming Soon…
    (Likely)
    

    View Slide

22. App Stores
    

    View Slide

23. SEO Benefits
    

    View Slide

24. Progressive Web Apps
    Simply Make Sense
    (Irrespective of what you do on native)
    

    View Slide

25. 1. Not every customer or potential
    customer will install your native app.
    

    View Slide

26. DUH!
    

    View Slide

27. Sometimes we need to restate the obvious.
    

    View Slide

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

    View Slide

29. View Slide

30. View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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

    View Slide

36. 2. You should provide a secure site
    or app for your web customers
    

    View Slide

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

    View Slide

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

    View Slide

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 ▾
    

    View Slide

40. View Slide

41. 3. You should provide a fast experience
    for your web customers
    

    View Slide

42. The Washington Post PWA shows big speed increase
    

    View Slide

43. The Washington Post PWA shows big speed increase
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. Push notifications
    can help increase
    engagement
    

    View Slide

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

    View Slide

50. Manifest files are simple JSON documents
    

    View Slide

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
    

    View Slide

52. Every step on
    the path to a
    PWA makes
    sense on its
    own.
    

    View Slide

53. Early PWA Returns are Promising
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

57. But iOS
    doesn’t
    support
    PWAs…
    

    View Slide

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

    View Slide

59. Billions use browsers that support PWA features
    

    View Slide

60. Billions use browsers that support PWA features
    Safari has hinted at supporting service workers which is the most critical feature.
    

    View Slide

61. AliExpress
    • 104% for new users across all
    browsers in conversion
    • 82% increase in iOS conversion
    Source: Google, http://bit.ly/2fq2ckc
    

    View Slide

62. The Washington Post saw 5x increase in user engagement
    

    View Slide

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

    View Slide

64. PWAs are a trojan horse
    for performance.
    Photo by Hsing Wei, http://bit.ly/2fqmBFV
    

    View Slide

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
    

    View Slide

66. Simply making sense
    !=
    Simple to design and build
    

    View Slide

67. Unanswered questions from earliest days of the iPhone
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

71. http://www.flickr.com/photos/adventuresof/111667571/
    Say What?
    

    View Slide

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
    

    View Slide

73. What makes something an app?
    

    View Slide

74. How do user’s expectations
    change when they consider
    something to be an app?
    

    View Slide

75. Four related questions
    and few small details
    

    View Slide

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

    View Slide

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

    View Slide

78. How many platforms will you adapt to?
    

    View Slide

79. What about desktop browsers?
    

    View Slide

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

    View Slide

81. 2. What impact does going chromeless
    have on our user experiences?
    

    View Slide

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

    View Slide

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

    View Slide

84. What happens when you remove browser chrome?
    display: "fullscreen"
    No URL, tabs, menu or back button!
    

    View Slide

85. Full screen does have hidden controls
    Pull down for reload
    Swipe from bottom
    for navigation bar
    

    View Slide

86. We’re spoiled by our browsers
    Photo by Garry Wilmore, http://bit.ly/2noXVxq
    

    View Slide

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

    View Slide

88. The warm comforts of the browser
    info, refresh,
    download
    tabs
    downloads
    find in page
    

    View Slide

89. The warm comforts of the browser
    sharing
    printing
    email
    

    View Slide

90. Roughing it in app land
    

    View Slide

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?
    

    View Slide

92. View Slide

93. Where does this button go?
    Does it do the same thing as
    the browser back button?
    Should
    there be an
    app back
    button?
    

    View Slide

94. .backButton {
    display: none;
    }
    @media (display-mode: standalone), (display-mode: fullscreen) {
    .backButton {
    display: block;
    }
    }
    Display mode media query
    

    View Slide

95. Not every customer or potential customer will add
    your Progressive Web App to their home screen
    …but every visitor will install your PWA!
    

    View Slide

96. View Slide

97. http://codepen.io/mariusbalaj/full/Jtqbm/
    

    View Slide

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

    View Slide

99. View Slide

100. View Slide

101. View Slide

102. Experimental Web Share API to Enable Native Sharing
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

108. PWA != SPA
     

     View Slide

109. View Slide

110. 4. What part of your site should be
     made into a Progressive Web App?
     

     View Slide

111. Desktop
     Facebook is
     one app.
     

     View Slide

112. View Slide

113. Whole site apps
     

     View Slide

114. Whole site apps
     

     View Slide

115. Whole site apps
     

     View Slide

116. Subdomain apps
     

     View Slide

117. Tearaway Apps
     

     View Slide

118. Tearaway Apps
     

     View Slide

119. Tearaway Apps
     

     View Slide

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?
     

     View Slide

121. What makes something an app?
     

     View Slide

122. How do user’s expectations
     change when they consider
     something to be an app?
     

     View Slide

123. Great PWAs
     will get the
     details right.
     

     View Slide

124. Caching and offline strategy
     

     View Slide

125. Cache for performance and offline fallback
     

     View Slide

126. Cache for performance and offline fallback
     

     View Slide

127. Cache recently viewed content for offline use
     

     View Slide

128. Cache recently viewed content for offline use
     

     View Slide

129. Cache recently viewed content for offline use
     

     View Slide

130. Let people choose what to cache offline
     

     View Slide

131. Let people choose what to cache offline
     

     View Slide

132. Cache app ahead of time
     

     View Slide

133. Cache app ahead of time
     

     View Slide

134. AMP to PWA Install Path
     

     View Slide

135. Accelerated Mobile Project
     

     View Slide

136. Accelerated Mobile Project
     

     View Slide

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

     View Slide

138. Push notification etiquette
     

     View Slide

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

     View Slide

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

     View Slide

141. View Slide

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

     View Slide

143. View Slide

144. Planning for
     your PWA
     

     View Slide

145. Progressively
     Punny
     

     View Slide

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
     

     View Slide

147. Every step on
     the path to a
     PWA makes
     sense on its
     own.
     

     View Slide

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

     View Slide

149. View Slide

150. Thank You!
     

     View Slide