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.
- (optional) If it's a new project set it up with
create-nuxt-app
npx create-nuxt-app <project-name>
- Install @nuxtjs/pwa module
npm i @nuxtjs/pwa
- Register module in
nuxt.config.js
{
modules: [
'@nuxtjs/pwa',
],
}
- (optional) Create
static/icon.png
(recommended 512x512px) which will be used as a homescreen icon for your app. - (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 yournuxt.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 yournuxt.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!
Top comments (3)
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.
How about making database offline capable read/write?
Then you can check my library vue-offline github.com/filrak/vue-offline or github.com/robinvdvleuten/vuex-per... for vuex directly