Chromebookで作るPWAアプリ日記5

こんにちは、junkawaです。

目次
・近況報告
・manifestファイルについて
・アイコンについて
・faviconについて
・index.htmlのヘッダについて

近況報告

新たに3個、PWAアプリを作ってみました。

年月日から週番号を表示【オフライン対応】

週番号から年月日を表示【オフライン対応】

年月日の曜日を表示【オフライン対応】

manifestについて

App Manifest Generator

ここで作ったmanifest.jsonを雛形にしました。

アイコンについて

pwa/<プロジェクト名>/src/images/icons/icon-128x128.png
                                   icon-144x144.png
                                   icon-152x152.png
                                   icon-192x192.png
                                   icon-384x384.png
                                   icon-512x512.png
                                   icon-72x72.png
                                   icon-96x96.png

8個のアイコンを用意しました。

Google図形描画で画像を作成し、「ページ設定」で画像サイズを変更し、pngファイルとしてダウロードしました。

Androidのホーム画面です。

faviconについて

前述のGoogle図形描画にて32x32のサイズでpngファイルをダウンロードします。

半透過マルチアイコン作成。

このサイトでpngファイルをicoファイルに変換しました。

GitHub Pagesのユーザサイト(<ユーザ名>.github.io リポジトリ)のトップディレクトリ下に favicon.ico として配置します。

index.htmlのヘッダについて

Your First Progressive Web App  |  Web Fundamentals  |  Google Developers

上記にしたがって、このように書いています。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="日→年週">
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png">

<meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#f2f2f2">

Android用に下記を追加しています。

<meta name="theme-color" content="#00988a">

アドレスバーの色が変わりました。

アイコンとブラウザの色  |  Web  |  Google Developers