Web app vs native app: which should you build?

0:00 Web app vs native app

In this video, I'll show you the difference between a web app and a native app, so you know which one to build for your idea. We'll have Copilot build a glowing drawing app that runs in any browser, install it on the computer like a real app, and then see what it takes to turn the same app into a native one for the App Store and Google Play. You won't write any code. You'll need VS Code with Copilot connected to Linux, and Node.js, which we set up in earlier videos. The links are in the description.

0:34 Build the web app with one prompt

Describe the app to Copilot. Build me a neon kaleidoscope drawing app that runs in my browser. Everything I draw with my finger or mouse gets mirrored into a glowing mandala, with colors that shift as I draw. Add a clear button and a way to save my drawing as an image. Make it a Vite project, and make it installable as an app that works offline, so I can put it on my phone's home screen. While Copilot works, here's what you asked for. A web app is an app that runs in a web browser. It's built from the same parts as a website, but it does something, like a game, a tool or this drawing app. Every phone, tablet and computer has a browser, so one web app runs on all of them. You share it with a link, and when you change it, everyone gets the new version the next time they open it. There's no app store, no fee and no waiting for approval. The last part of the prompt makes it what's called a progressive web app. That means it can be installed like a regular app and keeps working without the internet. When it's done, click Keep.

1:41 Try it in the browser

Copilot put the two files that make it installable in the public folder. The manifest gives the app its name, its colors and its icon. And the service worker saves the app's files on your device, so it can start without the internet. In a new terminal, type npm run build to make the finished version. Then type npm run preview to run it on your computer. Open the address it shows in your web browser. Here it's Microsoft Edge, and Chrome works the same way. Now draw something. Every stroke is mirrored around the center, and the colors keep shifting as you go.

2:24 Install it like an app (PWA)

Because the app is installable, Edge shows an install button at the end of the address bar. Click it, then click Install. Edge offers to pin it to the taskbar and the Start menu, so click Allow. Now it runs in its own window, without the browser around it, and it has its own button on the taskbar, just like an app you downloaded. On a phone, you do the same thing with Add to Home Screen, and it gets an icon next to your other apps. Close it, and open it again from the Start menu, like any other app. It also works without a connection. Close the app again, then stop the server by clicking the terminal and pressing Control C. Now open the app from the Start menu. It still works, because it saved its files on your computer.

3:23 What a native app adds: App Store and Google Play

So that's a web app. A native app is built for one platform, like iPhone or Android, with that platform's own tools, and people get it from the App Store or Google Play. You don't have to start over to get there. Ask Copilot to turn it into a native Android app with Capacitor, ready to open in Android Studio, and to just set up the project for now. Capacitor is a free tool that puts your web app inside a real native app. It looks the same, but it can be listed in the stores and use the phone's features through plugins. Here's what a native app gets you. It can use everything the phone has, like Bluetooth, health data and home screen widgets, which a web app can't do on every phone. And people can find it by searching the App Store or Google Play, and pay for it right there. It also costs more. Publishing on Google Play costs twenty-five dollars, once. For the App Store, you need a Mac to build the iPhone version and an Apple developer account at ninety-nine dollars a year. And every update waits for the store's review before people get it. When it's done, click Keep. The new android folder is a whole Android project wrapped around your web app. To build it, you'd open it in Android Studio, Google's free app for making Android apps. Fully native apps go one step further and are written in each platform's own language, Swift for iPhone and Kotlin for Android, which means building the app twice.

4:55 Web or native: which should you build?

The simple rule is to build a web app first when you want to reach people fast. It's one app for every device, shared with a link, updated in seconds and free to put online. As you've seen, it can still be installed and work offline, and most ideas start right here. Go native when your idea needs something only the phone can give it, like Bluetooth or widgets, or when you want to be found and paid in the app stores. And since a web app can be wrapped later, starting on the web never wastes your work. That's all it takes to build an app that works everywhere, and to know when it's time to go native. You bring the ideas, the agent brings the know-how, and together you can finally build the app you've been dreaming about. Be sure to leave a like and subscribe, so we can keep bringing you more great videos.