Cindy Muthoni's Blog
Building Progressive Web Apps (PWAs) with Vue

Building Progressive Web Apps (PWAs) with Vue

Cindy Muthoni's photo
Cindy Muthoni
·

3 min read

Progressive Web Apps (PWAs) have gained popularity due to their ability to combine the best features of web and mobile applications. They provide a seamless, app-like experience on the web while being fast, reliable, and engaging. Vue.js, a progressive JavaScript framework, is an excellent choice for building PWAs due to its simplicity, flexibility, and strong community support.

In this article, we will explore how to build a PWA with Vue. We’ll cover the fundamental concepts of PWAs, the tools required, and a step-by-step guide to creating a PWA using Vue. By the end, you should have a solid understanding of how to create and deploy a Vue-based PWA.

Getting Started with Vue and PWA

Prerequisites

Before you start, make sure you have the following installed on your machine:

  • Node.js (LTS version recommended)

  • Vue CLI (Command Line Interface)

Setting Up a New Vue Project

To create a new Vue project, open your terminal and run:

npm install -g @vue/cli
vue create my-pwa-app

You will be prompted to select features for your project. Choose the default preset or manually select features if you want more control. Make sure to select the “PWA Support” option.

Adding PWA Support to an Existing Vue Project

If you already have an existing Vue project and want to add PWA support, you can do so by installing the Vue PWA plugin:

vue add pwa

This command adds the necessary files and configurations to turn your Vue application into a PWA.

Understanding the PWA Configuration

The vue add pwa command creates a few important files in your project:

  • ‘public/manifest.json’

  • ‘src/registerServiceWorker.js’

Manifest File

The ‘manifest.json’ file contains metadata about your app. This includes details like the app’s name, icons, theme colors, and display mode. Here is a sample ‘manifest.json’:

{
  "name": "My PWA App",
  "short_name": "PWA",
  "theme_color": "#4DBA87",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

This file tells the browser how to behave when your app is installed on a user’s device.

Service Worker

The ‘registerServiceWorker.js’ file is where the service worker is registered. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features like push notifications and background sync.

Here is a simplified version of ‘registerServiceWorker.js’:

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log('Service worker is active.');
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    }
  });
}

Building Your PWA

With the basic setup out of the way, let’s build a simple PWA using Vue. We’ll create a weather application that fetches weather data and works offline.

Step 1: Create a Basic Vue Component

First, create a new component called ‘Weather.vue’ in the ‘src/components’ directory:

<template>
  <div class="weather">
    <h1>Weather App</h1>
    <div v-if="weather">
      <h2>{{ weather.name }}</h2>
      <p>{{ weather.main.temp }}°C</p>
      <p>{{ weather.weather[0].description }}</p>
    </div>
    <button @click="fetchWeather">Get Weather</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weather: null
    };
  },
  methods: {
    async fetchWeather() {
      try {
        const response = await fetch(
          'https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric'
        );
        this.weather = await response.json();
      } catch (error) {
        console.error('Error fetching weather data:', error);
      }
    }
  }
};
</script>

<style scoped>
.weather {
  text-align: center;
}
</style>

Replace ‘YOUR_API_KEY’ with your OpenWeatherMap API key. This component fetches and displays weather data for London when the button is clicked.

Check it Out!

PWAs and VUE