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

Planning Your Progressive Web App

Planning Your Progressive Web App

Five factors to consider as you plan and build your progressive web app.

Jason Grigsby

April 08, 2019
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Planning Your
    Progressive
    Web App

    View Slide

  2. View Slide

  3. View Slide

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

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

  16. Making it feel like an app

    View Slide

  17. View Slide

  18. Like obscenity and brunch, web apps can be
    described but not defined.
    —Jeremy Keith, By any other name

    View Slide

  19. Make it look
    native?
    https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt

    View Slide

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

    View Slide

  21. How many platforms will you adapt to?

    View Slide

  22. What about desktop browsers?

    View Slide

  23. Will you jump every time the platform changes?

    View Slide

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

    View Slide

  25. More immersive experience
    https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/

    View Slide

  26. Manifest file display options
    display: "standalone" display: "fullscreen"
    display: "browser" display: “minimal-ui”

    View Slide

  27. We’re spoiled by our browsers

    View Slide

  28. The warm comforts of the browser

    View Slide

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

    View Slide

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

    View Slide

  31. The warm comforts of the browser
    sharing
    printing
    email

    View Slide

  32. Roughing it in app land

    View Slide

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

  34. View Slide

  35. Where does this button go?

    View Slide

  36. Where does this button go?
    Does it do the same thing as
    the browser back button?

    View Slide

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

  38. View Slide

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

    View Slide

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

  41. Losing Our URLs

    View Slide

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

    View Slide

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

    View Slide

  44. Make it Easy to Copy and Paste

    View Slide

  45. Web Share API

    View Slide

  46. Fast, Fluid Experience

    View Slide

  47. Provide Immediate Feedback

    View Slide

  48. Animate Transitions to
    Support Wayfinding

    View Slide

  49. Smooth Pages — Avoid Jumps, Use Skeleton Pages

    View Slide

  50. App Shell model of PWAs

    View Slide

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

    View Slide

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

    View Slide

  53. PWAs are a trojan horse
    for performance.

    View Slide

  54. WARNING: App Shell model often assumes
    you’re building a single page application

    View Slide

  55. PWA != SPA

    View Slide

  56. Personality & Polish

    View Slide

  57. Apps Just “Feel Better”

    View Slide

  58. View Slide

  59. Native Code Doesn’t Guarantee Delight

    View Slide

  60. Attention to detail and polish

    View Slide

  61. Animate Transitions for
    Wayfinding and Polish
    https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

    View Slide

  62. Personality
    Amazing SVG Animation
    by Darin Senneff
    https://codepen.io/
    dsenneff/full/
    2c3e5bc86b372d5424b00
    edaf4990173/

    View Slide

  63. Should feeling like an app be the goal?
    Should feeling
    like an app be
    your goal?

    View Slide

  64. Feel Like an App
    Website with
    Performance
    Improvements
    Full screen, app
    shell with native
    design language
    Minimal-ui
    Standalone
    System Fonts Fullscreen
    Animation and Polish App Shell
    Native Design
    MORE COMPLEX
    LESS COMPLEX

    View Slide

  65. 2. Installation and Discovery

    View Slide

  66. Add to Home
    Screen Prompts

    View Slide

  67. Add to Home Screen Badges
    Firefox Samsung
    Non PWA
    PWA

    View Slide

  68. Add to Home Screen Badges
    Firefox Samsung
    Non PWA
    PWA

    View Slide

  69. Add to Home Screen Badges

    View Slide

  70. Add to Home Screen Banners
    Chrome Opera

    View Slide

  71. Add to Home Screen Banner’s
    Engagement Heuristic

    View Slide

  72. Pick the Optimal Time to Ask for Install
    Asking on order
    confirmation page
    resulted in 3x
    increase in
    conversion for
    Flipkart

    View Slide

  73. Chrome Changing Add-to-Homescreen Behavior

    View Slide

  74. App Stores

    View Slide

  75. PWAs don’t no
    need an app store!

    View Slide

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

    View Slide

  77. View Slide

  78. View Slide

  79. PhoneGap

    View Slide

  80. Remember, your PWA is your website so
    all the normal web marketing applies.

    View Slide

  81. Installation and Discovery
    No Add to
    Home Screen
    Native
    App Stores
    Manifest
    Spiders find PWA
    Manually submit PWA PhoneGap
    Trusted Web Activity
    MORE COMPLEX
    LESS COMPLEX

    View Slide

  82. Offline Mode

    View Slide

  83. Cache for performance and offline fallback

    View Slide

  84. Offline Fallback Pages
    Can Keep People
    Engaged
    • Trivago found that 67% of people
    continue to browse the site when they
    come back online.
    Source: http://bit.ly/2GoXjCi

    View Slide

  85. Cache recently viewed content for offline use

    View Slide

  86. Display the Information You Have

    View Slide

  87. Let User’s Choose What They Want Offline

    View Slide

  88. Pre-cache Content and Apps

    View Slide

  89. Give People Control

    View Slide

  90. Offline Interactivity — Background Sync
    https://developers.google.com/web/updates/2015/12/background-sync

    View Slide

  91. Offline Interactivity — Or Disallow Editing

    View Slide

  92. View Slide

  93. Offline
    Cache for
    Performance
    Only
    Offline
    Interactivity
    Offline
    Fallback
    Offline
    Indicator
    Cache Recently
    Viewed Pages
    Disable
    Interactivity
    Pre-cache
    Predetermined Pages
    Pre-cache
    Dynamic Items
    User Choose
    What to Cache
    MORE COMPLEX
    LESS COMPLEX

    View Slide

  94. 4. Push Notifications

    View Slide

  95. Notification JS is
    Relatively Easy

    View Slide

  96. Many
    Hidden
    Challenges

    View Slide

  97. 3x Higher Conversion for Personalized Notifications

    View Slide

  98. Flowchart for how Slack
    decides whether to send
    a notification or not.
    https://twitter.com/codevisuals/status/
    838881724016787457

    View Slide

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

    View Slide

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

    View Slide

  101. View Slide

  102. Twitter Lite handles push notifications well
    Browser prompt Confirm and Customize
    Twitter prompt

    View Slide

  103. View Slide

  104. 62 63
    https://cloudfour.com/thinks/time-to-update-your-permissions-ux/

    View Slide

  105. Push Notifications
    No Push
    Notifications
    Personalized and
    Integrated
    Notifications
    CMS
    Plugin
    Subscribe via
    Push Provider
    One-off Marketing
    Push Notifications
    Background
    Updates
    Notification
    Design
    Analytics and
    Segmentation
    Backend
    Integration
    MORE COMPLEX
    LESS COMPLEX

    View Slide

  106. Beyond PWAs

    View Slide

  107. Accelerated Mobile Project

    View Slide

  108. I have some opinions about AMP…

    View Slide

  109. But if you must AMP, then AMP to PWA Install Path
    https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/

    View Slide

  110. Auto-login with
    Credential
    Management API

    View Slide

  111. Payment Request API

    View Slide

  112. View Slide

  113. View Slide

  114. View Slide

  115. Beyond PWAs
    Basic PWA Multiple New APIs
    Autofill Support
    AMP to PWA
    Credential Management API
    Camera, other sensors Payment Request API
    AMP in PWA
    MORE COMPLEX
    LESS COMPLEX

    View Slide

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

  117. Define Your Ideal
    Progressive Web App

    View Slide

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

  119. Benchmark & Plan to Measure

    View Slide

  120. Progressive Web App Blueprint
    Planning &
    Definition

    View Slide

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

    View Slide

  122. Assess Current Website

    View Slide

  123. Is Your Website
    Reasonably Fast?

    View Slide

  124. Is it Usable?

    View Slide

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

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

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

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

    View Slide

  129. View Slide

  130. More details in the book!
    Follow @thepwabook, @pwastats or
    @grigs for updates.
    https://abookapart.com/products/
    progressive-web-apps
    No
    28
    PROGRESSIVE
    WEB APPS
    Jason Grigsby

    View Slide

  131. View Slide

  132. Thank You!

    View Slide

  133. Thank You!
    My Secret Plan to Rule the World by Ann H
    Smartphone on Bridge by Jeremy Levin
    Instagram App on iPhone by Pixabay
    Southbank - Samsung Galaxy S8 (1) by TaylorHerring
    Now THIS is comfort! by Garry Wilmore
    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