開発環境
"onsenui": "~2.8.2",
"vue": "^2.5.2",
"vue-onsenui": "~2.4.2",
"vuex": "^3.0.0"
プロジェクトセットアップ
https://qiita.com/gyarasu/items/2f18edc4ae251180d89e
これを参考にした
vue-pwa-voilerplateでは、開発ビルド（npm run dev）ではService Workerが登録されません。
build/service-worker-dev.jsとbuild/service-worker-prod.jsを見比べてみてください。
npm run buildでService Workerが登録される状態でビルドされます。ここでもう一つ問題となるのは、npm run devやnpm run startで起動するNode.jsの開発サーバではService Workerが動かないという点です。
Service Workerの挙動を確認するにあたってはWeb Server for Chromeを導入します。
dist/以下にビルドされた諸々のファイルが吐き出されるので、パスを指定して開きます。
この辺ちゃんと読んでないとすごいつまづく
emulaterでデバックしたい時は、chromeのポートフォワーディングでweb server for chromeのポートを指定してemulaterでlocalhost:ポート番号でいけるようになる
これで実際の動きを見ることができる
emulater関連
emulaterのバージョン？によってはmanufestで定義した画像が読み込めない
Nexus 5X API 27で発生
実機のSony SOV32(Android7, API 24)で確認したら読み込めた
*発生したエラー集
DOMException: unsupported MIME type for service worker
画像でレスポンスが変える
https://github.com/jeffposnick/create-react-pwa/issues/11
DOMException: Quota exceeded.
→スマホの容量足りなくて保存できない、アプリとか消せば消える
vue CLIのinitで初期設定しただけだとicon用の画像が足りない
48x48、72x72、96x96、144x144、192x192
を用意してmaufestに追加すれば良い
追記：192x192が必須らしい、勘違い・・・？（要検証）
一回ホーム画面に追加したものを消したらホームスクリーンに追加が出てこなくなる問題
→localhostのポートを変えれば出てくるようになる、、、が、他の方法も調査したい
localhostだとmanufest.jsonの中身が読み込まれない
devtoolのApplicationタブの中では設定が反映されているように見えるが、Sourceタブの中のmanufest.jsonが空になっている
ホーム画面への追加バナーは出てきて、設定した画像のアイコンでホーム画面への追加までは正常に出来るので
まったく読み込まれていない訳ではなさそうだが
displayの初期値がbrowserなので（おそらく）一部の設定値がdefaultになってしまっているのではなかろうか・・・？
firebaseにデプロイしたら正常にsplashが出てきて、devtoolで見たときもmaufest.jsonの中身が見えるようになった
ロゴの画像を変更した際にファイル名を以前と同じ名前にすると、新しいファイルをおいても更新されない
firebaseのセットアップをした際に404.htmlを追加するとService-worker内のcacheのリストに自動で追加されるっぽい
ただこのページに対してfetchリクエストを送ると404で帰ってくるようで、2回目以降のページ更新でこけるようになってしまう。
Service-workerからcacheするリストの中の記述を消せばOK
ただ、更新した際に何故かService-workerが新旧2つできていることがあり（おそらくsourceMapのせい）
ちゃんとキャッシュを消しておく必要がある
実機デバッグ中に一回ホーム画面に追加したり、Add to homescreenをキャンセルすると
バナーが二度と出なくなる問題
→設定→i→サイトの設定消去してリセットすればもっかい出る！！（やったー）
つまづきポイント
Service Worker はまだ新しい技術です。ここではつまづきやすいポイントを紹介します。早くこのセクションがなくなればいいですが、いま Service Worker で何かをする場合は気に留めておいてください。インストールが失敗したときのフィードバックが少ない
Worker が登録されても chrome://inspect/#service-workers や chrome://serviceworker-internals に現れない場合、event.waitUntil に渡された Promise が reject されたなどの理由からインストールに失敗した可能性が高いです。
インストールが成功したか失敗したかを知るには、chrome://serviceworker-internals に行き、「Open DevTools window and pause JavaScript execution on service worker startup for debugging」にチェックを入れ、そして install イベントの開始時に debugger ステートメントを記述してください（このオプションは Chrome 47 より前のバージョンでは名前が異なります）。これと DevTools の Pause on exception ボタン」で問題を見つけられるでしょう。
https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
chrome://serviceworker-internals/
chrome://inspect/#service-workers
の使い方が全然わからない（誰か教えて）
ONSEN UIでセットアップする時はこれで
vue init OnsenUI/vue-pwa-webpack
ただ、そのままbuiltすると
Do not use built-in or reserved HTML elements as component id: menu
というエラーが出る
http://www.htmq.com/html/menu.shtml
これはmenuタグがHTMLで予約語となっているためにcomponentで定義した名前と重複しているよという意味
名前を変えれば解消される
Onsen UIのボタンのCSSが反映されない
→もともと余計なcomponentが追加されないようにコメントアウトされてるので、それを有効化してあげる必要がある
動的に追加したDOM（templete）にはcssが適用されない
→動的に作る際にcssが適用されるようにv-bind="style"でやる？
firebase ui でsmsのpincodeが送信されない問題
→有効化する時にテスト用で追加した電話番号にはpincodeは送られない