How to make a Progressive Web App using Vue.js
Progressive Web Apps can be developed using the Vue.js framework.
PWA has been the topic of many discussions on the web over the past few years. Most often its main issue was limited support in Safari or in Edge. However, everything changed in 2018, because both browsers were configured to release updates supporting the basic building blocks required for PWA.
What is PWA?
As we mentioned earlier, the Progressive Web App uses modern Web features to interact with users, especially on mobile devices. They develop from the browser pages to the top applications, supporting a low connection to the Internet at any time.
There are many things that developers need to consider when creating a PWA, including ensuring that your application responds by default, loads quickly and asynchronously, and that all assets are merged and minimized as well as possible. All this is a good design and development practice for the Internet, mobile and others. In addition, PWA are supported on such web technologies as Service Workers, Push Notifications and App Manifests, that make them really similar to applications. For a complete list of PWA tips and technologies, see the PWA checklist from Google .
Creating a PWA using Vue
Although the creation of PWA requires the use of some new technologies and also a certain method of application development, it is not necessary to make efforts to include all these elements in the application. In fact, if you make your application using Vue.js, you can get everything you need from the CLI, which can raise the full PWA starter using a single command.
Before we start, you need to install Vue CLI.
Open the terminal window and enter the following:
npm install -g @vue.cli
Or, if you prefer Yarn as a package manager:
yarn global add @vue/cli
For this article, it is assumed that you already have Vue CLI version 3 or higher installed. If you do not know which version you have, enter the following command:
If the version is below 3, run one of the above commands to install the latest version. Now you are ready to work with Vue.
After you have installed the CLI, run the “vue create” command, and when prompted, select the “Manually select features” option. Next you will see this screen:
Select the “Progressive Web App (PWA) Support” option, as well as any other functions that are necessary in your application. Once you’re done, CLI will set all the dependencies and raise the project.
Now open the application directory in any text editor. If you are viewing a directory created by the CLI, you will notice several elements that are required to create the PWA, including the manifest.json file, Service Worker registration, favicon icons, and mobile-friendly icons. Some of them will need to be changed for your application, but Vue CLI has just saved a lot of time for you by including these things in the set.
When you create your application, you will want to make sure that it is ready for PWA during development. Fortunately, Google provides an excellent tool for testing and auditing the PWA called Lighthouse, and this tool is built into the latest versions of Chrome.
npm run build
First, you need to test the production assembly of the application, so run the following command, which will create the production distribution of the application:
npm run serve -s dist
When you start the application, go to the tab in which it is running, and open the Chrome dev tools. Then go to the “Audits” tab, then “Perform an Audit.”. After starting the tool will simulate the mobile device and pass a series of tests before evaluating and some suggestions for improving your application.
As you can see in the screenshot below, the created application has passed several checks, but still needs some improvements.
PWA is definitely the mainstream of 2018, having received improved support in all mobile browsers. Many people should think about using PWA to create their next application. And if you use Vue, you can start developing PWA in minutes.