pwa-popup

Provide a popup component for users to activate the new PWA service worker manually.

This plugin must be used together with pwa plugin, and the skipWaiting option must not be set to true.

When the new service worker is ready, a popup will appear in the right bottom of the page to ask users to activate the waiting service worker.

Usage

npm i -D @vuepress/plugin-pwa-popup@next

import { pwaPlugin } from '@vuepress/plugin-pwa'
import { pwaPopupPlugin } from '@vuepress/plugin-pwa-popup'

export default {
  plugins: [
    pwaPlugin(),
    pwaPopupPlugin({
      // options
    }),
  ],
}

Options

locales

• Type: Record<string, { message: string, buttonText: string }>

• Details:

  The messages of the popup in different locales.

  If this option is not specified, it will fallback to default messages.

• Example:

export default {
  plugins: [
    pwaPlugin(),
    pwaPopupPlugin({
      locales: {
        '/': {
          message: 'New content is available.',
          buttonText: 'Refresh',
        },
        '/zh/': {
          message: '发现新内容可用',
          buttonText: '刷新',
        },
      },
    }),
  ],
}

• Also see:
  • Guide > I18n

Styles

You can customize the style of the popup via CSS variables:

:root {
  --pwa-popup-z-index: 10;

  --pwa-popup-text-color: #2c3e50;
  --pwa-popup-bg-color: #ffffff;
  --pwa-popup-border-color: #3eaf7c;
  --pwa-popup-shadow: 0 4px 16px var(--pwa-popup-border-color);

  --pwa-popup-btn-text-color: #ffffff;
  --pwa-popup-btn-bg-color: #3eaf7c;
  --pwa-popup-btn-hover-bg-color: #4abf8a;
}