PWA stands for Progressive Web Application. PWA is basically a website that runs on your mobile browser. But when you see the UI, it is similar to any app.
Normally, when you want to create an app, you have to develop apps for different platforms.
Like making apps for the IOS platform and putting them in the app store Or make an app for Android and put it on google play, Similarly, make an app for windows then put it in Microsoft store
What happens in the case of progressive web apps is that you don’t have to do different development. You need to create an HTML file based web app that can be opened in any browser, no matter which platform any user can access it in.
Benefits of PWA
- Short loading time
- App-like features (add to the home screen, push notifications, offline mode)
- Good performance in poor network conditions
- It should be fast and respond quickly to user interactions
- It feels like an app
- It loads instantly
- No need to publish PWA on the app store
- Low page size compared to the app
What are the Technical components of a PWA ?
PWA has some important technical components.
1. Service workers
A Service Worker is basically a client-side proxy which is a feature of the browser that we control with JavaScript.
When you request your app and your web, your data goes through the service worker. The service worker first sees the data in the cache, if data is in the cache, then the service worker extracts the data from the cache and returns the data to the app. And if the data is not in the cache, then it goes to the network and takes a copy of the data from the network, and keeps a copy in its cache. And after that, it gets the data back to your app.
Another thing is that you need to use the HTTPS server to run this service worker, which means your app and your web server must be on a secure server because the service worker does not work on HTTP. The service worker also handles the push notification.
2.The manifest file
The manifest file is also known as a web app manifest. These are simple JSON files that tell your browser about your web application and tells it how to behave when it is installed on your user’s mobile devices and desktop. This file contains some important things like App name, App icon, start URL means when he opens, which URL should be opened, background color, the display means how to display, theme color, etc.
The following is the sample manifest file :
PWA vs. Native Apps
PWA basically is still your website, but it has some features like a native app like the very first is OFFLINE AVAILABILITY
The whole website can be available offline like native apps (Facebook, WhatsApp, etc. ). Facebook, WhatsApp, etc works offline even if you are connected or not connected to the network, in the same way, your PWA is available offline.
The second feature is: PUSH NOTIFICATIONS
You might have seen in native apps that you get a notification in your Lock Screen. You can also generate push notifications with PWA.
There is another important feature: ADD TO HOME SCREEN
Users can add your website to their home screen and it will be available for them just like an app. It’s available the same way as any native app icon it is available when we install from App Store or Play Store. In the same way, an icon of your website will be generated to their home screen. And when the user clicks on your icon from their home screen-that you can also decide how you would like to display your website to your user i.e. Should it open like a native app? Or maybe like a website shown in the browser where address bar etc. is shown or maybe any other way.
PWA for VueJS Application
Installation Command
npm i @vue/cli-plugin-pwa
Configuration
We can handle this configuration from the vue.config.js file or by using PWA property.
Example Configuration // Inside Vue.config.js
References :
https://www.npmjs.com/package/@vue/cli-plugin-pwa