Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Jason Grigsby

November 16, 2018
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. The Case for
    Progressive
    Web Apps

    View Slide

  2. We need a
    progressive
    web app!

    View Slide

  3. What is a
    progressive
    web app?

    View Slide

  4. How do we
    create a plan
    for this?

    View Slide

  5. Do we need a
    progressive
    web app?

    View Slide

  6. How does the CEO even
    know about progressive
    web apps?

    View Slide

  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…

    View Slide

  8. View Slide

  9. How does the CEO even
    know about progressive
    web apps?

    View Slide

  10. View Slide

  11. View Slide

  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

    View Slide

  13. Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

    View Slide

  14. View Slide

  15. What is a
    progressive
    web app?

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22

    View Slide

  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

    View Slide

  28. Progressive web
    apps allow us to
    build experiences
    that previously
    required a native
    application.

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  32. View Slide

  33. Do we need a
    progressive
    web app?

    View Slide

  34. If so, you would probably benefit from a PWA.
    Does your organization have a website?

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

  38. DUH!

    View Slide

  39. Sometimes we need to restate the obvious.

    View Slide

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

    View Slide

  41. View Slide

  42. View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  46. View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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 ▾

    View Slide

  53. Not part of PWAs, but big speed boost only possible with HTTPS.

    View Slide

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

    View Slide

  55. The Washington Post PWA shows big speed increase

    View Slide

  56. The Washington Post PWA shows big speed increase

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. Push notifications
    can help increase
    engagement

    View Slide

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

    View Slide

  63. Manifest files are simple JSON documents

    View Slide

  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

    View Slide

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

    View Slide

  66. FUD
    Fear, Uncertainty, Doubt

    View Slide

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

    View Slide

  68. Reach people who don’t have your native app
    installed or are on a different device.

    View Slide

  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.

    View Slide

  70. The web can’t do
    [insert thing here]

    View Slide

  71. View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  81. View Slide

  82. View Slide

  83. View Slide

  84. https://www.flickr.com/photos/ashleyrosex/2861690380
    The web can do more
    than we think.

    View Slide

  85. But iOS
    doesn’t
    support
    PWAs…

    View Slide

  86. View Slide

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

    View Slide

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

    View Slide

  89. Wego
    • 50% increase in iOS conversion
    • 35% increase in average iOS session
    duration
    Source: Google, https://bit.ly/2uOsoNM

    View Slide

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

    View Slide

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

    View Slide

  92. PWAs are a trojan horse
    for performance.

    View Slide

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

    View Slide

  94. How do we
    create a plan
    for this?

    View Slide

  95. Progressively
    Punny

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  99. Progressive Web App Blueprint
    Planning &
    Definition

    View Slide

  100. Define Your Ideal
    Progressive Web App

    View Slide

  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

    View Slide

  102. Benchmark & Plan to Measure

    View Slide

  103. Progressive Web App Blueprint
    Planning &
    Definition
    Technical Debt
    (if Necessary)
    Gather team
    Brainstorm Ideal PWA
    Benchmarks and
    measurement plans
    Build roadmap

    View Slide

  104. Assess Current Website

    View Slide

  105. Is Your Website
    Reasonably Fast?

    View Slide

  106. Is it Usable?

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  110. View Slide

  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

    View Slide

  112. Thank You!

    View Slide

  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.

    View Slide