PWAの基礎知識（その7）「Web App Manifestを提供する上で知っておくと良いこと」
PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。
今回はそんなPWAの基礎になる、Web App Manifestを作る時に便利なテクニックを紹介します。
Web App Manifestとは？
Web App ManifestはWebアプリをスマートフォンアプリのようにインストールできる技術です。アプリストアを経由せずに配布できるのが魅力です。
インストール数を知る
どれくらいのPWAアプリが使われているか、それは皆さんが知りたいことだと思います。この時使えるのはGoogleアナリティクスです。例えば、manifest.jsonのstart_urlを次のように指定します。
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
| "start_url": "/?utm_source=homescreen" |
こうすることでGoogle Analyticsを使って、起動数を測定可能になります。
PWAの場合だけ表示を変える
Webブラウザから使った場合と、PWAとして立ち上げた場合で表示を変えたいこともあるでしょう。PWAではオフラインで使うことも想定してキャッシュされるので、サーバサイドでの表示出し分けはよくありません。そこでJavaScriptを使います。例えば manifest.json で次のように設定します。
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
| "start_url": "index.html?launcher=true" |
こうすることで、JavaScript側でlancherというパラメータの有無によって表示を変えられるようになります。不要なフッター情報などを削除しても良いでしょう。
オンライン/オフライン判定
これはPWAに限りませんが、 navigator.onLine がtrue（オンライン）/false（オフライン）によって判定できます。ムダなアクセスをなくしたり、デフォルト画像を表示したりするのに使えます。
インストールプロンプトの抑止
サイトを閲覧中にインストールしませんか、というバナーを出してもなかなかOKされないでしょう。インストールしたくなるような文脈が必要なはずです。そこで、インストールプロンプトを抑止し、任意のタイミングで出せるようにします。
まず抑止は beforeinstallprompt イベントで行います。
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
| var deferredPrompt; | |
| window.addEventListener('beforeinstallprompt', function(e) { | |
| e.preventDefault(); | |
| // ここでプロンプトを変数に入れておく | |
| deferredPrompt = e; | |
| return false; | |
| }); |
そして、任意のタイミングで deferredPrompt.prompt(); を実行します。
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
| btnSave.addEventListener('click', function() { | |
| if(deferredPrompt !== undefined) { | |
| // インストールプロンプト表示 | |
| deferredPrompt.prompt(); | |
| deferredPrompt.userChoice | |
| .then(function(choiceResult) { | |
| // キャンセルされた場合 | |
| if(choiceResult.outcome == 'dismissed') { | |
| console.log('User cancelled home screen install'); | |
| } else { | |
| // インストールされた場合 | |
| console.log('User added to home screen'); | |
| } | |
| deferredPrompt = null; | |
| }); | |
| } | |
| }); |
ただし、現状では beforeinstallprompt がいつ実行されるかが分からず、かつ一度離脱した後、確実に次も呼ばれるかは分かりませんので注意してください。
インストール状況を調べる
PWAをインストール済みかどうかは event.userChoice で判別できます。 accepted であればインストール済み、dismissedであればキャンセル済みです。
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
| window.addEventListener('beforeinstallprompt', function(e) { | |
| e.userChoice.then(function(choiceResult) { | |
| if(choiceResult.outcome == 'dismissed') { | |
| console.log('User cancelled home screen install'); | |
| } | |
| else { | |
| console.log('User added to home screen'); | |
| } | |
| }); | |
| }); |
ネイティブアプリのインストールを進める
manifest.jsonに related_applications を指定することでネイティブアプリを進められるようになります。
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
| "related_applications": [ | |
| { | |
| "platform": "play", | |
| "id": "com.google.samples.apps.iosched" | |
| } | |
| ] |
さらに preferrelatedapplications を true として指定するとPWAのインストールバナーは出さず、アプリのバナーのみになります。
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
| "prefer_related_applications": true, | |
| "related_applications": [ | |
| { | |
| "platform": "play", | |
| "id": "com.google.samples.apps.iosched" | |
| } | |
| ] |
PWAはネイティブアプリとWebアプリの中間とも言える存在です。単純にWebアプリ + インストールできる程度に扱うのではなく、ちょっとした工夫で解析や、よりユーザビリティの高い仕組みが提供できます。
hifive開発者ブログ 
コメントは受け付けていません。