VuePressでPWAを導入する

事前条件

サイトをPWAにするには、HTTPSに対応している必要があります。 まだの場合にはまずHTTPS化します。

Service Workerを有効化する

.vuepress/config.jsを編集して、サービスワーカーを有効化します。

module.exports = {
  serviceWorker: true,
  ...

これだけでService Workerが有効化されて、静的コンテンツがキャッシュされるようになります。 また、同様に.vuepress/config.jsを編集して、headタグのlinkにmanifest.jsonを追加します。

  ...
    head:[
        ['link', { rel: 'manifest', href: '/manifest.json' }],
  ...

manifest.jsonを配置

続いて.vuepress/public/manifest.jsにmanifest.jsonを配置します。

{
  "name": "My PWA site",
  "short_name": "My PWA",
  "icons": [
    {
      "src": "favicon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#3eaf7c"
}

アイコン配置

.vuepress/public/下にアイコン画像を配置します。最小限512x512の画像が一枚あればいいと思います。

---

とりあえず上記の設定を済ませれば、Lighthouseで100%のスコアが出せるようになりました。

今後のVuePressのアップデート次第ではより簡単にPWA対応ができるようになるかもしれません。

詳しいPWA対応についてはMDN docs about the Web App Manifestが参考になるかと思います。

---

vue