1

我使用 Angular 9 构建了一个 PWA，可以在这里看到，我实现了一个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的选项卡中看到，监听器已注册。Elementsbeforeinstallprompt

更新：我先解决了这个问题，然后解决了这个问题manifest.json，最后将文件中的范围属性更改为"scope": "/"to"scope": "./"和index.html文件中的<base>元素从<base href="/">to更改，<base href="./">然后问题就消失了。

4

0 回答 0