# 添加PWA

当网站更新（即 Service Worker 更新）时，它会提供一个 refresh 按钮，允许用户立刻刷新内容。其次，必须是HTTPS才可以，我们部署到 GitHub Page 刚好是可以的。详细参考官方文档。

# 1. package.json

vuepress 版本

{
	"name": "com",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"docs:dev": "vuepress dev docs",
		"docs:build": "vuepress build docs",
		"deploy": "bash deploy.sh",
		"create": "bash createCatalog.sh"
	},
	"author": "LinQin",
	"license": "ISC",
	"devDependencies": {
		"@vuepress/plugin-back-to-top": "^1.0.2",
		"@vuepress/plugin-google-analytics": "^1.0.2",
		"@vuepress/plugin-pwa": "^1.0.2",
		"vuepress": "^1.0.2"
	}
}

# 2. config.js

module.exports = {
    plugins:{
    '@vuepress/back-to-top': true,
    // '@vuepress/medium-zoom': true,
    '@vuepress/pwa': {
        serviceWorker: true,
        updatePopup: {
            message: "啦啦啦,一大波内容已更新!",
            buttonText: "朕知道了"
        }
    }
}
}

# public文件夹下新建manifest.json

{
    "name": "fog3211",
    "short_name": "任庆忠",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#2196f3",
    "description": "任庆忠的个人博客",
    "theme_color": "#FFCC33",
    "icons": [
      {
        "src": "./favicon.ico",
        "sizes": "32x32",
        "type": "image/x-icon"
      }
    ],
    "related_applications": [
      {
        "platform": "web",
        "url": ""
      },
      {
        "platform": "play",
        "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
      }
    ]
  }

可以参考这里生成对应的 manifest.json以及图片。复制到 public文件夹下面，并且修改一下图片的相对路径。其他还有很多

# #3. 开启谷歌浏览器PWA

在Chrome浏览器地址栏输入

Chrome://flags

搜索 pwa，并将状态改成Enabled，并重启浏览器

然后点击自定义及控制按钮（就是右上角的那个三个点的图标），然后点击创建快捷方式即可。

# 4. GitHub Page 打开 HTTPS

Enforce HTTPS HTTPS provides a layer of encryption that prevents others from snooping on or tampering with traffic to your site. When HTTPS is enforced, your site will only be served over HTTPS. Learn more.

# Vssue

Vssue提供了VuePress插件 - @ vssue / vuepress-plugin-vssue-帮助快速在VuePress中使用Vssue。

需要先在 GitHub上的 OAuth 应用。说明

• 转到设置-开发人员设置-OAuth应用
• 点击新的OAuth应用

# 安装

@vssue/vuepress-plugin-vssue通过NPM 安装和API软件包：

npm install @vssue/vuepress-plugin-vssue
npm install @vssue/api-github-v3

# 使用插件

// .vuepress/config.js

module.exports = {
  plugins: {
    '@vssue/vuepress-plugin-vssue': {
      // set `platform` rather than `api`
      platform: 'github',

      // all other options of Vssue are allowed
      owner: 'OWNER_OF_REPO',
      repo: 'NAME_OF_REPO',
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
    },
  },
}

唯一的区别是，您应该设置platform而不是api包本身。

@vssue/vuepress-plugin-vssue将根据以下值自动解析相应的api包platform：

• 平台github-api包@vssue/api-github-v3
• 平台github-v4-api包@vssue/api-github-v4
• 平台gitlab-api包@vssue/api-gitlab-v4
• 平台bitbucket-api包@vssue/api-bitbucket-v2
• 平台gitee-api包@vssue/api-gitee-v5

如果您未设置该locale选项，则Vssue将使用VuePress的$lang语言作为当前页面的语言。

见现场 Vssue和$ LANG VuePress的

# 使用Vssue组件

Vssue 已经被注册为Vue组件，可以直接在您的VuePress降价中使用。

<!-- README.md -->

# Vssue Demo

<Vssue title="Vssue Demo" />

您可以转到repo meteorlxy / vssue-demo以获取演示代码。

# 看板娘

https://github.com/JoeyBling/vuepress-plugin-helper-live2d