Going PWA: Making a Web App Feel Like a Native App

 

What If You Could Ship an App Without an App Store?

"Shouldn't this be on the App Store?" That was the question I heard every time I showed Tarot Master to someone. When I explained it runs in a browser, people looked confused. It looks like an app, but it's not one? The technology that bridges that gap is PWA.

Progressive Web App. The name sounds grand, but the concept is straightforward. Add a few configuration files to a website so it can be installed on a user's home screen, work offline, and even send push notifications. No App Store review, no developer registration fee. For side projects, it doesn't get better than this.

Why PWA Makes Practical Sense for Side Projects

Building a native app as a side project is nearly impossible. iOS requires learning Swift and paying a $99 annual developer fee, plus passing App Store review. Supporting Android adds Kotlin to the mix. Cross-platform frameworks like React Native or Flutter are an option, but they introduce a learning curve of their own.

PWA means adding a few configuration files to an existing web app. Applying PWA to Tarot Master, already built with React and Vite, wasn't adopting an entirely new technology. It was layering a thin enhancement on top of what already existed.

The cost comparison is stark. No App Store listing needed. Updates ship the moment files hit the server. No review queue means bug fixes deploy instantly. For a solo side project, nothing is more practical.

vite-plugin-pwa: Starting with a Single Config

Implementing PWA in a Vite project was surprisingly simple. A single plugin, vite-plugin-pwa, handles most of the work automatically.

When I told Claude "I want to add PWA to Tarot Master. The stack is Vite, React, and TypeScript," I got a step-by-step walkthrough from plugin installation to configuration. Install the plugin, add a few lines to the Vite config, and the service worker and manifest file are generated automatically.

Of course, "automatically" comes with caveats. Default settings meet PWA requirements, but project-specific tuning was still needed: app name, icons, theme color, caching strategies. The familiar pattern repeated: AI scaffolds the foundation quickly, and I handle the fine-tuning.

Service Workers: Flipping Cards Offline

The service worker is PWA's core technology. It's a script that sits between the browser and the server, intercepting network requests and serving cached resources instead. Offline functionality is entirely thanks to the service worker.

Offline support turned out to be a surprisingly natural fit for Tarot Master. The 78 card images and interpretation texts rarely change once downloaded. With the service worker caching these resources, card readings work without any network connection. On the subway, on a plane, in a cafe with spotty Wi-Fi, you can still flip tarot cards.

AI was helpful in choosing a caching strategy. After learning the differences between "Network First" and "Cache First" approaches, I selected based on Tarot Master's characteristics. Static resources like card images and interpretation text use Cache First. Dynamic content like real-time AI interpretations uses Network First. No single strategy fits everything, a lesson I absorbed through hands-on implementation.

The Manifest: Icons, Splash Screens, and Theme Power

The web app manifest is like the app's ID card. It defines the app name, icons, theme color, display mode, and everything users see when they "Add to Home Screen."

Icon work took more effort than expected. PWA requires multiple icon sizes. 192x192 and 512x512 are baseline, plus apple-touch-icon for iOS Safari. I designed Tarot Master's icon, a gold star on a dark navy background, and prepared it in every required dimension.

The splash screen got attention too. That brief loading screen when launching from the home screen sets the app's first impression. Tarot Master's navy background with a gold logo conveys "you're entering the world of tarot" from the very first moment.

Theme color was another important setting. Matching the mobile browser's address bar and status bar to the app's background color reduces the browser's visual presence and strengthens the app-like feel. Setting #0a0a1a as the theme color unified the status bar with the dark tone, noticeably boosting immersion.

The Difference "Add to Home Screen" Makes

PWA's true value reveals itself in the "Add to Home Screen" moment. The browser address bar disappears. The app opens in full screen. An independent icon sits on the home screen. In the app switcher, it appears as its own app. This experience shifts user perception from "just a website" to "this is an app."

The impact on return visits exceeded expectations. A bookmarked site requires opening the browser and navigating to the bookmark list. A home screen icon is one tap away. That single step of difference determines whether "Maybe I'll do a tarot reading today" becomes actual action or just a passing thought.

Choosing the standalone display mode was important. The fullscreen mode hides all browser UI, but removing back-gesture navigation can confuse users. Standalone hides only the address bar while preserving basic gestures, balancing the app-like feel with web-native convenience.

Native App vs. PWA: A Realistic Comparison

Honestly, PWA can't fully replace native apps. Push notification reliability, hardware access, and App Store discoverability still favor native. iOS PWA limitations are real; Safari's incomplete support for certain Web APIs is an ongoing constraint.

But in the context of a side project, the comparison is moot. There's no time or budget for a native app. If PWA delivers 80 percent of the native experience, that 80 percent is more than enough. The time and money that would go toward the remaining 20 percent is far better spent improving other features.

For Tarot Master specifically, PWA was the clear winner. No complex hardware access needed. Core functionality completes on the frontend. Frequent updates benefit from instant deployment without App Store review.

What Happens When You Ask AI to Set Up PWA

PWA configuration is an area where AI collaboration shines brightest. Service worker setup, manifest authoring, caching strategy selection -- these are tasks that, once properly configured, you're done with forever. But for someone doing it the first time, they can easily consume half a day bouncing between official docs and blog posts.

When I asked Claude to help with Tarot Master's PWA setup, I got tailored configuration considering the project's tech stack and characteristics. Which vite-plugin-pwa options to enable, the pros and cons of each caching strategy in our specific context. That's value you don't get from generic documentation searches.

But you can't just copy-paste AI-generated config blindly. Service worker misconfiguration can lock users into stale cached versions. Understanding what each setting means and testing it personally is mandatory. Start fast, but never follow blindly. That principle held for PWA setup too.

Seeing the Web's Potential Again

After applying PWA, my perception of "web apps" shifted. I used to think web and app were clearly separate categories. Web lives in the browser; apps are installed. PWA blurs that boundary. It combines the web's strengths (URL sharing, instant access, App Store independence) with app strengths (home screen installation, offline capability, full-screen display).

Making Tarot Master a PWA wasn't technically difficult. vite-plugin-pwa automated most of the complexity, and AI helped with fine-tuning. But the impact on user experience was wildly disproportionate to the technical effort. One of the highest return-on-investment tasks of the entire project.

What's Next

The app's shell was solid. Time to fill it in. In the next part, I cover reading history, streaks, social sharing, PDF reports, Instagram story cards, and a free-choice mode. Building features at speed with AI, the rush of velocity, and the story behind it.