# Enable PWA Support for VuePress

PWAs, Progressive Web Applications are web applications which is loaded as a website, but can also provide native app functionalities, such as offline mode, push notification, hardware access, and more. For more info about PWA, please read the articles metioned in References.

# Environment

The environment I used:

macOS Mojave, 10.14.3
VuePress 0.14.10

I setup my blog (opens new window) as a PWA successfully. You may visit my blog (opens new window) on your phone (Chrome on Android recommended) to see how it works.

# Setup

Accroding to Google's instruction (opens new window), to make a website support PWA, it needs to meet the following criteria:

The web app is not already installed.
- and prefer_related_applications is not true.
Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)
Includes a web app manifest that includes:
- short_name or name
- icons must include a 192px and a 512px sized icons
- start_url
- display must be one of: fullscreen, standalone, or minimal-ui
Served over HTTPS (required for service workers)
Has registered a service worker with a fetch event handler

While all the criteria above are met, the visitors will see a mini info bar on their screen, click on which will pop a dialog that allow user to install the website as an app.

Let's see how to do this. It's simple that can be done in minutes with following steps.

# Config Service Worker

To enable the service workder in VuePress, edit .vuepress/config.js and add the line:

module.exports = {
    serviceWorker: true,

    // more configs
}

1
2
3
4
5

After this config, VuePress will now generate a service worker while building the website. Please note that the service worker requires HTTPS to work.

# Config Manifest

PWA needs manifest and icon to work. Edit .vuepress/config.js and add the line:

module.exports = {
    head: [
        ['link', { rel: 'manifest', href: '/manifest.json' }],
        ['link', { rel: 'icon', href: '/icon.png' }],
    ],

    // more configs

1
2
3
4
5
6
7

Then create manifest.json under .vuepress/public/ with content:

{
  "name": "PWA WebSite",
  "short_name": "PWA Site",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",  // or fullscreen, or minimal-ui
  "background_color": "#FFFFFF",
  "theme_color": "#272822"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

You may change the content above based on your website.

And then place your icon image under .vuepress/public/ also. Please note that the image must be as least 512px sized.

# Conclusion

You may verify your PWA by using Chrome dev-tool's Audit tool. Or manually visit your website on your phone at least twice in 30 seconds to see if the mini info bar shows up.

# References

PWA (opens new window) on Wikipeida
Progressive Web Apps (opens new window) on Google Developers | Web