PWAのインストールを促進する方法

PWAのインストール

PWA化が可能なwebサイトでは、初回訪問時などのブラウザが決める特定のタイミングにおいて以下のようなダイアログが表示されます。

しかし、ユーザーにとっては唐突であったり、意味を把握できなかったりなどの理由で拒否されるケースは多々あります。その場合、再度出現することは(ほとんど)なく、PWA化が促進されません。
そこで、任意のタイミングで開く処理を作成します。

実装

ChromeとEdgeでは、BeforeInstallPromptEventのイベントを操作することによって、ブラウザの挙動を呼び出すことが可能です。
react-use-a2hsを実装しました。

useA2HS.tsx

export const useA2HS = (
  config?: Config
): [IBeforeInstallPromptEvent | null, () => void] => {
  const [
    promptEvent,
    setPromptEvent,
  ] = React.useState<IBeforeInstallPromptEvent | null>(null);

  const promptToInstall = () => {
    if (promptEvent) promptEvent.prompt();
  };

  React.useEffect(() => {
    const listener = (e: IBeforeInstallPromptEvent) => {
      e.preventDefault();
      setPromptEvent(e);
      e.userChoice
        .then((result) => {
          if (result.outcome === "accepted") {
            if (config?.onAccepted) config.onAccepted();
          } else {
            if (config?.onDismissed) config.onDismissed();
          }
          return;
        })
        .catch(console.error);
    };

    window.addEventListener("beforeinstallprompt", listener as any);
    return () => {
      window.removeEventListener("beforeinstallprompt", listener as any);
    };
  }, [config]);

  return [promptEvent, promptToInstall];
};

ブラウザサポート

BeforeInstallPromptEventとともに、appinstalledも存在しています。
しかし、2019年にSafariとFirefoxがサポートを否定したことによって、W3Cはこの仕様を削除しました。現在この仕様についてはWICGで議論がされていますが、実装予定は見えません。(Firefoxは実装済みのappinstalledを削除までしました)
よって、現状すでに対応されているChromeとEdge以外のブラウザではサポートされないと見て実装するのが無難であると思われます。

回避策

ユーザーがどのブラウザを使用しているのかを、User-Agentから判定したうえで、対応ブラウザにおいてはこのEventを活用し、対応していないブラウザにおいては、ユーザーにブラウザの操作をしてもらうような説明が記載された独自実装のModalコンポーネントを表示することが効果的です。