Claude Code Boilerplate
FeaturesPricingBlogDocs
Get started →

Product

  • Features
  • Pricing
  • Skills

Compare

  • vs ShipFast
  • vs MakerKit
  • vs supastarter

Resources

  • Docs
  • Blog
  • Discord

Legal

  • License
  • Privacy Policy
  • Terms of Service
Claude Code Boilerplate

© 2026 Claude Code Boilerplate. All rights reserved.

← All posts

How to Make Your Next.js SaaS Installable -- PWA Support Without Building a Native App

September 10, 2026
nextjssaaspwaboilerplateengagement

Your SaaS lives in a browser tab. One of hundreds. Every time a user opens their computer, they have to find your tab, or type your URL again, or dig through bookmarks.

Users who install a native app open it from their home screen or dock. It is just there. That is the difference between a product people forget and one they reach for.

Building native iOS and Android apps costs $30,000 to $100,000 and takes six months or more. But there is a faster path: Progressive Web Apps (PWAs). A PWA turns your existing web app into something users can install on any device -- iPhone, Android, Mac, Windows -- without going through an app store. No second codebase. No app store fees. No review queue.

What you actually get with PWA support

A PWA is not a native app. It runs in a browser engine. But for most SaaS use cases, the experience is close enough to matter:

  • Installable: users click "Add to Home Screen" and your app appears as an icon on their device
  • Offline support: the app shell loads even with no internet, showing a clear offline message instead of a blank white page
  • Push notifications: re-engage users with real-time alerts -- payments received, new messages, mentions -- the same channel your mobile users expect
  • Full-screen mode: no browser chrome when opened from the home screen, so it feels like a real app

The business case is simple. Users who install your SaaS retain at two to three times the rate of users who only bookmark it. An install is a commitment. Push notifications give you a direct channel to bring them back. And for B2B tools, an installable app signals legitimacy to buyers who expect "an app" before they sign a contract.

The right moment to ask for an install

Most users will not install your app unless you ask. The best time to ask is right after they hit a meaningful milestone: created their first project, sent their first invoice, saw their first result. That is the moment they understand the value.

A well-placed install prompt at that point converts far better than a banner on the homepage. The browser controls whether the install prompt is available -- your app signals readiness, the browser decides -- but you control when your UI surfaces it.

What the boilerplate handles

The Next.js SaaS Boilerplate includes a /pwa skill that scaffolds the full PWA setup:

  • A manifest.webmanifest file with your app name, icons, theme color, and display mode
  • A service worker registered at startup that caches the app shell for fast loads
  • An InstallPrompt component that listens for the beforeinstallprompt browser event and shows a custom install button at the right moment
  • Push notification scaffolding with a subscription endpoint ready to connect to a notification service

You do not write any of this from scratch. The skill generates the files, wires them into your Next.js app, and gives you a working install flow.

One decision to make first: how much to cache offline

Service workers cache files on the user's device. The question is what you cache.

For a SaaS dashboard, the right answer is almost always "cache only the shell" -- the static assets that make the app load fast, while fetching live data from your API on every request. Users get instant load times and your data stays fresh.

Where this gets interesting: if your product has content users want offline -- a notes app, a field inspection tool, a time-tracking app for remote crews -- you can cache specific routes and data too. But that is a separate feature decision. Start with shell caching. Add more only if your users ask for it.

What PWA cannot do yet

PWAs on iOS have improved significantly since 2020, but there are still limits:

  • Push notifications require iOS 16.4 or later
  • Background sync (queuing actions while offline and replaying them when back online) has limited support
  • File system access is more restricted than native apps

For a B2B SaaS or a productivity tool, these gaps rarely matter. For a mobile-first consumer app that needs iOS push from day one, you might need a native wrapper like Capacitor on top of your web app.

A concrete path to your first install

The fastest way to add PWA support today:

  1. Run the PWA skill in the Next.js SaaS Boilerplate to generate the manifest, service worker, and install prompt component
  2. Add your app icons (512x512 minimum, with a 192x192 variant for older devices)
  3. Set your theme color to match your brand
  4. Drop the InstallPrompt component into your dashboard, triggered after the user completes a meaningful first action
  5. Test on a real device -- Chrome on Android, Safari on iOS 16.4+

Start there. Push notifications and offline caching can come once you confirm users are actually installing.

Your SaaS does not need to live in a browser tab. Add PWA support this weekend and give your users a reason to put it on their home screen.