@vuepress/plugin-pwa

PWA plugin

Install

  1. yarn add -D @vuepress/plugin-pwa
  2. # OR npm install -D @vuepress/plugin-pwa

Usage

  1. module.exports = {
  2. plugins: ['@vuepress/pwa']
  3. }

TIP

To make your site fully PWA-compliant, you need to:

  • provide a web app manifest and icons in .vuepress/public,
  • add correct head links in .vuepress/config.js (see example below).

For more details, see MDN docs about the Web App Manifestpwa - 图1.

Here is an example of a fully PWA-compliant configuration with VuePress:

  1. module.exports = {
  2. head: [
  3. ['link', { rel: 'icon', href: '/logo.png' }],
  4. ['link', { rel: 'manifest', href: '/manifest.json' }],
  5. ['meta', { name: 'theme-color', content: '#3eaf7c' }],
  6. ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
  7. ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
  8. ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
  9. ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
  10. ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
  11. ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
  12. ],
  13. plugins: [
  14. [
  15. '@vuepress/pwa',
  16. {
  17. serviceWorker: true,
  18. updatePopup: true
  19. }
  20. ]
  21. ],
  22. }

Options

serviceWorker

  • Type: boolean
  • Default: true

If set to true, VuePress will automatically generate and register a service workerpwa - 图2 that caches the content for offline use (only enabled in production).

There is a aliased module @sw-event module that will also be emitting the following events:

  • sw-ready
  • sw-cached
  • sw-updated
  • sw-offline
  • sw-error

TIP

Since you can only register service workers under HTTPs URLs, make sure you can deploy your site with SSL before enabling this option.

generateSWConfig

  • Type: object
  • Default: {}

generateSW configpwa - 图3 of workbox-build.

updatePopup

  • Type: boolean|object
  • Default: undefined

The definition of type popupConfig is as follows:

  1. interface normalPopupConfig {
  2. message: string; // defaults to 'New content is available.'
  3. buttonText: string; // defaults to 'Refresh'
  4. }
  5. interface localedPopupConfig {
  6. [localePath: string]: normalPopupConfig
  7. }
  8. type popupConfig = normalPopupConfig | localedPopupConfig

This option enables the popup to refresh contents. The popup will be shown when the site is updated (i.e. service worker is updated). It provides refresh button to allow users to refresh contents immediately.

If without the refresh button, the new service worker will be active after all clientspwa - 图4 are closed. This means that visitors cannot see new contents until they close all tabs of your site. But the refresh button activates the new service worker immediately.

popupComponent

  • Type: string
  • Default: undefined

A custom component to replace the default popup component.

Also see:

Migration from 0.x

Service Worker

  1. module.exports = {
  2. - serviceWorker: true,
  3. + plugins: ['@vuepress/pwa']
  4. }

SW-Update Popup

  1. module.exports = {
  2. themeConfig: {
  3. - serviceWorker: {
  4. - updatePopup: {
  5. - message: "New content is available.",
  6. - buttonText: "Refresh"
  7. - }
  8. - }
  9. },
  10. + plugins: {
  11. + '@vuepress/pwa': {
  12. + serviceWorker: true,
  13. + updatePopup: {
  14. + message: "New content is available.",
  15. + buttonText: "Refresh"
  16. + }
  17. + }
  18. + }
  19. }

For i18n user:

  1. module.exports = {
  2. themeConfig: {
  3. '/': {
  4. - serviceWorker: {
  5. - updatePopup: {
  6. - message: "New content is available.",
  7. - buttonText: "Refresh"
  8. - }
  9. - }
  10. },
  11. '/zh/': {
  12. - serviceWorker: {
  13. - updatePopup: {
  14. - message: "发现新内容可用",
  15. - buttonText: "刷新"
  16. - }
  17. - }
  18. }
  19. },
  20. + plugins: {
  21. + '@vuepress/pwa': {
  22. + serviceWorker: true,
  23. + updatePopup: {
  24. + '/': {
  25. + message: "New content is available.",
  26. + buttonText: "Refresh"
  27. + },
  28. + '/zh/': {
  29. + message: "发现新内容可用",
  30. + buttonText: "刷新"
  31. + }
  32. + }
  33. + }
  34. + }

It's worth mentioning that the PWA plugin has above i18n built in, so if you want to use the default i18n directly, you can abbreviate the above configuration as:

  1. module.exports = {
  2. plugins: {
  3. '@vuepress/pwa': {
  4. serviceWorker: true,
  5. updatePopup: true
  6. }
  7. }
  8. }

Feel free to submit PRs to improve the default i18n configurationpwa - 图5.

Customize the UI of SW-Update Popup

The default sw-update popup component provides a default slot which gives you the ability to fully control the appearance of the popup.

First, you need to create a global component (e.g. MySWUpdatePopup) at .vuepress/components. A simple component created based on the default component is as follows:

  1. <template>
  2. <SWUpdatePopup v-slot="{ enabled, reload, message, buttonText }">
  3. <div
  4. v-if="enabled"
  5. class="my-sw-update-popup">
  6. {{ message }}<br>
  7. <button @click="reload">{{ buttonText }}</button>
  8. </div>
  9. </SWUpdatePopup>
  10. </template>
  11. <script>
  12. import SWUpdatePopup from '@vuepress/plugin-pwa/lib/SWUpdatePopup.vue'
  13. export default {
  14. components: { SWUpdatePopup }
  15. }
  16. </script>
  17. <style>
  18. .my-sw-update-popup {
  19. text-align: right;
  20. position: fixed;
  21. bottom: 20px;
  22. right: 20px;
  23. background-color: #fff;
  24. font-size: 20px;
  25. padding: 10px;
  26. border: 5px solid #3eaf7c;
  27. }
  28. .my-sw-update-popup button {
  29. border: 1px solid #fefefe;
  30. }
  31. </style>

Then, update your plugin config:

  1. module.exports = {
  2. plugins: {
  3. '@vuepress/pwa': {
  4. serviceWorker: true,
  5. + popupComponent: 'MySWUpdatePopup',
  6. updatePopup: true
  7. }
  8. }
  9. }

Also see: