Vue during coffee break - Transform any Vue application into offline-ready PWA in 5 minutes.

The purpose of this series is to post small tips about advanced Vue concepts that can be quickly applied into every application and give you a new weapon to approach problems.

In this short article I will explain how to transform existing Vue application into PWA or how to set up new one.

What are Progressive Web Apps?

In short words Progressive Web App (PWA) is a web application that works and behaves like a native one.

Some of PWA capabilities are:

• ability to work offline
• homescreen installation
• support for push notifications

If you want to know more i strongly suggest reading this document. Now let's write some code.

PWA Module for Nuxt

If you're using Nuxt adding PWA features works the same for new and existing apps.

1. (optional) If it's a new project set it up with create-nuxt-app

npx create-nuxt-app <project-name>

1. Install @nuxtjs/pwa module

npm i @nuxtjs/pwa

1. Register module in nuxt.config.js

{
    modules: [
        '@nuxtjs/pwa',
    ],
}

1. (optional) Create static/icon.png (recommended 512x512px) which will be used as a homescreen icon for your app.
2. (optional) Add sw.* rule to .gitignore file to avoid commiting files generated by Nuxt module.

Nuxt PWA module is in fact a set of smaller PWA submodules. Let's give them a look after we're done with the installation:

• Workbox - under the hood Nuxt PWA module is using Workbox in generateSW mode (You can find configuration options here) which means it will automatically generate us a service Worker file that will take care of caching our static assets. Every file from your dist directory will be cached for offline usage. This module works out of the box
• Manifest - Automatically generates manifest.json file. This module works out of the box but can be configured via manifest property of your nuxt.config.js (read more)
• Meta - Automatically adds SEO friendly meta data with manifest integration. (read more)
• Icon - Automatically generates app icons with different sizes. (read more). This module works out of the box but can be configured via icon property of your nuxt.config.js
• OneSignal - Free background push notifications using OneSignal. OneSignal is a platform that allows to easily send push notifications to the user. You can read how to configure this module here

Vue-cli PWA plugin

If you're using vue-cli 3.x installation is even easier.

For new projects after running

vue create <project_name>

select Manually select features on the first step and then check Progressive Web Apps with spacebar.

After finishing the installation process along with standard files generated by vue-cli you will find registerServiceWorker.js and manifest.json. You can customize behavior of the plugin under pwa property of your vue.config.js and under pwa.workboxOptions you can customize underlying Workbox plugin in generateSW mode (same that we have seen in Nuxt).

For already existing projects on vue-cli 3 installation of @vue/pwa plugin will have exactly the same effect. You can add PWA capabilities to your app by simply typing

vue add @vue/pwa

Other Projects

If you're not using Nuxt or vue-cli 3.x you can still transform your application into offline-ready PWA with just a few commands by using Workbox CLI.

First you need to install the cli:

npm install workbox-cli --global

Next in the root of your project we should make use of a wizard that will generate Service Worker for us:

workbox wizard

After answering prompted questions wizard will generate a workbox-config.js file that will be used to generate a Service Worker!

You can generate your service worker with

workbox generateSW workbox-config.js

Those simple steps can significantely boost your application performance so they're certainly worth a try ;)

Stay tuned for the next parts of the series!

Comments

[rsbertoa90]

hey!. im having somme trouble with mi first pwa with nuxt.

Suppose i made a page /offline to show when the pwa is offline.
How would i configure the sw module in nuxt config to cache the vue components implied in /offline route and redirect there when offline?.

There is really few post about nuxt specific problems in stackoverflow and other devs forums... is pretty hard to fin solution to specific problems like this.

[Laurensius Adi]

How about making database offline capable read/write?

[Filip Rakowski]

Then you can check my library vue-offline github.com/filrak/vue-offline or github.com/robinvdvleuten/vuex-per... for vuex directly