Как вызвать событие beforeinstallprompt на моем PWA? - PullRequest
Новая
       137

Как вызвать событие beforeinstallprompt на моем PWA?

0 голосов
/ 30 апреля 2020

Я создаю PWA, используя Angular 9, который можно увидеть здесь , и я реализовал обработчик событий beforeinstallprompt, чтобы предложить пользователю способ установить PWA в качестве приложения на экране устройство. Но это никогда не получает это событие. Аудит Chrome PWA проходит нормально.

Интересно, чего мне не хватает ...

Вот как я обработал событие: 

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;
      });
    })
  );
}

Последнее Оператор журнала, который я вижу в консоли браузера: 

PWA - Listening on the install prompt event on Android

Надеюсь увидеть это однажды: 

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

Обратите внимание, что следующее никогда не отображается: 

PWA - Caching custom resources for the service worker

Файл manifest.json содержит: 

  "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": [
    {
    ...

Я вижу на вкладке Event Listeners на вкладке Elements консоли браузера, прослушиватель beforeinstallprompt зарегистрирован.

...