Prompt to install PWA Reac Provider

PromptToInstall.md

Prompt to install a React PWA

A React Provider/Consumer (hook) to capture beforeinstallprompt and display Install app? message to the user at a later time/event.

PropmptToInstall and usePromptToInstall

// PropmptToInstall.tsx
import React, { createContext, useState, useEffect, useContext, useCallback, ReactNode } from 'react';
import { IBeforeInstallPromptEvent, PromptCtx } from './types';

const PromptToInstall = createContext<PromptCtx>({deferredEvt: null});

export function PromptToInstallProvider({ children }: { children: ReactNode }) {
  const [deferredEvt, setDeferredEvt] = useState<IBeforeInstallPromptEvent | null>(
    null,
  );

  const hidePrompt = useCallback(() => {
    setDeferredEvt(null);
  }, []);

  useEffect(() => {
    const ready = (e: IBeforeInstallPromptEvent) => {
      e.preventDefault();
      setDeferredEvt(e);
    };

    window.addEventListener('beforeinstallprompt', ready as any);

    return () => {
      window.removeEventListener('beforeinstallprompt', ready as any);
    };
  }, []);

  return (
    <PromptToInstall.Provider value={{deferredEvt, hidePrompt}}>
      {props.children}
    </PromptToInstall.Provider>
  );
}

export function usePromptToInstall() {
  const ctx = useContext(PromptToInstall);
  if (!ctx) {
    throw new Error('Cannot use usePromptToInstall() outside <PromptToInstallProvider />');
  }
  return ctx;
}

Example

// somewhere in your app
<PromptToInstallProvider>
  {/* stuff .. */}
  <InstallAppMessage />
</PromptToInstallProvider>

// InstallAppMessage.tsx
import React from 'react';
import { usePromptToInstall } from './PropmptToInstall';

export default function InstallPromptMessage() {
  const { deferredEvt, hidePrompt } = usePromptToInstall();

  if (!deferredEvt) {
    return null;
  }
  return (
    <span>
      <p>Do you want to install app onto your device?</p>
      <div>
        <button onClick={deferredEvt.prompt}>Yes</button>
        <button onClick={hidePrompt}>No, hide message</button>
      </div>
    </span>
  );
}

Types

// types.ts
import { ReactElement } from 'react';

export interface IBeforeInstallPromptEvent extends Event {
  readonly platforms: string[];
  readonly userChoice: Promise<{
    outcome: 'accepted' | 'dismissed';
    platform: string;
  }>;
  prompt(): Promise<void>;
}
export type PromptCtx = {
  deferredEvt: IBeforeInstallPromptEvent | null;
  hidePrompt?:() => void;
};