pwa-popup

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

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

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

安装

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

配置项

locales

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

• 详情：

  弹窗在不同 locales 下的信息。

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

• 示例：

module.exports = {
  plugins: [
    ['@vuepress/plugin-pwa'],
    [
      '@vuepress/plugin-pwa-popup',
      {
        locales: {
          '/': {
            message: 'New content is available.',
            buttonText: 'Refresh',
          },
          '/zh/': {
            message: '发现新内容可用',
            buttonText: '刷新',
          },
        },
      },
    ],
  ],
}

• 参考：
  • 指南 > 多语言支持

样式

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

: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;
}