376 文字
2 分
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/フォルダにそれらしきものを入れておく。

参考にしたサイト#

VuePress 1.xでPWAを有効にする方法
https://oiteiku.netlify.app/posts/how-to-use-pwa-vuepress/
作者
veadar
公開日
2019-07-10
ライセンス
CC BY-NC-SA 4.0