PWA とマニフェスト
プログレッシブウェブアプリ（PWA）は、ホーム画面に追加して、アプリのように開ける Web アプリです。名前やアイコンは、マニフェストというファイルで決めます。
このレッスンでは、マニフェストの書き方と、インストールの条件を学びます。
このレッスンのゴール
メモ
Web アプリをインストールできるようにするものを、説明できる。
重要な言葉
| ことば | いみ | れい |
|---|---|---|
| マニフェスト | アプリの名前やアイコンを書いた、JSON のファイル | manifest.webmanifest |
| start_url | ホーム画面から開いたとき、最初に開くアドレス | |
| display | 開いたときの見せ方。ブラウザの枠を出すかどうか | standalone |
| アイコン | ホーム画面に並ぶ絵。大きさを変えて複数書く | |
| 安全な接続 | https でつながること。多くの機能の条件 |
学生が入力するセルは、このプレビューでは空白です。
マニフェストは、アプリの名刺
マニフェストは、アプリの名前や色、アイコンを書いた JSON のファイルです。ブラウザは、これを読んで、ホーム画面に置くときの名前と絵を決めます。
ページの <head> に、<link rel="manifest" href="manifest.webmanifest"> と書いて、ファイルを教えます。
学食アプリのマニフェスト
{
"name": "学食メニュー",
"short_name": "学食",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2f6f4f",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}主な項目と役目
| 項目 | 役目 | 例 |
|---|---|---|
| name | アプリの正式な名前 | 学食メニュー |
| short_name | ホーム画面で、狭い場所に出す名前 | 学食 |
| start_url | 開いたときの最初のアドレス | / |
| display | 開いたときの見せ方 | standalone |
| icons | 大きさの違う絵のリスト | 192 と 512 |
| theme_color | 上の帯などの色 | #2f6f4f |
学生が入力するセルは、このプレビューでは空白です。
display で見せ方が変わる
display は、アプリを開いたときの見せ方を決めます。standalone は、ブラウザのアドレス欄を出さず、アプリのように見せます。
browser は、ふつうのブラウザの画面のままです。fullscreen は、画面全体を使います。
display の値と見え方
| 値 | 見え方 | 向いている場面 |
|---|---|---|
| browser | ふつうのブラウザの画面 | 特別な見せ方が要らない |
| minimal-ui | 最小限の操作だけが残る | 戻る操作が要る |
| standalone | アドレス欄がなく、アプリのよう | 多くのアプリ |
| fullscreen | 画面全体を使う | ゲームなど |
学生が入力するセルは、このプレビューでは空白です。
ラボのマニフェストを調べる
ラボの app フォルダのマニフェストが、主な項目をそろえているか調べます。出力は英語の単語です。
present はある、MISSING はない、True はファイルがある、という意味です。
マニフェストを調べる
docker exec jupyter python3 steps/manifest.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
ラボの出力の読み方
| 出力の行 | 意味 |
|---|---|
| name … theme_color: present | 6つの項目は、そろっている |
| background_color: MISSING | 背景の色だけが、書かれていない |
| display is standalone | アドレス欄のない見せ方 |
| icon … file exists: True | 書かれた2つのアイコンのファイルがある |
学生が入力するセルは、このプレビューでは空白です。
インストールの条件はブラウザしだい
ブラウザは、名前、アイコン、開くアドレスなどがそろい、安全な接続のときに、インストールを案内します。細かい条件は、ブラウザごとに違い、変わることもあります。
ラボの Preview のアドレスで、案内が出るかどうかは、ここでは決められません。自分のブラウザで確かめてください。
アイコンは大きさを複数用意する
ホーム画面や切り替えの画面で、アイコンは大きさを変えて使われます。よく使われるのは、192 px 四方と 512 px 四方です。
sizes に、書いた大きさの通りの値を書きます。ファイルの置き場所が違うと、絵は出ません。
よくある間違い
注意
マニフェストを書けば、必ずインストールできると考える間違いが多いです。安全な接続や、ほかの条件もあります。条件は、ブラウザの開発者ツールで確かめます。