背景

有時候，我們也希望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: {
        '@vuepress/pwa':
        {
            skipWaiting: true,
            serviceWorkerFilename: 'service-worker.js'
        },
    }

如果是IIS部署，還需要新增新的MIME型別

.webmanifest

application/json

效果

之前的效果

之後的效果

參考

• 漸進式 Web 應用（PWA
• Favicon Generator
• imageGenerator
• pwa
• Web App Manifest