A2HSできるようにする
構成
code:tree
.
├── node_modules
├── package-lock.json
├── package.json
├── public
│ ├── _redirects
│ ├── favicon.ico
│ ├── index.html *
│ ├── logo192.png *
│ ├── logo512.png *
│ ├── manifest.json *
│ └── service-worker.js *
├── src
└── webpack.config.js
*の部分を追加、編集する
追加する部分
index.htmlのheadに以下を追記する
code:index.html
<!-- iOS -->
<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="App Name">
<link rel="apple-touch-icon" href="logo192.png">
<!-- Android -->
<link rel="manifest" href="manifest.json">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then((reg) => {
console.log('Service worker registered.', reg);
});
}
</script>
ロゴを追加する
192x192: アプリアイコン用
512x512: スプラッシュ画面用
ref
manifest.jsonを追加する
code:manifest.json
{
"short_name": "App short name",
"name": "App name",
"icons": [
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
ref
searvice-worker.jsを追加する
Android Chrome用
必要最低限
code:service-worker.js
self.addEventListener("fetch", function () {});
設定が反映されているかどうかの確認
Chrome Developer Tools > Application を開く
Manifestが読み込まれていることを確認する
各種パラメータ(name、iconsなど)が設定されていることを確認する
エラーが表示されていないことを確認する
遭遇したエラー
code:*
faviconの設定をmanifest.jsonから除いたらエラー回避できた
ref