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
  2. Factors to Consider When Planning Your PWA

  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
  4. 1. Making it feel like an app

  5. None
  6. Like obscenity and brunch, web apps can be described but

    not defined. —Jeremy Keith, By any other name
  7. Make it look native? https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt

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

  11. Personality Amazing SVG Animation by Darin Senne ff https://codepen.io/ dsenne

    ff /full/ 2c3e5bc86b372d5424b00 edaf4990173/
  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)
  13. PWA != SPA

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

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

    Portals
  17. Shared Element Transitions API

  18. None
  19. Should feeling like an app be the goal? Should feeling

    like an app be your goal?
  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
  21. None
  22. 2. Installation and Discovery

  23. Add to Home Screen Prompts

  24. Add to Home Screen Install Prompts Chrome Edge

  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.
  26. App Stores

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

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. Remember, your PWA is your website so all the normal

    web marketing applies.
  35. What does installation of a PWA mean? When is a

    PWA really installed?
  36. None
  37. None
  38. None
  39. Why focus on this? Instead of all of this?

  40. Not every customer or potential customer will add your Progressive

    Web App to their home screen …but every visitor will “install” your PWA!
  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
  42. 3. O ff line Mode

  43. Cache for performance and o ff line fallback

  44. None
  45. None
  46. Cache recently viewed content for o ff line use

  47. None
  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
  49. 4. Push Notifications

  50. Many Hidden Challenges

  51. None
  52. None
  53. None
  54. 3x Higher Conversion for Personalized Notifications

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

    or not. https://twitter.com/codevisuals/status/ 838881724016787457
  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
  57. 5. Beyond PWAs

  58. Auto-login with Credential Management API and WebAuthN

  59. Payment Request API

  60. None
  61. None
  62. Beyond PWAs Basic PWA Multiple New APIs Autofill Support Credential

    Management API Camera, other sensors Payment Request API WebAuthN MORE COMPLEX LESS COMPLEX
  63. None
  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
  65. Progressive Web App Blueprint Planning & Definition

  66. Define Your Ideal Progressive Web App

  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
  68. Benchmark & Plan to Measure

  69. Progressive Web App Blueprint Planning & Definition Technical Debt (if

    Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap
  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
  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
  72. Every step on the path to a PWA makes sense

    on its own.
  73. None
  74. https://abookapart.com/products/ progressive-web-apps

  75. Thank You!

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