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
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
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
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
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
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!
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?
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
46. Cache recently viewed content for o ff line use
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
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
62. Beyond PWAs Basic PWA Multiple New APIs Autofill Support Credential Management API Camera, other sensors Payment Request API WebAuthN MORE COMPLEX LESS COMPLEX
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.
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.