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

Concatenate Conference 2018 — Designing Progressive Web Apps

Concatenate Conference 2018 — Designing Progressive Web Apps

Jason Grigsby

August 10, 2018
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Designing
    Progressive
    Web Apps

    View Slide

  2. We need a
    progressive
    web app!

    View Slide

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

    View Slide

  4. View Slide

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

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

    View Slide

  7. View Slide

  8. What is a
    progressive
    web app?

    View Slide

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

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

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

    View Slide

  12. LET’S DO THIS!

    View Slide

  13. 1. Making it feel like an app
    2. Installation and Discovery
    3. Offline mode
    4. Push Notifications
    5. Beyond PWAs

    View Slide

  14. 1. Making it feel like an app

    View Slide

  15. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. How many platforms will you adapt to?

    View Slide

  20. Will you jump every time the platform changes?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. We’re spoiled by our browsers

    View Slide

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

    View Slide

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

    View Slide

  27. The warm comforts of the browser
    sharing
    printing
    email

    View Slide

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

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

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

    View Slide

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

  32. Fast, Fluid Experience

    View Slide

  33. Smooth Pages — Avoid Jumps, Use Skeleton Pages

    View Slide

  34. App Shell model of PWAs

    View Slide

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

    View Slide

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

    View Slide

  37. PWA != SPA

    View Slide

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

    View Slide

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

  40. 2. Installation and Discovery

    View Slide

  41. { 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

  42. Startup Screen with Background Color
    Chrome Opera Samsung

    View Slide

  43. Theme Color
    Chrome Default Theme Color
    Chrome Custom Theme Color

    View Slide

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

    View Slide

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

    View Slide

  46. Add to Home Screen Badges

    View Slide

  47. Add to Home Screen Banners
    Chrome Opera

    View Slide

  48. Add to Home Screen Banner’s
    Engagement Heuristic

    View Slide

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

    View Slide

  50. Chrome Changing Add-to-Homescreen Behavior

    View Slide

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

  52. 3. Offline Mode

    View Slide

  53. Cache for performance and offline fallback

    View Slide

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

  55. Let User’s Choose What They Want Offline

    View Slide

  56. Pre-cache Content and Apps

    View Slide

  57. Give People Control

    View Slide

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

  59. 4. Push Notifications

    View Slide

  60. Many
    Hidden
    Challenges

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. View Slide

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

    View Slide

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

  69. How do we
    create a plan
    for this?

    View Slide

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

  71. Define Your Ideal
    Progressive Web App

    View Slide

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

  73. Benchmark & Plan to Measure

    View Slide

  74. Assess Current Website

    View Slide

  75. Is Your Website
    Reasonably Fast?

    View Slide

  76. Is it Usable?

    View Slide

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

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

    View Slide

  79. View Slide

  80. Thank You!

    View Slide

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