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/

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