![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgegnL3uaSoXfZyHD0VukNU1mzJOg6A_uo_RBPNhAAiNYPNmHa32O0VSYO03izNPLfHeSKn-ZuBXlY9LGfz5wTNEKcpTod4iSp1UxFow4NdRX2gOxxdWhBSQSCssg4k-I3vorLb2zMSJuwC/s320/Fotolia_107330960_XS.jpg)
オフィス狛 技術部のKoma(Twitterアカウントの中の人&CEO)です。
前編(Angular 7 から 8 へのアップデート)、 中編(PWA化の実施)の続きです。
今回は、PWA化したプロジェクトが、正しくPWA化されているか確認しましょう。
(1)前提条件
・ビルドはproduction設定の「ng build --prod」で行う。・サイトへの接続はHTTPSであること。
最初のproduction設定については、後でいくらでも変更は出来るのですが、デフォルトだと「serviceWorker」がproductionの場合のみ有効になるので必須となります。
2番目の「HTTPS」ですが、チェックツールの「Chrome デベロッパーツールのAudits」がHTTPS接続でないと、そもそも使えないので、これも致し方ないです。
(2)PWAかどうかチェックする
さて、早速チェックしていきます。Chromeで対象のサイトを表示し、デベロッパーツールを起動します。(右クリックから「検証」を選ぶと早いです。)デベロッパーツールが起動したら、Auditsと言うタブがあるので、そのタブを選択します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhxB9Uhk5AA4aBro_aIt4wEyvDzJfYDxErWMOwYzn1iwXii-dkXIuvCclrn_2kdYtZA75GMlgUMdCSpZ_ZIrjDkmbZCFsVpKYVcZi0Mqm6-fcAforXhr6idmQN9X27cmOGl-9IWb6gw4z/s320/screenshot+2019-12-12+19.34.54.png)
続いて、Auditsの設定を行います。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggN8FAnhaEYZsBkp6muuUFCsJxW3sp8u2-a4wKWJnj5XvWfX9zpZXJ-Wj2b3GfgpbkzZGpydw0Y1SbqVJ5DOieOsjyO1FcT7EaacVMCcB7WeQhy3-hkXb5tf8dLf7jeJtH-HmhZ-uTTobL/s320/screenshot+2019-12-12+19.55.44.png)
今回は、PWAのチェックだけ実施したいので、他のチェックは外します。
それでは実行してみましょう!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNE0zhRLk852CgyXw_uxa5U1N09VsZHADwM6GHdKJ1MZjjDoovpREa_Y58zMGVvN-77r7EVF-7EtdtGz_u0E2crm5juRy0lm0eoAr1B0iSJG9dL1RZD0xN2oyZnFia0ucKNSlrnXr0Cmkt/s320/screenshot+2019-12-11+17.23.10.png)
???
チェック出来てない・・・。
あ、なるほど。
このプロジェクトは、AWSのEC2に配置し、ALB(ロードバランサ)でバランシングしているのですが、
ロードバランサ側でhttp接続は処理しないようになっていました。
と言う事で、設定を変更し、HTTPはHTTPSにリダイレクトするようにしました。
気を取り直して、もう一度、チェック実行してみます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG-xUn5TDDdfTu0g3xIruDCHG89B0RW9QTvJcPT26pH2FDVZkJGaqU3rHvu-OsGfe3jiFO84QYCrxaQSRDXMZ6TD3TUFIriwiHtr7RJXdOzPIi5MmtfzGGyfiQU92EcB4zC6WOH4bLktx6/s320/screenshot+2019-12-11+17.37.38.png)
とりあえず、「?」マークはなくなりましたね。
後は、
Does not have a <meta name="viewport"> tag with width or initial-scaleNo viewport meta tag found
Add a viewport meta tag to optimize your app for mobile screens.
ですね。
こちらは、エラー内容の通り、metaタグ(viewport)が無い事で発生しています。
そして、もう一つ
Does not provide a valid apple-touch-icon
For ideal appearance on iOS when users add to the home screen, define an apple-touch-icon. It must point to a non-transparent 192px (or 180px) square PNG.
こちらはiPhone・iPadのホーム画面用アイコンapple-touch-iconnの指定がありませんよ、と言う事で発生しています。
いずれも、「index.html」に記述する事で解決しそうです。
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="manifest" href="manifest.webmanifest"> <meta name="theme-color" content="#1976d2"> <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″><!-- ←追加 --> <link rel="apple-touch-icon" href="assets/icons/icon-192x192.png"><!-- ←追加 -->
Angular CLIで、ここまでやってくれると嬉しいですけどね。
という事で、再度、チェック実行してみます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVc_GV2AoIwD0ZVW26JOhxZF7bdz9QDH5h_xpWquHEfFRRmQ_tCh7JFwpw4qOrXI5u3EyjFMyc5SUAZ6OpibBNzicPX4N8nSbUCJ6HyONnS609KM_H4oOEyDnmY4H9cNgA8AvRqYsB_ehD/s320/screenshot+2019-12-12+9.36.36.png)
無事にPWAにチェックマーク✅が付きました!
と言う事で、三回に渡って、Angular で作られたプロジェクトをPWAにしてみました。
途中でAngularアップデートをやっていたので、時間が掛かってしまいましたが、
PWA化自体は非常にお手軽に出来たので、かなり良い感じだと思います。
では、より良いAngularライフを!
Angular , PWA
0 件のコメント:
コメントを投稿