Planning Your PWA Jason Grigsby, Co-Founder, Cloud Fou r Gerardo Rodriguez, Senior Front-end Developer, Cloud Four

Factors to Consider When Planning Your PWA

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

1. Making it feel like an app

No content

Like obscenity and brunch, web apps can be described but not defined. —Jeremy Keith, By any other name

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

No content

No content

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

Personality Amazing SVG Animation by Darin Senne ff https://codepen.io/ dsenne ff /full/ 2c3e5bc86b372d5424b00 edaf4990173/

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)

PWA != SPA

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

Maybe?

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

Shared Element Transitions API

No content

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

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

No content

2. Installation and Discovery

Add to Home Screen Prompts

Add to Home Screen Install Prompts Chrome Edge

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.

App Stores

PWAs don’t no need an app store!

No content

No content

No content

No content

No content

No content

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

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

No content

No content

No content

Why focus on this? Instead of all of this?

Not every customer or potential customer will add your Progressive Web App to their home screen …but every visitor will “install” your PWA!

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

3. O ff line Mode

Cache for performance and o ff line fallback

No content

No content

Cache recently viewed content for o ff line use

No content

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

4. Push Notifications

Many Hidden Challenges

No content

No content

No content

3x Higher Conversion for Personalized Notifications

Flowchart for how Slack decides whether to send a notification or not. https://twitter.com/codevisuals/status/ 838881724016787457

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

5. Beyond PWAs

Auto-login with Credential Management API and WebAuthN

Payment Request API

No content

No content

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

No content

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

Progressive Web App Blueprint Planning & Definition

Define Your Ideal Progressive Web App

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

Benchmark & Plan to Measure

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

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

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

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

No content

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

Thank You!

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.

No content