Vue PWA tutorial: How To Build Efficient Progressive Web Apps Using Vue.js

Introduction To Building Progressive Web App In Vue.JS {Part 1}

PWA's or Progressive Web Apps is quickly becoming a global trend in the digital world. This Vue PWA tutorial aims to get you started with how to build your very own Progressive Web App (PWA) with one of the most popular framework of the JavaScript- VueJS.

What Really is a PWA ?
A progressive Web App is a mobile efficient version of a  Webapp. or basically a website that acts like a mobile app.

It is a mobile ready version of a website that is easily accessible,.

In areas or conditions where the fully functional version of the Application or Website would struggle to function, a PWA would perform better.

A really cool example of a PWA is the “lite” version of  twitter –“Twitter Lite”.  One super cool thing about Progressive Web Apps is that there is no long process of installation. You just need to "Add to Home Screen".

We usually see the installation process of  PWA and omit it as something insignificant.

One efficient example is observed when you visit twitter on a mobile Smartphone- e.g. an android phone, you will most likely come across a pop-up that says- “Add to Home Screen”.  

The entire installation process involved in the installation of the PWA simply involves the user clicking the “Ok” button.

Once That is done, you will notice a small icon on your launcher similar to other applications you have installed from the Playstore or Appstore.

Another pretty amazing advantage of PWA’s is that, they are cross-platform i.e. they run on different devices, Android and IOS alike, this is because they are browser based- they make use of the devices browser to operate.

From the point of view of a developer, Progressive Web Apps have bring a good advantage over native applications. Because a Progressive Web Application is Web based;

Progressive Web Apps can be written in any desired framework;
One code to rule them all: it is cross-platform and cross-devices (because the code is executed by the  user’s browser).
Easy to ship: no need to go through the process of downloading it through the Playstore or Appstore Store.
Thanks to Manifest {manifest.json} and Service Workers {sw.js, service-worker.js}, PWA's Are able to be discovered and indexed by search engines and this may go a long way to help increase the popularity of the app.
What is the Manifest.json?

An Example manifest.json file for a Progressive Web App

{
"name": "PWA Tutorial From Fremer Inc",
"short_name": "Fremer Inc",
"icons": [{
"src": "img/icon.png",
"sizes": "62x62",
"type": "image/webp"
}, {
"src": "img/icon2.png",
"sizes": "64x64"
}, {
"src": "img/icon3.png",
"sizes": "128x128",
"density": 2
}],
"scope": "/pwa/",
"start_url": "/pwa/start.html",
"display": "fullscreen",
"orientation": "landscape"
}

The Progressive Web App Manifest is a JSON document that provides application data while building PWAs eg, data like "name", "short name", "image/logo"...

What are Service Workers?
Service workers is a script your chrome browser pickup and run in the background, completely separate from a web page, opening the door to features that don’t need a web page or user interaction. Such as push notifications, background-sync, Offline support etc.

Vue PWA Tutorial
Before we begin this Vue.js PWA tutorial, there are some important factors we should consider before  proceeding to build our Progressive Web App.

What To Consider When Building a PWA
Before Building a Progressive Web App, even with technologies and a web framework as sophisticated as Vue, there are a lot of factors to consider in order to ensure the application really is progressive .

Factors like Site Responsiveness is maintained in all instances, load time is quick and synchronous, ensuring that all necessary assets are bundled and minimized to the greatest possible extent

How To Create a PWA with Vue.js
A simple way to build a PWA with vue.js is to create a starter PWA template.

Lets get started,

Npm install –g @vue-cli

Depending on the version of vue installed on your terminal, you might be required to update your vue installation to at least vu3 3.0 .when I tried creating my first vue app, I was directed to uninstall my current version of vue by typing

npm uninstall –g @vue.cli

I then reinstalled to the current version by entering

npm install –g @vue/cli

once vue has been installed and running, we can...

Continue reading at Vue PWA tutorial {Contiune Reading!}