Intermediate7 min readShare
Was this chapter helpful?
Share
You built a website — now you want it on phones. Here are your three options, from easiest to most powerful.
Don't worry — you won't write any mobile app code by hand. Your AI tool handles all the technical parts. This guide helps you understand the concepts so you can describe what you want.
Most people think they need a mobile app when a responsive website would do the job. Ask yourself:
A responsive website is enough when:
You need a mobile app when:
A PWA is your website with superpowers. Users can "install" it on their home screen, it works offline, and it feels like a native app — but it's still just your website. No App Store approval, no app fees, no separate codebase.
What you get:
What you don't get:
Make my site a PWA
"Convert my Next.js website into a Progressive Web App (PWA). Add a web app manifest with my app name, icons (192x192 and 512x512), theme color, and display: standalone. Set up a service worker for offline caching of static assets. Add a meta tag for mobile web app capable. Make sure the app can be installed on home screens on both iOS and Android."
Capacitor wraps your existing website in a native shell, turning it into a real iOS/Android app. You keep your existing code and add native features (camera, push notifications, GPS) through plugins. It's like putting your website in a phone-shaped frame.
What you get:
What to know:
Wrap my site with Capacitor
"Add Capacitor to my existing Next.js project so I can publish it as a native iOS and Android app. Install @capacitor/core and @capacitor/cli, initialize Capacitor with my app name, configure the webDir to point to my build output, and add the iOS and Android platforms. Set up the Capacitor config file. Then show me how to build and open the project in Xcode (iOS) and Android Studio."
Build a truly native mobile app from scratch using React Native (JavaScript) or Flutter (Dart). The app uses real native UI components — buttons, scrolling, and animations all feel like a "real" app because they are. This is the same approach used by Instagram, Airbnb, and Discord.
What you get:
What to know:
Start a React Native app
"Create a new React Native app using Expo. Set up the project with TypeScript, React Navigation for tab and stack navigation, and a clean folder structure. Create a home screen with a welcome message, a settings screen with a profile form, and tab navigation between them. Use NativeWind (Tailwind for React Native) for styling. Make sure it runs on both iOS and Android."
Here's what the user actually experiences with each path — from their perspective, not yours:
| PWA | Capacitor | React Native | |
|---|---|---|---|
| Difficulty | Easy | Medium | Hard |
| Time to build | Hours | Days | Weeks |
| App Store listing | No | Yes | Yes |
| Push notifications | Limited | Yes | Yes |
| Camera / GPS | Limited | Yes | Yes |
| Offline support | Yes | Yes | Yes |
| Reuse web code | 100% | 90%+ | Some (React) |
| Native feel | Good | Good | Best |
| Cost | Free | $99/yr (Apple) | $99/yr (Apple) |
Our recommendation: Start with a PWA. If you need App Store presence or native features, upgrade to Capacitor. Only go React Native if you're building a daily-use app where native performance matters (social media, messaging, games).
You have a portfolio site built with Next.js and deployed on Vercel. You want it to feel like an app on your phone — with a home screen icon, full-screen mode, and offline support. You add a web app manifest, configure a service worker to cache your pages, and add the right meta tags. Now when you visit your site on your phone, the browser offers 'Add to Home Screen' and your portfolio lives right next to Instagram and Twitter.
Build this with AI
"Convert my Next.js portfolio site into a Progressive Web App. Add a manifest.json with the app name 'My Portfolio', theme color #5046E5, background color #FFFFFF, display standalone, and icons at 192x192 and 512x512. Set up a service worker that caches all static assets and pages for offline use. Add the required meta tags for iOS (apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style) and Android. Make sure the 'Add to Home Screen' prompt works on both platforms."
