オフィス狛 技術部の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と言うタブがあるので、そのタブを選択します。
続いて、Auditsの設定を行います。
今回は、PWAのチェックだけ実施したいので、他のチェックは外します。
それでは実行してみましょう!
???
チェック出来てない・・・。
あ、なるほど。
このプロジェクトは、AWSのEC2に配置し、ALB(ロードバランサ)でバランシングしているのですが、
ロードバランサ側でhttp接続は処理しないようになっていました。
と言う事で、設定を変更し、HTTPはHTTPSにリダイレクトするようにしました。
気を取り直して、もう一度、チェック実行してみます。
とりあえず、「?」マークはなくなりましたね。
後は、
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で、ここまでやってくれると嬉しいですけどね。
という事で、再度、チェック実行してみます。
無事にPWAにチェックマーク✅が付きました!
と言う事で、三回に渡って、Angular で作られたプロジェクトをPWAにしてみました。
途中でAngularアップデートをやっていたので、時間が掛かってしまいましたが、
PWA化自体は非常にお手軽に出来たので、かなり良い感じだと思います。
では、より良いAngularライフを!
Angular , PWA
0 件のコメント:
コメントを投稿