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

Planning Your PWA by Gerardo Rodriguez and Jaso...

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. 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
  3. Like obscenity and brunch, web apps can be described but

    not defined. —Jeremy Keith, By any other name
  4. 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)
  5. 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
  6. 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
  7. 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.
  8. Not every customer or potential customer will add your Progressive

    Web App to their home screen …but every visitor will “install” your PWA!
  9. 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
  10. 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
  11. Flowchart for how Slack decides whether to send a notification

    or not. https://twitter.com/codevisuals/status/ 838881724016787457
  12. 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
  13. Beyond PWAs Basic PWA Multiple New APIs Autofill Support Credential

    Management API Camera, other sensors Payment Request API WebAuthN MORE COMPLEX LESS COMPLEX
  14. 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
  15. 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
  16. Progressive Web App Blueprint Planning & Definition Technical Debt (if

    Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap
  17. 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
  18. 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
  19. 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.