PWAで任意のインストールボタンをつける

サイトにPWAを設定.つまりmanifest.jsonを適切に設定すると,Chormeが自動でインストールできることを伝えるスナックバーのようなものを出してくれる.

これは開発者側もPWAになっているかどうか確認するには便利だが実際にユーザにインストールしてもらおうとしたときにユーザに任意にインストールさせれないのは面倒.

GoogleChomrLabs/airhorn にインストールボタンが実装されていたのでそれを参考にインストールの部分の処理を作る.

airhorn/app/scripts/main.min.jsにインストール部分の処理があった

このコードではボタンであるrootをクリックしたときにインストール処理を呼び出す.

重要な点としてインストール処理はbeforeinstallpromptで受け取っており,こちら側で処理を作る必要がない(できない)点である.

このため,インストールを実行させたいときはbeforeinstallprompt時に発行される promptEven を保持しておき, promptEvent.prompt() を呼び出せばインストール処理のダイアログを任意で表示させることができる

インストールの処理の実行をのためのダイアログ表示のコード

const install = function(e) {
    if(promptEvent) {
      promptEvent.prompt();
    }
  };

promptEvent.prompt();後にpromptEvent.userChoise()でPromiseでユーザのダイアログ後に選択結果が出力される.

また既にインストール済みの場合,appinstalledイベントが呼ばれるため,インストール済みの場合はボタンを非表示にできる.

　参考記事