JavaScript
HTML5
ServiceWorker
SphereBlur

Web App ManifestでWebアプリをインストール可能に

More than 1 year has passed since last update.


はじめに

Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.com冬休みに作った際に、Web App Manifestを登録することで、このWebアプリを簡単にインストール(ホーム画面に追加)できるようにした。このWebアプリはService Workerを使ってオフラインでも動くようにしているので、ホーム画面から起動し、ネイティブアプリと同等の体験を提供できる。もちろん、Manifestを使っていない通常のページでも、メニュー画面から「ホーム画面に追加」を選ぶことで同様のことはできるが、下の動画のように、下から出てくるAppインストールバナーのボタンを一回タップするだけ登録できるのは利便性が高い。

sphereblur.com


Appインストールバナーの出し方

Google Developersのこの記事によるとAppインストールバナーを出すには下記の条件を満たす必要がある。



  • Web App Manifestを登録していること

  • Service Workerを登録していること

  • HTTPSに対応していること

  • ユーザーが5分以上経過後に再び訪れること

ただし、これらの条件は今後変更される可能性がある。


SphereBlur.comはすでにService Workerを使っているので、あとは、Web App Manifestを登録しておけば、頻繁に訪れてくれるユーザーに対してこのバナーを表示することができる。


Manifestの登録の仕方

SphereBlur.comでは、HTMLに下記のようなlinkエレメントを追加し、


index.html

<link rel="manifest" href="manifest.json">


下記のようなmanifest.jsonを登録している。


manifest.json

{

"name": "Sphere Blur",
"short_name": "Sphere Blur",
"icons": [
{"src": "img/sphereblur_36.png", "sizes": "36x36", "type": "image/png"},
{"src": "img/sphereblur_48.png", "sizes": "48x48", "type": "image/png"},
{"src": "img/sphereblur_72.png", "sizes": "72x72", "type": "image/png"},
{"src": "img/sphereblur_96.png", "sizes": "96x96", "type": "image/png"},
{"src": "img/sphereblur_144.png", "sizes": "144x144", "type": "image/png"},
{"src": "img/sphereblur_192.png", "sizes": "192x192", "type": "image/png"},
{"src": "img/sphereblur_256.png", "sizes": "256x256", "type": "image/png"},
{"src": "img/sphereblur_512.png", "sizes": "512x512", "type": "image/png"}],
"display": "standalone",
"start_url": "/?homescreen",
"display": "standalone"
}

Manifestファイルについてはこちらの記事がわかりやすい。こちらのWeb App Manifestの仕様にも書かれているが、"this specification is not stable"なので、今後変更される可能性があるので注意が必要。


インストールのコントロール

Manifestファイルをlinkエレメントで登録するだけだと、Chromeによって勝手にバナーが表示されて、サイト管理者はユーザーの環境でバナーがいつ表示されたのか、ユーザーがインストールしたのかキャンセルしたのかを知ることができない。この問題に対処するため、Alex RussellがこちらでBeforeInstallPromptイベントを提案している。BeforeInstallPromptイベントはインストールバナーが表示される直前に発行され、このイベントを使うと下記のようなことができる。


  • インストールバナー表示のキャンセル

  • インストールバナーの結果の検知

  • インストールバナーを後で表示

下記のコードはこちらのサンプルを参考にしている。


インストールバナー表示をキャンセル

まだインストールバナーを出すべきではない場合は、BeforeInstallPromptEventオブジェクトのpreventDefault()を呼ぶことで表示をキャンセルすることができる。

window.addEventListener('beforeinstallprompt', function(e) {

console.log('インストールバナーの表示をキャンセルします');
e.preventDefault();
});


インストールバナーの結果の検知

BeforeInstallPromptEvent.userChoiceが返すPromiseを使うことで、ユーザーがインストールをクリックしたのか、キャンセルしたのかを検知することができる。

window.addEventListener('beforeinstallprompt', function(e) {

console.log('インストールバナーを表示します');
e.userChoice.then(function(result) {
if(result.outcome == 'dismissed') {
console.log('キャンセルされました');
} else {
console.log('インストールされました');
}
});
});


インストールバナーを後で表示

BeforeInstallPromptEventハンドラ内でpreventDefault()を呼んでおき、後でprompt()を呼ぶことで、独自のボタンがクリックされた際に再度インストールバナーを表示することができる。

var saveButton = document.getElementById('save_button');

var deferredPrompt;

window.addEventListener('beforeinstallprompt', function(e) {
console.log('インストールバナーの表示をキャンセルします');
e.preventDefault();
saveButton.removeAttribute('disabled');
deferredPrompt = e;
});

saveButton.addEventListener('click', function() {
if (deferredPrompt !== undefined) {
deferredPrompt.prompt();
deferredPrompt.userChoice.then(function(result) {
if (result.outcome == 'dismissed') {
console.log('キャンセルされました');
} else {
console.log('インストールされました');
}
deferredPrompt = null;
saveButton.addAttribute('disabled');
});
}
});


デバッグ方法 その1

Manifestによるインストールバナーの表示は、"ユーザーが5分以上経過後に再び訪れる"必要が有るため、デバッグが大変である。ChromeのDeveloper ToolsのApplicationタブにManifestという項目があるので、こちらを使うと便利である。"Add to homescreen"をクリックすることで、Developer Toolsからインストールバナーを表示することができる。

manifest_devtools.png


デバッグ方法 その2

Chromeではbypass-app-banner-engagement-checksというフラグが提供されている。chrome://flags/#bypass-app-banner-engagement-checksからこのフラグを有効にすることで、サイトに初めて訪れた場合でもインストールバナーを表示することができる。また、Win/Mac/Linux環境でもenable-add-to-shelfというフラグを有効にすることで、Android/ChromeOS環境と同様にインストールバナーを表示することができる。