Turn your Vue Web App into a PWA

Many say that Progressive Web Apps will be the new standard in the world of mobile apps. And in my opinion, they're probably right.

With tech giants like Google behind it, Progressive Web Applications became a fantastic technology that will soon make native mobile applications obsolete, or not?

PWAs using certain technologies to create apps that take the advantages of both native and web applications. It's a combination of mobile and web apps.

You no longer have to develop additional native apps for iOS or Android. If you already have a mobile website, you can quickly turn it into a PWA. And this works on almost every device.

You can access your device's internals, so you can send push notifications or capture video and audio. There is a great website, whatwebcando.today. You can see here an overview of many features, your current browser supports. It's incredible how much that is already. And it gets more and more.

Do you prefer to watch a video about this topic?

👉 Turn your Vue Web App into a PWA

The easy way

The crucial question is, how can you turn an existing Vue Web App into a Progressive Web Application?

With Vue.js, respectively, with the Vue/CLI, you have an impressive tool that does a lot of tasks for us. Not all, but a lot.

We usually install plugins with a package manager, like npm install and so on. But in this case, we can use the Vue/CLI tool, if the requested plugin a Vue/CLI plugin.

So we can use vue, and instead of the install command, we should use the add command.

vue add

With this, you can install a plugin in an already created project. And these plugins are shipped with a generator, which creates and changes some files automatically or tweaks the core Webpack configuration for us.

The plugin we need is @vue/pwa.

vue add @vue/pwa

Finally, you got a list of all added and changed files. A lot of images, the registerServiceWorker.js is essential and many more files.

Let's take a look around.

First, the package.json file and we have got two plugins. The first one is the register-service-worker plugin, and the second one is the PWA plugin.

"dependencies": {
  ...
  "register-service-worker": "^1.6.2",
  ...
},
"devDependencies": {
  ...
  "@vue/cli-plugin-pwa": "^4.1.2",
  ...
}

That's basically for the Webpack configuration, and if we are building our project, then this plugin generates all the necessary files we need for a progressive web app.

Next, we have in our source folder a new file, the registerServiceWorker.js.

/* eslint-disable no-console */

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

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    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)
    }
  })
}

This file imports the register function from this plugin, making it easier to register a Service Worker and detect browser capabilities.

And this function registers a service worker js file, which you can find in your dist folder if you haven't change the default configuration from your environment.

Furthermore, you have some new icons and images for your App. You find these files in the public folder from your project, under images/icons.

These are for mostly any device in different resolutions. If you want to change the default images, here is the place you can do this.

Conclusion

And now, you have a progressive web app.

That was a little first insight into this topic. It's more often the case that you already have an existing Vue project, instead of building an entirely new application.

The default setup, gives you precaching of all your build files, the ability to load your App offline, and many service worker registration events on which you can react in your App.