VuePress 1.xでPWAを有効にする方法
/
VuePress 0.x以前のやり方はネットに転がっていましたが、1.x以降のやり方は探してもなかったので、自分の備忘録として書きます。
VuePress 1.xでPWAを有効にするにはちょっと手間がかかります。
# TOC:
# プラグインをインストールする
yarn add -D @vuepress/plugin-pwa@next
1
yarnでローカルにplugin-pwaをインストールします。
# config.jsを編集
以下で.vuepress/config.jsを編集します。
# プラグインを読み込む
一番簡単な設定はこう。
module.exports = {
plugins: ['@vuepress/pwa']
}
1
2
3
2
3
新しい内容が更新されたらポップアップさせたいならこう。
module.exports = {
plugins: {
'@vuepress/pwa': {
serviceWorker: true,
updatePopup: {
message: "New content is available.",
buttonText: "Refresh"
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 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"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
上記はこのサイトの設定。
適当なので適宜変えてください。
# head要素にmanifest.jsonへのリンクを作る
上で作ったmanifest.jsonをhead要素で読み込ませるために.vuepress/config.jsを編集する。
module.exports = {
head: [
//pwa 用のmanifest.json
['link', { rel: 'manifest', href: '/manifest.json' }],
],
}
1
2
3
4
5
6
2
3
4
5
6
# manifest.jsonから呼び出すアイコンを保存
.vuepress/public/フォルダにそれらしきものを入れておく。
# 参考にしたサイト
PWA Plugin | VuePress
Vue-powered Static Site Generator
