Have you ever thought that a website could behave like a native app on mobile devices—such as Swift for iOS or Java/Kotlin for Android? Or the possibility of using an application offline while still supporting basic display and interaction features?
Let me introduce you to a solution for this: it's called a Progressive Web App (PWA).
What is Progressive Web App (PWA) and what does It offer ?
Introduced by Google in 2015, it emerged as a solution that enables websites to function with features similar to a regular native app. Its goal is to bring significant benefits to both users and developers by reducing the cost of developing separate native apps for iOS and Android.
As mentioned earlier, although it is a website, it behaves like a native app. Therefore, it includes the following similar features:
- Add to Home Screen: Allows users to add the application to their home screen without needing to access the website or display the browser's address bar.
- Offline Functionality: PWAs allow applications to work in offline mode by downloading, storing, and serving content in the background via a Service Worker.
- Push Notifications: A PWA can still receive and display notifications directly on the device.
- Fast and Smooth Performance: Since resources are pre-cached, loading times and delays are significantly reduced.
- Cross-Platform Compatibility: Can run on various browsers and devices (Android, iOS, desktop) using a single codebase.
How to Integrate PWA into Your Vue Project ?
Let's try implementing PWA in combination with a project. In this article, I will integrate it with Vue 3. Most popular programming languages in 2025
1. Create a Vue Project
First, create a new Vue project (if you haven't already).
Once the process is complete, navigate to the newly created project and install the node_modules by running the command npm install or npm i.
2. Install the PWA Plugin.
We will install PWA plugin into the project using the following command.
3. Update vite.config.js file (If not automatically updated)
You can manually configure the vite.config.js file as follows.
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
vue(),
// Below code is configuration for PWA
VitePWA({
manifest: {
name: 'Example VUE + PWA',
short_name: 'VuePWA',
description: 'Vue 3 + PWA!',
theme_color: '#42b983',
background_color: '#ffffff',
display: 'standalone',
start_url: '/',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
}
})
]
})
In the configuration above, you’ll notice the manifest: {…} section, which is used to describe the PWA to the browser. For example:
- name: The full name of the application when installed on the device
- short_name: A shorter name (displayed below the app icon)
- theme_color: The primary color of the browser’s title bar
- display: The display mode of the application; 'standalone' makes it behave like a native app
- icons: The icons shown when the app is installed
4. Add display icons for the project after using Add to Home Screen
You can choose any icon. Here, I have added the following two icons to the /public folder.
5. Build and preview project
After you have finished configuring the vite.config.js file and adding the icons.
You need to run the following command.
Once the build is complete, the files manifest.webmanifest and registerSW.js will be generated.
- manifest.webmanifest: Provides configuration information that allows the browser to "install" the web application like a mobile app, based on the settings you defined in vite.config.js.
- registerSW.js: Used to register the Service Worker, which enables the PWA to function offline.
Next, run the project using the following command, then access the URL provided after the command is executed to open it in the browser.
6. Inspect the PWA using DevTools
After opening the browser, press F12 or use the shortcut Ctrl + Shift + I to open DevTools when using browser on window or Option + Command + I when using safari on Mac.
In the Application tab, check the sections for Manifest and Service Worker.
Manifest will contain the information you previously provided in the vite.config.js file.
Service Worker will indicate that it is currently active.
Feature Testing
Since PWA offers many features, in this article I will only test one of them — Add to Home Screen feature.
I will perform the test in a desktop environment.
Click on the download icon in the browser’s address bar.
A prompt will appear—click “Install” to proceed.
At this point, the PWA has been added to your home screen, and you can run it like any other regular application.
And just like that, you have successfully integrated PWA into your own project.
Conclusion
Progressive Web App (PWA) is a major advancement in modern web development. While it doesn’t completely replace native apps, it significantly enhances the web application experience to feel more like a mobile app than ever before.
It offers speed, reliability, low cost, and ease of deployment—making it a solid choice for small and medium-sized businesses looking to build both a website and a native-like app.
Although this article does not cover everything that PWA has to offer, I hope it has helped you gain a better understanding of what PWA is all about.
Whether you need scalable software solutions, expert IT outsourcing, or a long-term development partner, ISB Vietnam is here to deliver. Let’s build something great together—reach out to us today. Or click here to explore more ISB Vietnam's case studies.
References
[1] https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
[2] https://viblo.asia/p/gioi-thieu-ve-progressive-web-apps-maGK7WPBKj2