PWAでwebアプリ作る時の自分用メモ

開発環境
    "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は送られない