试着给VuePress添加渐进式Web应用(PWA)支持，基于vuepress/plugin-pwa，点亮离线访问

背景

有时候，我们也希望VuePress构建的文档中心能支持离线访问，这时候我们需要给他添加渐进式Web应用(PWA，Progressive Web App)的支持，根据官方文档指引，我们可以借助插件vuepress/plugin-pwa来添加PWA的支持。

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。

安装

npm install @vuepress/plugin-pwa

项目地址：https://v2.vuepress.vuejs.org/zh/reference/plugin/pwa.html

该插件使用workbox-build来生成Service Worker文件，并通过register-service-worker来注册Service Worker。

配置

建立应用程序清单(Web App Manifest)

Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

Web应用程序清单是被称为渐进式Web应用程序(PWA)的Web技术集合的一部分, 它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能, 比如离线可用和接收推送通知。

我们前往.vuepress\public目录找一个位置建立一个manifest.webmanifest文件，这里我建在assets\config目录下，而且约定都对应的图标文件放在assets\img目录下。

{

    "name": "xxxxxxxxxxxxxxxxx",

    "short_name": "xxxxxxxxxxxxxx",

    "icons": [

        {

            "src": "/assets/img/android-chrome-192x192.png",

            "sizes": "192x192",

            "type": "image/png"

        },

        {

            "src": "/assets/img/android-chrome-512x512.png",

            "sizes": "512x512",

            "type": "image/png"

        }

    ],

    "start_url": "/index.html",

    "theme_color": "#ffffff",

    "background_color": "#ffffff",

    "display": "standalone"

}

有人问，图标从哪来，上Favicon Generator或者imageGenerator生成一组吧。

使用应用程序清单(Web App Manifest)

前往.vuepress目录，编辑config.js文件，设置插件plugins配置。

plugins: [

    ['@vuepress/pwa', {

        skipWaiting: true,

        serviceWorkerFilename: 'service-worker.js'

    }]

]

这里设置skipWaiting: true意味着在新的Service Worker就绪之后，会立即激活它。

这里我还多指定了一个serviceWorkerFilename，默认值就是service-worker.js，如果你要改也是可以的，用于指定生成的Service Worker文件路径。

如果是IIS部署，还需要添加新的MIME类型

.webmanifest

application/json

这样，访问/assets/config/manifest.webmanifest才可以正常。

效果

之前的效果

之后的效果

拥有PWA支持的网站会多一个按钮。

点击这个按钮，会弹出引导安装这个PWA应用的提示。

安装之后，会先直接运行一次，惊艳，它就像一个原生的应用那样。

只是在右侧顶部这里，会比其他的非PWA多三个点的菜单。

关于PWA的HTTPS限制

如果你是Localhost或者127.0.0.1的模式访问是不限制的，但是如果你走域名，你会发现，PWA不生效，原因在于：

PWA只能在HTTPS协议下使用。

这里如果部署容器是IIS，可以走https://certifytheweb.com 这个工具弄一下。

先新建一个联系人，就是给一个邮件地址，如果证书过期了会邮件通知你。

新建证书，选择IIS站点，下拉选择之后，会读到这个站点绑定的域名。

点击请求证书。

正在申请证书。

、

申请成功。

这时候，再用HTTPS请求网站，你就发现，已经是有证书了，是不是很赞。

参考