WebアプリはNativeアプリと違って App Store の審査等はなく、普通にWeb公開するだけでブラウザ経由でアクセスができます。
そんなWebアプリもNativeアプリの用にホーム画面にアイコンを配置して起動することができます。
iPhoneであれば Safari の「ホーム画面に追加」でホームにショートカットアイコンを作成することができます。
ただそのままではアイコンがページのスクリーンショットのままだったり、起動時にブラウザが立ち上がったりするのでWebアプリ側にもタグを記載する必要があります。
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-title" content="タイトル" /> <link rel="apple-touch-icon" href="icon.png" sizes="192x192" />
1つめのタグを記載することでアドレスバーなどのブラウザのボタンを隠すことができます。
2つめのタグは画面上部の時刻などが表示されるバーの色の設定です。
3つめはWebアプリのタイトル、4つめはアプリのアイコン画像を設定します。
これでホーム画面に追加する際に、指定したタイトルとアイコンとなり、起動時もNativeアプリのように起動できます。
Javascriptで画面遷移を行うようなSPAのWebアプリであればこれでよいですが、
普通にaタグなどで画面遷移を行う場合はこれだけだと画面遷移時にアドレスバーがでてしまうので以下も必要です。
<link rel="manifest" href="manifest.json" />
manifest.jsonは以下のようにWebアプリのタイトルや起動時のページなどを記述します。
{
"name": "タイトル",
"short_name": "タイトル",
"scope": "/",
"start_url": "/",
}