こちらの意図したタイミングでアプリインストールバナーを表示する

インストールを促すバナーを出せることは下記の記事で書きましたが、タイミングもコントロールできます。
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 というリンクを押すと、インストールバナーの発火をシミュレーションすることができます。

スクリーンショット_2018-03-17_18.17.28

コード

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);

こんな感じです。
以上です。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた