plugin-pwa

@vuepress/plugin-pwa 作用:网页内容有更新的时候有刷新按钮,可以把网页保存到桌面，当一个app一样使用

# 安装

yarn add -D @vuepress/plugin-pwa

# OR npm install -D @vuepress/plugin-pwa

1
2
3

# 配置

 
module.exports = {
  plugins: ['@vuepress/pwa', 
{
      serviceWorker: true,
      updatePopup: {
      message: "有新的内容更新",
      buttonText: "刷新"
 }
}]
}

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

提示

为了让你的网站完全地兼容 PWA，你需要:

在.vuepress/public 提供 Manifest 和 icons
在.vuepress/config.js 添加正确的 head links(参见下面例子).

//head中href的根路径就是.vuepress下的public
module.exports = {
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
  ],
  plugins: ['@vuepress/pwa', 
           {
                 serviceWorker: true,
                 updatePopup: {
                 message: "有新的内容更新",
                 buttonText: "刷新"
            }
           }]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

manifest.json文件模板

{
  "name": "技术咸鱼 ｜ oopanda",
  "short_name": "技术咸鱼",
  "description": "程序员和他的小bug.爱生活,爱coding.一个专注分享学习经验、记录开发问题的个人博客.",
  "lang": "zh-CN",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#5c92d1",
  "background_color": "#ffffff",
  "orientation": "portrait-primary",
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "/img/favicon.ico",
      "sizes": "32x32",
      "type": "image/ico"
    }
  ],
  "shortcuts": [
    {
      "name": "关于我",
      "short_name": "关于我",
      "icons": [
        {
          "src": "https://dzzsbucket.oss-cn-shanghai.aliyuncs.com/avatar/avatar.png",
          "sizes": "460x460",
          "purpose": "maskable",
          "type": "image/png"
        }
      ],
      "url": "/about/",
      "description": "关于我"
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 选项

# serviceWorker

类型: boolean
默认值: true

如果设置为 true，VuePress 将自动生成并注册一个 Service Worker (opens new window) (opens new window)，用于缓存页面的内容以供离线使用（仅会在生产环境中启用）。

有一个别名化的模块 @sw-event 模块将会 emit 以下事件：

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

提示

只有在你能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPs 的 URL 下注册.

# generateSWConfig

类型: object
默认值: {}

workbox-build 的 generateSW config (opens new window) (opens new window)。

# updatePopup

类型: boolean|popupConfig
默认值: undefined

类型 popupConfig 的定义如下：

interface normalPopupConfig {
  message: string; // 默认显示:'New content is available.'
  buttonText: string;// 默认显示: 'Refresh'
}

interface localedPopupConfig {
  [localePath: string]: normalPopupConfig
}

type popupConfig = normalPopupConfig | localedPopupConfig

1
2
3
4
5
6
7
8
9
10

本选项开启了一个用于刷新内容的弹窗。这个弹窗将会在站点有内容更新时显示出来，并提供了一个 refresh 按钮，允许用户立即刷新内容。

如果没有“刷新”按钮，则只有在所有的 Clients (opens new window) (opens new window)被关闭后，新的 Service Worker 才会处于活动状态。这意味着用户在关闭你网站的所有标签之前无法看到新内容。但是 refresh 按钮会立即激活新的 Service Worker。

# popupComponent

类型: string
默认值: undefined

用于替换默认弹出组件的自定义组件。

参考: 自定义 SW-Update Popup (opens new window) *

#Vue #网站建设

上次更新: 2021/07/28, 17:04:41

plugin-google-analytics→