Progressive web app

Web App Manifest, and Service Worker API seem to be the key technologies to watch. Google's Progressive Web App Checklist mentions both of these technologies.

However, other technologies such as BeforeInstallPromptEvent, or PWA installation notifications, are explicitly discouraged by Mozilla Developer Network, MDN:

Do not use it [BeforeInstallPromptEvent] on production sites facing the Web

Also, as an aside, commercial incentives for PWA's appear to exist:

The Supreme Court signaled Apple could face a revived antitrust lawsuit over its price control [...and 30% take] of the iPhone and iPad App Store. -Fortune

Google indicates that a progressive web app, PWA, is:

• Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
• Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
• App-like - Feels like an app, because the app shell model separates the application functionality from application content .
• Fresh - Always up-to-date thanks to the service worker update process.
• Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
• Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
• Re-engageable - Makes re-engagement easy through features like push notifications.
• Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
• Linkable - Easily share the application via URL, does not require complex installation.

Not the best answer, but maybe will help someone...

So I ended up doing this (in Typescript):

   const checkIfCanInstallPWA():Promise<false| Event> {
     return new Promise((resolve, _reject) => {
        const timeout = setTimeout(() => {
            resolve(false);
        }, 1000);

        window.addEventListener('beforeinstallprompt', 
            (_event) => {
            _event.preventDefault();
            clearTimeout(timeout);
            resolve(_event);
        });
      })
    }

And then when you need the logic\prompt the installation:

  // the logic, inside a component etc.
  const installationEvent: false| Event  = await checkIfCanInstallPWA();
  if (!installationEvent) {
     // can't install PWA
     // do stuff like hide the button... 
  } else {
      somePersistantStae.installationEvent = installationEvent;
  }

Then when you want the user to get the installation prompt:

   // when the user clicks the install button
   const clickInstall = () => somePersistantStae.installationEvent.prompt()
  

It's not pretty, I know...

Conclusions:

1. The beforeinstallprompt event fires if the browser is "willing" to install this PWA. Why this PWA? because for example in chrome, it won't install if the splash icon is not a perfect square or its size is smaller than 144x144px. So, the browser might not support installation of PWA in general, or might not want to install your specific PWA (this is still experimental as you can see here. So the "falsie" answer could come from a number of different reasons.
2. If the browser "is willing" to install, The event object can be used even after several minutes (to my surprise)
3. Even though it's a hacky solution its the only one that gave me the ability to place the install button somewhere in my app, and have the users install the PWA whenever they want (and not prompt them on the first page load, which is annoying IMO).