Typescript type BeforeInstallPromptEvent Typescript type BeforeInstallPromptEvent typescript typescript

Typescript type BeforeInstallPromptEvent


The BeforeInstallPromptEvent is a non-standard Web API and currently only supported by Chrome and Android. I'm not even sure whether Google considers it stable yet, but in either case I wouldn't expect to see an official type definition in the TypeScript DOM library any time soon.

However you can define the type yourself, e.g. in a .d.ts file. I use the definition below (comments from MDN), which seems to be accurate enough in Chrome 68.

/** * The BeforeInstallPromptEvent is fired at the Window.onbeforeinstallprompt handler * before a user is prompted to "install" a web site to a home screen on mobile. * * @deprecated Only supported on Chrome and Android Webview. */interface BeforeInstallPromptEvent extends Event {  /**   * Returns an array of DOMString items containing the platforms on which the event was dispatched.   * This is provided for user agents that want to present a choice of versions to the user such as,   * for example, "web" or "play" which would allow the user to chose between a web version or   * an Android version.   */  readonly platforms: Array<string>;  /**   * Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".   */  readonly userChoice: Promise<{    outcome: 'accepted' | 'dismissed',    platform: string  }>;  /**   * Allows a developer to show the install prompt at a time of their own choosing.   * This method returns a Promise.   */  prompt(): Promise<void>;}


Don't forget you also need to add a key into WindowEventMap:

interface BeforeInstallPromptEvent extends Event {  readonly platforms: string[];  readonly userChoice: Promise<{    outcome: "accepted" | "dismissed";    platform: string;  }>;  prompt(): Promise<void>;}declare global {  interface WindowEventMap {    beforeinstallprompt: BeforeInstallPromptEvent;  }}window.addEventListener("beforeinstallprompt", (e) => {}); // e is now typed

Note the declare global {} is a wrapper for typing global stuff in your code. If you do it in an ambient .d.ts file where no import / export keyword exists, then no need for the wrapper.