$30 off During Our Annual Pro Sale. View Details »

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.

Jason Grigsby

April 04, 2017
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

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