pwa-popup

提供一个弹窗组件，允许用户手动刷新 PWA Service Worker 。

该插件必须和 pwa 插件 一起使用，并且 skipWaiting 配置项不能设置为 true 。

当新的 Service Worker 就绪时，会在页面右下角出现一个弹窗，询问用户是否需要激活处于 Waiting 状态的 Service Worker 。

使用方法

  1. npm i -D @vuepress/plugin-pwa-popup@next
  1. const { pwaPlugin } = require('@vuepress/plugin-pwa')
  2. const { pwaPopupPlugin } = require('@vuepress/plugin-pwa-popup')
  4. module.exports = {
  5.   plugins: [
  6.     pwaPlugin(),
  7.     pwaPopupPlugin({
  8.       // 配置项
  9.     }),
  10.   ],
  11. }

配置项

locales

  • 类型： Record<string, { message: string, buttonText: string }>

  • 详情：

    弹窗在不同 locales 下的信息。

    如果没有指定该配置项，它会降级使用默认信息。

  • 示例：

  1. module.exports = {
  2.   plugins: [
  3.     pwaPlugin(),
  4.     pwaPopupPlugin({
  5.       locales: {
  6.         '/': {
  7.           message: 'New content is available.',
  8.           buttonText: 'Refresh',
  9.         },
  10.         '/zh/': {
  11.           message: '发现新内容可用',
  12.           buttonText: '刷新',
  13.         },
  14.       },
  15.     }),
  16.   ],
  17. }

样式

你可以通过 CSS 变量来自定义弹窗的样式：

@code css