VuePress 1.xでPWAを有効にする方法

VuePress 0.x以前のやり方はネットに転がっていましたが、1.x以降のやり方は探してもなかったので、自分の備忘録として書きます。

VuePress 1.xでPWAを有効にするにはちょっと手間がかかります。

プラグインをインストールする#

yarn add -D @vuepress/plugin-pwa@next

yarnでローカルにplugin-pwaをインストールします。

config.jsを編集#

以下で.vuepress/config.jsを編集します。

プラグインを読み込む#

一番簡単な設定はこう。

module.exports = {
  plugins: ['@vuepress/pwa']
}

新しい内容が更新されたらポップアップさせたいならこう。

module.exports = {
    plugins: {
        '@vuepress/pwa': {
            serviceWorker: true,
            updatePopup: {
                message: "New content is available.",
                buttonText: "Refresh"
            }
        }
    }
}
}

manifest.jsonを作成#

今まででの設定でService Workerは動いているけれど、manifestを設定などをやってくれないので、ここも手動で設定しなければならない。

.vuepress/public/manifest.json

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

上記はこのサイトの設定。

適当なので適宜変えてください。

head要素にmanifest.jsonへのリンクを作る#

上で作ったmanifest.jsonをhead要素で読み込ませるために.vuepress/config.jsを編集する。

module.exports = {
    head: [
        //pwa 用のmanifest.json
        ['link', { rel: 'manifest', href: '/manifest.json' }],
      ],
}

manifest.jsonから呼び出すアイコンを保存#

.vuepress/public/フォルダにそれらしきものを入れておく。