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/