背景
有時候，我們也希望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請求網站，你就發現，已經是有證書了，是不是很贊。
