Help us understand the problem. What is going on with this article?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away