Firebase上のVueアプリを後からPWAにする

Firebaseに上がっているVue.jsのプロジェクトを後からPWA対応させたい。

後からと言っているのは、vue-pwa-boilerplate を使えばVueをPWAに対応させることはできるんだけど1、既存のプロジェクトをPWAに対応させるって話。

Firebaseに限定しているのは、途中でうまくいかない箇所があったから。そこを本稿では書き残したい。

本稿では、Server Workerは一旦置いといて、まずはmanifest.jsonを設置して、ランチャーアイコンをきちんと設定できるようにするところまでを範囲としたい。


置き場所

まずはmanifest.jsonの置き場所。

staticに置く。そうすると、おおもとのindex.htmlは以下のようになる。


index.html

<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">


だいたいの構成は以下。プロジェクトルート直下にデフォルトでstaticがあると思うんだけど、そこにmanifest.jsonを配置。ついでにランチャーアイコンも。

project-root

├ static 
│ ├ manifest.json
│ └ img
│ ├ launcher-icon-1x.png
│ ├ launcher-icon-2x.png
│ └ launcher-icon-4x.png
├ src
└ index.html


マニフェストファイル

manifest.jsonの中身はこんな感じになる。これ自体はGoogleのブログ2が詳しい。最低限、アプリ名、アイコン、起動時の設定を行うとすると、以下のような感じになる。


manifest.json

{

"short_name": "appname",
"name": "Awesome App",
"icons": [
{
"src": "img/launcher-icon-1x.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "img/launcher-icon-2x.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "img/launcher-icon-4x.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/",
"display": "standalone"
}

これで、一応OKのはず。。


404 Not Found

これでFirebase Hostingにあげて、ホーム画面にアイコンを作ると、404 Not Found になってしまう。これが、Firebase独自の動作なのかわからないのだが、対策を行う。


firebase.json の修正

以下のようにfirebase.jsonを書き直す


firebase.json

{

"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

デフォルトだと rewritesなんて項目はなかったはず。これを書き足すとうまくいった。