こちらの意図したタイミングでアプリインストールバナーを表示する
インストールを促すバナーを出せることは下記の記事で書きましたが、タイミングもコントロールできます。
http://www.workabroad.jp/posts/2212
インストールバナーを出すにはクリアすべき条件があります。
1
2
3
4
5
6
7
8
- manifest.json があり、その中で、
- short_name が設定されている（ホームスクリーンに使用される）
- name が設定されている（バナーに使用される）
- 192x192 の PNG が設定されている
- start_url が設定されている
- Service Worker が register されている
- HTTPS接続である
- ユーザーがある程度サイトを回遊している（条件はよく変更される）
以上の条件がクリアできれば、
http://www.workabroad.jp/posts/2213 こちらの方法でシュミレータを使いながらデバッグできます。
シミュレータをデバッグ出来る状態にして Application タブに移動、 Add to homescreen というリンクを押すと、インストールバナーの発火をシミュレーションすることができます。
コード
Chromeに勝手にバナーを出されては、タイミングがコントロールできないので、コードで制御する必要があります。
beforeinstallprompt が該当のイベント名です。
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Service Worker の登録
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function() {
console.log('Service worker registered!');
});
}
// アプリインストールバナーが表示される直前で処理を中断
window.addEventListener('beforeinstallprompt', function(event) {
event.preventDefault();
defferedPrompt = event;
return false;
})
// ボタンが押されたとか等のイベントを監視して、そのタイミングで中断していたアプリインストールバナー表示を発火
function doSomething() {
console.log('Button is pressed! Show install banner.');
if (defferedPrompt) {
defferedPrompt.prompt();
defferedPrompt.userChoice.then(function(choiceResult) {
if (choiceResult.outcome === 'dismissed') {
console.log('User canncelled');
} else {
window.alert('Thank You!');
}
});
defferedPrompt = null;
}
}
document.getElementById('your-button').addEventListener('click', doSomething);
こんな感じです。
以上です。