Webサイトをネイティブなスマホのアプリとしてインストールできるようにする方法があります。
この記事のスマートロック用アプリもこの方法でアプリ化しています。
基本的にはWebアプリのままだけどスマホにもインストールできるWebアプリで、PWA（プログレッシブウェブアプリ）と呼び、設定次第では位置情報やPush通知など、一部でスマホ用アプリと同等の機能をもたせられるという便利なものだそうです。
PWAをガッツリ使いこなしたければ書籍も出ています↓
ここではひとまず自分用のアプリとして動くようにサラッと纏めておきます。
元がGoogleの提供している機能らしく、iPhoneへの対応が遅いという難点もあるようですしブラウザによって対応できたりできていなかったりと、まだまだ発展途上の技術です。
ただ、Webアプリでもスマホアプリでも使えるとなると非常に便利な機能なので使わない手はありません。
基本的にはこちらの参考サイトの通りに作ればOK！
<参考>
３分でWebサイトを PWA としてアプリ化させてみる | PisukeCode - Web開発まとめ
PWAに対応させるには
- サイトをhttpsサイトにすること
- faviconだけではなく、AndroidとiPhone用アイコン（後述）を用意すること
- アプリの挙動をjsonで記述したmanifestファイルを用意すること
- JavaScriptで記したサービスワーカーを用意すること
以上。
意外と条件が少ないです。特に気になっていたスマホアプリ用の挙動やGUIを作ったりする必要は無さそうです。
アイコンの用意
アプリのアイコン用の画像が必要です。
512×512
256×256
192×192
の３つぐらい画像ファイルを用意する。（形式はpngで可）
manifestファイルの用意
Webから見える範囲に[manifest.webmanifest]ファイルを作り以下のように記述し、上のアイコンの位置をiconsにまとめて記載する。
（拡張子は「.webmanifest」または「.json」）
{
"lang": "ja",
"name": "ServiceName",
"description": "サービスの説明",
"short_name": "SN",
"display": "standalone",
"icons":[
{ "src": "/icons/192.png", "type": "image/png", "sizes": "192x192"},
{ "src": "/icons/256.png", "type": "image/png", "sizes": "256x256"}
],
"start_url": "/top/"
}
nameがインストールしたときのアプリの名前になります。
start_urlはアプリが起動したときに最初に起動するページ
サービスワーカーを用意
javascriptファイル[serviceWorker.js]をWebサイトのトップへ配置します。
必ずトップへ配置しないと、
no matching service worker detected
とエラーが出てPWA化しません。
つまり、ディレクトリ内
/js/serviceWorker.js
ではなく、
/serviceWorker.js
に配置するということです。（設定はWebサーバーソフトで）
中身
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
});
self.addEventListener('fetch', function(event) {});
HTMLファイルへ記述
そしてhtmlのheadに上述のファイル類を読み込ませる記述を記入
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="stylesheet" type="text/css" href="/css/mystyle.css">
<script>
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/serviceWorker.js').then(function(){
console.log("Service Worker OK!");
});
}
</script>
</head>
確認
Webサーバーにアップロードして、GoogleChromeの検証ツールでApplicationの項目を選択するとmanifestとサービスワーカーがきちんと読み込まれているか確認することができます。
特にエラーがなければアプリとして機能するようです。
スマホでアクセスすると
「ホーム画面に[アプリ名]を追加」
が下に表示されインストールが可能になります。
（※画像は加工しています）↓こんな感じ
スマホだけじゃなくパソコンにもインストールすることが出来ます。
こんな感じで、スマホのデスクトップにアプリのアイコンが表示されてタップすると立ち上がります↓
常時使うようなツール系サイトならブラウザ起動させずに（バックでは起動していますが）一発で起動するので結構便利です。
