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

Planning Your PWA by Gerardo Rodriguez and Jason Grigsby

Planning Your PWA by Gerardo Rodriguez and Jason Grigsby

A Progressive Web App can be as simple as adding a service worker and a manifest file to an existing website or as complex as spotify.com. How do you decide which features of a PWA make sense for your users and your business? What does it mean to be an “app” and how much does your PWA have to feel like one? This session will provide a framework for thinking about Progressive Web App features and how to put together a roadmap that delivers incremental improvements that benefit users.

Presented at PWA Summit 2021:
https://pwasummit.org/sessions/planning-a-progressive-web-app/

Jason Grigsby

October 14, 2021
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Planning Your PWA
    Jason Grigsby, Co-Founder, Cloud Fou
    r

    Gerardo Rodriguez, Senior Front-end Developer, Cloud Four

    View Slide

  2. Factors to Consider


    When Planning Your PWA

    View Slide

  3. O
    ff
    line Interactivity
    Cache for Perf Only O
    ff
    line
    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

  4. 1. Making it feel like an app

    View Slide

  5. View Slide

  6. Like obscenity and brunch, web apps can be
    described but not defined.


    —Jeremy Keith, By any other name

    View Slide

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

    View Slide

  8. View Slide

  9. View Slide

  10. Animate Transitions for
    Wayfinding and Polish


    https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

    View Slide

  11. Personality
    Amazing SVG Animation
    by Darin Senne
    ff

    https://codepen.io/
    dsenne
    ff
    /full/
    2c3e5bc86b372d5424b00
    edaf4990173/

    View Slide

  12. Get /category.html
    Send /category.html and JS app
    Page
    Browser Server
    Get products
    Send products
    API Server
    Get green hoodie
    Send green hoodie
    JS App
    Single Page
    Application
    (SPA)

    View Slide

  13. PWA != SPA

    View Slide

  14. Turbo in
    tercepts click Gets document from
    server
    Title
    CSS
    JavaScript
    Body
    Title
    CSS
    JavaScript
    Body
    Replaces certain changed
    elements, discards rest
    Turbo and
    Hotwire for
    SPA-like
    experiences

    View Slide

  15. Maybe?

    View Slide

  16. Seamless embeds and navigation with Portals. Created by Adam Argyle.
    Portals

    View Slide

  17. Shared Element Transitions API

    View Slide

  18. View Slide

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

    View Slide

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

  21. View Slide

  22. 2. Installation and Discovery

    View Slide

  23. Add to Home
    Screen Prompts

    View Slide

  24. Add to Home Screen Install Prompts
    Chrome Edge

    View Slide

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


    Controlling when the
    prompt shows up is
    now what every PWA
    must do.

    View Slide

  26. App Stores

    View Slide

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

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

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

    View Slide

  35. What does installation of a PWA mean?
    When is a PWA really installed?

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. Why focus on this?
    Instead of all of this?

    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. Installation and Discovery
    No Add to
    Home Screen
    Native
    App Stores
    Manifest
    Install Prompt
    Time Install Prompt Capacitor
    Trusted Web Activity
    MORE COMPLEX
    LESS COMPLEX

    View Slide

  42. 3. O
    ff
    line Mode

    View Slide

  43. Cache for performance and o
    ff
    line fallback

    View Slide

  44. View Slide

  45. View Slide

  46. Cache recently viewed content for o
    ff
    line use

    View Slide

  47. View Slide

  48. O
    ff
    line
    Cache for
    Performance
    Only
    O
    ff
    line
    Interactivity
    O
    ff
    line
    Fallback
    O
    ff
    line
    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

  49. 4. Push Notifications

    View Slide

  50. Many
    Hidden
    Challenges

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. 3x Higher Conversion for Personalized Notifications

    View Slide

  55. Flowchart for how Slack
    decides whether to send
    a notification or not.


    https://twitter.com/codevisuals/status/
    838881724016787457

    View Slide

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

    View Slide

  57. 5. Beyond PWAs

    View Slide

  58. Auto-login with
    Credential
    Management API
    and WebAuthN

    View Slide

  59. Payment Request API

    View Slide

  60. View Slide

  61. View Slide

  62. Beyond PWAs
    Basic PWA Multiple New APIs
    Autofill Support
    Credential Management API
    Camera, other sensors
    Payment Request API
    WebAuthN
    MORE COMPLEX
    LESS COMPLEX

    View Slide

  63. View Slide

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


    O
    ff
    line fallback


    It’s a PWA!
    service worker
    Oct 18


    O
    ff
    line pages


    O
    ff
    line indicator


    Improved font loading
    Nov 22


    Push notifications


    HTTP/2 Link Preload
    Dec 7


    Small tweaks


    PWA announced

    View Slide

  65. Progressive Web App Blueprint
    Planning &
    Definition

    View Slide

  66. Define Your Ideal
    Progressive Web App

    View Slide

  67. O
    ff
    line
    Interactivity
    Cache for
    Perf Only
    O
    ff
    line
    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

  68. Benchmark & Plan to Measure

    View Slide

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

    View Slide

  70. 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
    O
    ff
    line 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

  71. 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
    O
    ff
    line 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

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

    View Slide

  73. View Slide

  74. https://abookapart.com/products/
    progressive-web-apps

    View Slide

  75. Thank You!

    View Slide

  76. Thank You!
    Close-Up Photography of Bicycle Chain by Miguel Á. Padriñán


    White Blank Notebook by Tirachard Kumtanom


    Schedule Planning by Startup Stock Photos


    Tin Foil Man by Gratiosgraphy

    Man Holding an Apple by cottonbro


    Coming Soon by cottonbro


    Apple O
    ff
    ice Internet iPad by Pixabay


    Woman Jumping by Quang Anh Ha Nguyen


    Person Holding Black Smartphone by freestocks.org


    SEM by Pixabay

    Similar cubes with RULES inscription by Joshua Miranda


    In Hiding by Taylor McBride


    My Secret Plan to Rule the World Book by Ann H


    White Auto Gauge by Mikes Photos


    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 folks who shared their work under Creative Commons.

    View Slide

  77. View Slide