https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps
基本は、Webページですが、PWA化はルールがあります。
「What makes a good Progressive Web App?」
PWAは、1機能でも実装すれば、PWAアプリになります。
Chromeのアドオン「Lighthouse」を使用すると、実装度合いが分かります。
※WebExtensionでも同様のファイルがあるため注意が必要。
short_name | アプリ名(略称) | ||
name | 必須 | アプリ名 | |
start_url | 開始 URL | ||
description | アプリの説明 | ||
icons | 必須 | アイコン設定、src,sizes,type | |
background_color | 背景色 | ||
theme_color | 既定のテーマ色 | ||
display | 表示モード、fullscreen,standalone,minimal-ui,browser | 既定値:browser | |
orientation | 画面の表示向き、any,landscape,portraitなど | ||
categories | カテゴリ登録 | ||
dir | auto:自動、ltr:左書き、rtl右書き | ||
iarc_rating_id | どの年齢に適切かの設定 | ||
lang | 主言語 | ||
prefer_related_applications | 推奨設定?、true,false | ||
related_applications | (※1) | インストール設定 | |
scope | スコープ | ||
screenshots | スクリーンショット |
※1:prefer_related_applications=true時必須となる
{ "short_name": "[サイト略称]", "name": "[サイト名]", "start_url": "https://[url]/index.html", "description": "[サイトの説明]", "icons": [ { "src": "/icon_192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, { "src": "/icon_512.png", "sizes": "512x512", "type": "image/png" } ], "background_color": "#[バックカラー]", "theme_color": "#[テーマカラー]", "display": "standalone", "orientation": "portrait" }