Vue during coffee break - Transform any Vue application into offline-ready PWA in 5 minutes.
Tags: javascript, vue, webdev, beginners
Published: 2019-04-18 09:49:33

---
title: Vue during coffee break - Transform any Vue application into offline-ready PWA in 5 minutes.
published: true
description: In this short article I will explain how to transform existing Vue application into PWA or how to set up new one.
tags: javascript, vue, webdev, beginners
cover_image: https://cdn.pixabay.com/photo/2015/09/25/23/10/coffee-958410_1280.jpg
series: Vue during coffee break
canonical_url: https://dev.to/vue-storefront/vue-during-coffee-break-transform-any-vue-application-into-offline-ready-pwa-in-5-minutes-31dm
---

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](https://developers.google.com/web/progressive-web-apps/) 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>
```
2. Install @nuxtjs/pwa module
```
npm i @nuxtjs/pwa
```
3. Register module in `nuxt.config.js`

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

4. (optional) Create `static/icon.png` (recommended 512x512px) which will be used as a homescreen icon for your app.
5. (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](https://developers.google.com/web/tools/workbox/modules/workbox-cli#generateSW)) 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](https://pwa.nuxtjs.org/modules/manifest.html))
- **Meta** - Automatically adds SEO friendly meta data with manifest integration. ([read more](https://pwa.nuxtjs.org/modules/meta.html))
- **Icon** - Automatically generates app icons with different sizes. ([read more](https://pwa.nuxtjs.org/modules/icon.html)). 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](https://pwa.nuxtjs.org/modules/onesignal.html)

# 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](https://developers.google.com/web/tools/workbox/modules/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! 

![](https://developers.google.com/web/tools/workbox/images/modules/workbox-cli/cli-wizard.png)
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!