PWAの基礎知識（その5）「Web App Manifestの使い方」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。
今回はそんなPWAの基礎になる、Web App Manifestについて紹介します。
利用できるブラウザについて
Web App Manifestはまだ仕様が確定しておらず、一部のWebブラウザでしか使えません。Google Chromeはデスクトップ（アイコンのみ）、スマートフォンともに利用できます。また、iOSのSafariでは11.3からサポートを開始しています。デスクトップで利用できるのはEdgeくらいのようです。
要件
技術的には以下が必須になります。
- HTTPSサイトである
- Service Workerを使っている
- マニフェストファイルを配置している
Service Workerを使っている
Service Workerを使ってオンライン上のファイルをキャッシュします。まずWebブラウザ側のJavaScriptでService Worker用のJavaScriptを読み込みます。
| if ('serviceWorker' in navigator) { | |
| navigator.serviceWorker | |
| .register('./sw.js', { | |
| scope: './' | |
| }) | |
| .then((reg) => { | |
| if(reg.installing) { | |
| console.log('Service Worker をインストール中です'); | |
| } else if(reg.waiting) { | |
| console.log('Service Worker をインストールしました'); | |
| } else if(reg.active) { | |
| console.log('Service Worker は有効です'); | |
| } | |
| }) | |
| .catch((error) => { | |
| // registration failed | |
| console.log('登録失敗：', error); | |
| }); | |
| } |
Service Worker用のJavaScriptではキャッシュしたいファイルを読み込みます。
| self.addEventListener('install', e => { | |
| // インストール時に実行 | |
| e.waitUntil( | |
| caches.open('mismith').then(cache => { | |
| return cache.addAll([ | |
| '/', | |
| '/client.js', | |
| '/style.css' | |
| ]) | |
| .then(() => self.skipWaiting()); | |
| }) | |
| ); | |
| }); |
マニフェストファイルを設置している
マニフェストファイルは manifest.json という名前で作られることが多いようです。このファイルをHTMLのheadタグ内で読み込みます。
| <link rel="manifest" href="/manifest.json"> |
内容は次のようになります。縦向きで、アプリのようなUIで表示されます。また、テーマカラーであったり、スプラッシュスクリーンの背景色なども指定できます。
| { | |
| "display": "standalone", | |
| "short_name": "hifiveTodo", | |
| "name": "hifiveTodo", | |
| "orientation": "portrait", | |
| "icons": [ | |
| { | |
| "src": "launcher-icon-1x.png", | |
| "type": "image/png", | |
| "sizes": "48x48" | |
| }, | |
| { | |
| "src": "launcher-icon-2x.png", | |
| "type": "image/png", | |
| "sizes": "96x96" | |
| }, | |
| { | |
| "src": "launcher-icon-3x.png", | |
| "type": "image/png", | |
| "sizes": "192x192" | |
| } | |
| ], | |
| "start_url": "./index.html", | |
| "background_color": "#e1efde", | |
| "theme_color": "#e1efde" | |
| } |
これをWebサイト上に配置します。
サイトを表示する
Google Chromeの場合は5分以上置いてアクセスするとインストールバナーが表示されるとあります。しかし体感としてはもっと空けるか、Webブラウザの設定を変更した方が良いのではないかと思います。
表示して少し経つとバナーが表示されます。
こういう小さいバナーの場合もあります。
バナーをタップすると、インストールの確認が出ます。
インストールするとホーム画面上にアイコンが表示されます。
アプリと同じなので、コンテクストメニューがブックマークとは異なります。
アイコンをタップするとアプリが表示されます。アプリのアイコンで192pxのものを用意しておくとスプラッシュスクリーンが表示されるようです。Service Workerを使っていますのでオフラインでも使えます。
Web App Manifestはまだブラックボックスな動作もあります（バナーが表示されるタイミングや再表示させる方法など）。アプリを一度アンインストールした後、再度インストールする方法も明文化されていません。
とは言え、Webアプリをネイティブアプリ化できるのは面白い技術で、通常のアプリストアを頼らない配布も便利です。業務アプリなどでも使えそうです。
コメントは受け付けていません。