Edited at

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

More than 1 year has passed since last update.

開発環境

"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は送られない