How I Added a Progressive Web App (PWA) to My Website using Claude Code & Claude Co-work
Want your website visitors to save your site directly to their phone or desktop like a native app—without dealing with the Apple App Store or Google Play Store?
In this video, I walk you through how I added a Progressive Web App (PWA) prompt to my main website using AI. Watch step-by-step as I use Claude Code and Claude Co-work to generate the code, create the app assets, handle edge cases, and push updates live.
What You’ll See in This Video:
What a PWA Is & Why You Need One: How an "Add to Home Screen" shortcut gives visitors instant 1-click access to your site.
Building with Claude Code & Claude Co-work: Watching AI generate the code, manage image assets, and configure static files.
Real-World Troubleshooting: Dealing with image cache issues, testing browser compatibility, and fixing broken buttons live on camera.
Deployment & Final Test: Verifying the shortcut works on desktop and checking the final installed app UI.
Timestamps:
0:00 - Introduction: What is a Progressive Web App (PWA)?
0:32 - Demo: How the PWA shortcut looks on a live site
1:04 - Using Claude Code to build the PWA files & assets
2:14 - Uploading updates to server hosting
2:30 - Live testing & requesting design changes from Claude
4:44 - Troubleshooting: Fixing the install button bug
5:46 - Verifying desktop installation & final results
6:52 - Final thoughts & advice for DIY site owners
