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を読み込みます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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ではキャッシュしたいファイルを読み込みます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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タグ内で読み込みます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="manifest" href="/manifest.json"> |
内容は次のようになります。縦向きで、アプリのようなUIで表示されます。また、テーマカラーであったり、スプラッシュスクリーンの背景色なども指定できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "display": "standalone", | |
| "short_name": "hifiveTodo", | |
| "name": "hifiveTodo", | |
| "orientation": "portrait", | |
| "icons": [ | |
| { | |
| "src": "launcher-icon-1x.png", | |
| "type": "image/png", | |
| "sizes": "48×48" | |
| }, | |
| { | |
| "src": "launcher-icon-2x.png", | |
| "type": "image/png", | |
| "sizes": "96×96" | |
| }, | |
| { | |
| "src": "launcher-icon-3x.png", | |
| "type": "image/png", | |
| "sizes": "192×192" | |
| } | |
| ], | |
| "start_url": "./index.html", | |
| "background_color": "#e1efde", | |
| "theme_color": "#e1efde" | |
| } |
これをWebサイト上に配置します。
サイトを表示する
Google Chromeの場合は5分以上置いてアクセスするとインストールバナーが表示されるとあります。しかし体感としてはもっと空けるか、Webブラウザの設定を変更した方が良いのではないかと思います。
表示して少し経つとバナーが表示されます。
こういう小さいバナーの場合もあります。
バナーをタップすると、インストールの確認が出ます。
インストールするとホーム画面上にアイコンが表示されます。
アプリと同じなので、コンテクストメニューがブックマークとは異なります。
アイコンをタップするとアプリが表示されます。アプリのアイコンで192pxのものを用意しておくとスプラッシュスクリーンが表示されるようです。Service Workerを使っていますのでオフラインでも使えます。
Web App Manifestはまだブラックボックスな動作もあります（バナーが表示されるタイミングや再表示させる方法など）。アプリを一度アンインストールした後、再度インストールする方法も明文化されていません。
とは言え、Webアプリをネイティブアプリ化できるのは面白い技術で、通常のアプリストアを頼らない配布も便利です。業務アプリなどでも使えそうです。
hifive開発者ブログ 
コメントは受け付けていません。