2022 年了，還不瞭解 PWA ？教你 VuePress 部落格如何快速相容 PWA

前言

在《一篇帶你用 VuePress + Github Pages 搭建部落格》中，我們使用 VuePress 搭建了一個部落格，最終的效果檢視：TypeScript 中文文件。

本篇我們講講如何相容 PWA。

PWA

PWA，英文全稱：Progressive Web Apps，中文翻譯：漸進式 Web 應用。

引用 MDN 的介紹：

PWA 指的是使用指定技術和標準模式來開發的 Web 應用，這同時賦予它們 Web 應用和原生應用的特性。
例如一方面，Web 應用更加易於發現：相比於安裝應用，訪問一個網站顯然更加容易和迅速。你還可以通過連結來分享 Web 應用。
另一方面，原生應用與作業系統可以更加完美的整合，也因此為使用者提供了無縫的使用者體驗。你可以通過安裝應用使得它在離線的狀態下也可以執行；相較於使用瀏覽器訪問，使用者也更喜歡通過點選主頁上的圖示來訪問它們喜愛的應用。
PWA 賦予了我們建立同時擁有以上兩種優勢的應用的能力。

體驗

如果你之前沒有了解過 PWA，大概率可能也不明白這是個什麼效果，沒有關係，我們直接看一個 PWA 應用示例，我們開啟 https://m.weibo.cn/，這裡是在電腦端開啟的：

我們可以看到，在位址列還有一個安裝圖示，點選一下，就會彈出安裝應用的選項框：

我們點選安裝後，該頁面會自動關閉，然後開啟一個應用視窗：

同時，開啟 Mac 的啟動臺，我們會看到已經新增了微博的圖示：

點選就會直接開啟上面的應用視窗。

簡單的來說，我們相容 PWA，就是想要實現這樣的桌面圖示的功能，當然了， PWA 其他還有離線快取、推送通知等功能，這裡就不多說了。

開啟 PWA

開啟 PWA，需要注意三個點：

提供一個 manifest.json 檔案，描述應用的名稱、圖示等資訊
開啟 Service Worker，這個交給現有的 PWA 外掛來實現
開啟 HTTPS

實踐

1. 安裝

外掛地址：https://v1.vuepress.vuejs.org/zh/plugin/official/plugin-pwa.html

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

2. 修改 config.js

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: "重新整理"
        }
     }
    ]
  ]
}

3. 新增 manifest.json 等資源

接下來我們新增所需要的資源，在 .vuepress目錄下建立 public資料夾，然後新增所需要的檔案如 manifest.json檔案：

{
    "name": "TypeScript中文文件",
    "short_name": "TypeScriptDocs",
    "display": "standalone",
    "background_color": "#fff",
    "start_url": "/learn-typescript-test/",
    "scope": "/learn-typescript-test/",
    "description": "TypeScript 中文文件 進階教程",
    "icons": [{
      "src": "logo52.png",
      "sizes": "52x52",
      "type": "image/png"
    },{
       "src": "logo288.png",
       "sizes": "288x288",
       "type": "image/png"
    }]
  }

這其中欄位的具體含義，可以檢視 MDN 的 Manifest 介紹。

要注意其中的 start_url和scope，如果你使用的是 GitHub 或者 Gitee 倉庫的 Pages 服務，並且地址上帶了倉庫名，你需要將這裡的learn-typescript-test替換為你的倉庫名，如果是直接的域名，start_url 寫成 \，scope寫成 .或者直接不寫。

然後是補齊所需要的圖示圖片：