Progressive Web App, VueJS, Web Application, Web Development

Getting started with PWAs in VueJS

In my previous post, I wrote about progressive web apps, why we should adopt them and the businesses that already have. In this post, I would share how I built my website as a PWA in Vuejs using Vue CLI 3.

To understand some of the concepts that would be discussed (or even overlooked) in this post, It is important to know web development to a certain level because the step by step of building a website would not be covered here. The primary focus of this is Progressive Web Apps.

 

Installations

To follow this, please download Vue CLI 3. Vue CLI requires node.js. If you have Vue previously installed, you can check your version by running the command below in your terminal:

vue --version

You should see 3.x. (I am working with version 3.0.3). If you have an old version, you can install the new package by running one of these commands:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

If you do not have Vue installed, you can run this command to install the latest version of Vue:

npm install vue

Once you have Vue installed, you’re set to create a new project. In your terminal, move to the directory where you want to create your project and run the command below to create a project:

vue create my-website

You will be prompted to pick a preset. Choose “Manually select features”.

Once that is done, choose all the features you want to add. From the router to the Vuex state manager and many others, feel free to explore your options. To make your website a PWA, remember to add “Progressive Web App (PWA) Support” to your list of features.

 

What Next?

Adding the PWA support adds a manifest.json file to the public/ directory in your project. The manifest is very important as this enables a user to be prompted to add your web app to their home screen. This manifest file would need to be updated with the necessary information for your application.

As I stated in my previous post, PWAs make your app available offline so the PWA support also adds the registerServiceWorker.js file in the src/ directory of your project. After a successful production build, your app would have a service-worker.js file and this is where all the offline first magic happens.

 

How about the other PWA requirements?

Some more PWA requirements like having the application served over HTTPS or responsive design would not be covered. To serve your application over HTTPS, simply install an SSL certificate on whatever domain you will be hosting. Responsive design is also very important since the application would be installable on mobile devices. Bootstrap and Materialize are very good frontend frameworks for responsive design.

Now we have created the Vuejs app with PWA support. It is time to get to work and actually build the site. In the next post, we would be auditing our web app.

 

Spread the love
Tagged , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *