Did you ever make your Progressive Web Application (PWA) possible to be installed on a phone or desktop device? Well, it is possible and effortless to achieve, especially if we are using Vue.js.

Using Vue CLI, we only need to choose the right features when creating a project, and everything is automatically set up for us. If you already have a project running that is not a problem, the plugin can be added whenever we want.

Once a user installs your PWA, it can be run like any other native app.

Why would I want a user to install my PWA?

_The same reason you’d want a user to install your app from any app store. Users who install are your most engaged users. Users who install a PWA have better engagement metrics than casual visitors, including more repeat visits, longer time on site and higher conversion rates, often at parity with native app users on mobile devices. — _web.dev

Criteria

To be able to install a PWA, some rules must be fulfilled. Some of those rules are:

• The web app not being installed already;
• Be served over HTTPS;
• Include a Web App Manifest;

Different browsers have similar criteria, although minor differences can exist.

Using Vue CLI, we can get it working without doing any code. Let’s try it.

Create the Project

Start by creating a new project using Vue CLI with PWA support.

vue create your-project-name

To answer the first question, pick “Manually select features” …

Manual select features

… which will allow us to enable PWA support.

Enable Progress Web App (PWA) Support

The next questions answer as you like. It won’t have any impact on the experiment that we are doing here.

The installation of the application can not be accomplished in development mode, so to test it, we need to create a distribution build and then serve it using a simple HTTP server.

# enter inside the project
cd your-project-name

# create a production build
yarn build # or npm run build
# enter inside the build generated
cd dist/
# run the application
npx http-server

Note that when we create the production build, a dist folder is generated in the root of the project and inside this folder, between others, a file named manifest.json , one of the requirements to install the app. To customize its values, check the documentation of the plugin documentation.

Now, if we open http://localhost:8080/ in our browser, we can see the default template generated by the Vue CLI. To Google Chrome, the localhost is considered a secure domain, so another requirement is already being fulfilled.

#pwa #apps #installation #vuejs #vue #programming