プログレッシブ ウェブアプリ: インストールを促す方法と測定方法

1. ようこそ

このラボでは、既存のインストール可能な PWA を取得し、カスタムのアプリ内インストール ボタンを追加します。これは、プログレッシブ ウェブアプリ ワークショップのコンパニオン Codelab シリーズの 5 番目です。前の Codelab は「タブからタスクバーへ」でした。このシリーズには、他に 3 つの Codelab があります。

学習内容

  • アプリ内 PWA インストール ボタンをカスタマイズする

必要な予備知識

  • JavaScript

必要なもの

2. 準備

まず、この Codelab を完了するために必要なスターター コードをクローンするかダウンロードします。

リポジトリのクローンを作成する場合は、pwa04--prompt-measure-install ブランチにいることを確認してください。zip ファイルには、そのブランチのコードも含まれています。

このコードベースには Node.js 14 以降が必要です。コードが用意できたら、コードのフォルダのコマンドラインから npm ci を実行して、必要なすべての依存関係をインストールします。次に、npm start を実行して、Codelab の開発用サーバーを起動します。

ソースコードの README.md ファイルには、すべての配布ファイルの説明が記載されています。また、この Codelab 全体を通して使用する主な既存のファイルは次のとおりです。

キーファイル

  • js/main.js - メイン アプリケーションの JavaScript ファイル

3. インストール ボタンを設定する

インストール プロンプトを追加してインストール イベントをキャプチャする前に、いくつかの設定を行う必要があります。まず、js/lib/install.js ファイルを作成し、次のコードを追加します。

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

次に、js/main.js の DOMContentLoaded イベントの下部に次のコードを追加します。

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

説明

このコードは、次のステップで使用される Install クラスを設定し、実行中のアプリケーションにアタッチします。

4. インストール プロンプト リスナーを追加する

インストール ボタンのトリガーを使用して PWA のインストールを実際にトリガーするには、インストール プロンプトをキャプチャする必要があります。インストールが完了したら、キャプチャしたインストール プロンプトをリセットする必要があります。これを行うには、js/lib/install.js の Install クラスの constructor で次の処理を行うコードを記述します。

インストール プロンプトをキャプチャする

  • window で beforeinstallprompt イベントをリッスンします。
  • イベントの発生を防止する
  • プロンプトをキャプチャする
  • インストール ボタンのトリガーを表示する

インストール時にプロンプトをリセット

  • window で appinstalled イベントをリッスンします。
  • キャプチャしたプロンプトをリセットする
  • インストール ボタンのトリガーを非表示にする

5. アプリ内ボタンからインストールをトリガーする

プロンプトがキャプチャされたら、PWA のインストール ボタンでプロンプトをトリガーできるようにする必要があります。そのためには、js/lib/install.js の Install クラスに次のコードを追加します。

  • インストールをトリガーする async メソッド。
    • キャプチャされたプロンプトを使用してインストールを求める
    • await: プロンプトに対するユーザーの選択
    • プロンプトをリセットする
    • ユーザーがインストール プロンプトを承認した場合は、インストール ボタンを非表示にする
  • クラスの constructor に、インストール トリガーを呼び出す click イベント リスナーをインストール ボタンに追加します。

6. 完了

これで、アプリ内のインストール ボタンから PWA のインストールをトリガーする方法を学びました。

このシリーズの次の Codelab は、PWA を強化するです。