How to trigger the beforeinstallprompt event on my PWA?

Question

I build a PWA using Angular 9 which can be seen here and I implemented an beforeinstallprompt event handler so as to offer the user a way to install the PWA as an app on the screen device. But it never receives this event. The Chrome PWA audit passes fine.

I wonder what I'm missing...

Here is how I handle the event:

public checkForBeforeInstallEvents(): void {
  if (this.platform.ANDROID) {
    if (!this.isInStandaloneModeAndroid()) {
      console.log('PWA - Listening on the install prompt event on Android');
      window.addEventListener('beforeinstallprompt', this.handleBbeforeInstallAndroid);
      window.addEventListener('appinstalled', this.handleAlreadyInstalledAndroid);
      self.addEventListener('install', this.handleServiceWorkerInstallEvent);
      self.addEventListener('fetch', this.handleServiceWorkerFetchEvent);
    }
  }
}

private handleBbeforeInstallAndroid(event: Event): void {
  event.preventDefault();
  this.installPromptEvent = event;
  console.log('PWA - Received and saved the install prompt event on Android');
}

private handleAlreadyInstalledAndroid(event: Event): void {
  this.alreadyInstalledEvent = event;
}

private handleServiceWorkerInstallEvent(event: any): void {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      console.log('PWA - Caching custom resources for the service worker');
      return cache.addAll([
        './index.html', // Caching the resource specified in the start_url in the manifest file
        // is a prerequisite to receiving the beforeinstallprompt event from the browser
      ]);
    })
  );
}

// Listening to the fetch event is a prerequisite to receiving the beforeinstallprompt event from the browser
private handleServiceWorkerFetchEvent(event: any): void {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('PWA - Found response in cache:', response);
        return response;
      }
      console.log('PWA - No response found in cache. About to fetch from network...');
      return fetch(event.request).then(function(response) {
        console.log('PWA - Response from network is:', response);
        return response;
      }, function(error) {
        console.error('PWA - Fetching failed:', error);
        throw error;
      });
    })
  );
}

The last log statement I can see in the browser console is:

PWA - Listening on the install prompt event on Android

I hope to see this one some day:

PWA - Received and saved the install prompt event on Android'

Note that the following one never displays:

PWA - Caching custom resources for the service worker

The manifest.json file contains:

  "name": "Music Note Generation",
  "short_name": "MusicNG",
  "description": "A simple music note generator to see if it's possible to generate a melodious soundtrack.",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "scope": "/",
  "start_url": "./index.html",
  "display": "standalone",
  "orientation": "portrait",
  "icons": [
    {
    ...

I can see in the Event Listeners tab in the Elements tab of the browser console, the beforeinstallprompt listener is registered.

UPDATE: I fixed the issue with solving this other issue first, then this other issue and finally changing the scope property in the manifest.json file from "scope": "/" to "scope": "./" and in the index.html file changing the <base> element from <base href="/"> to <base href="./"> and the issue was then gone.