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が参考になるかと思います。