PWA swupdate.available 仅在本地主机上触发。使用 nginx 反向代理与自定义基本 href 一起部署时不起作用 [Angular 9]

Question

我在 nginx 反向代理服务器上托管了一个转换为 PWA 的 Angular 应用程序。

\n

还有多个其他角度应用程序托管如下：

\n

https://domain.name/angularApp1\nhttps://domain.name/angularApp2\nhttps://domain.name/angularApp3\nhttps://domain.name/angularPWA (my app)\n

\n

我看到 AngularPWA 已激活服务工作线程并在检查窗口的应用程序选项卡中运行。

\n

但是，swupdate.available observable 永远不会被触发。

\n

下面是以下代码更改：

\n

使用 ng add @angular/pwa 添加了服务工作者

\n

Angular CLI: 9.1.7\n"@angular/service-worker": "~9.1.3",\nIndex.html 更新为<base href=\xe2\x80\x9c/angularPWA/\xe2\x80\x9d>

\n

按照此处的建议更新了代码，但问题尚未解决。

\n

我还收到一条警告，在 chrome 开发工具的 application -> mainfest 中未检测到匹配的服务工作线程。

\n

清单.webmanifest：

\n

"name": \xe2\x80\x9cangular-pwa\xe2\x80\x9d,\n  "short_name": "angular-pwa",\n  "theme_color": "#1976d2",\n  "background_color": "#fafafa",\n  "display": "standalone",\n  "scope": "/",\n  "start_url": \xe2\x80\x9c/angularPwa/\xe2\x80\x9c,\n

\n

应用程序模块.ts：

\n

Imports:[ServiceWorkerModule.register(\'./ngsw-worker.js\', {\n      enabled: environment.production,\n    }),\n]\n

\n

主要.ts：

\n

platformBrowserDynamic()\n  .bootstrapModule(AppModule)\n  .then(() => {\n    if (\'serviceWorker\' in navigator && environment.production) {\n      navigator.serviceWorker.register(\xe2\x80\x98./ngsw-worker.js\');\n    }\n  })\n  .catch((err) => console.error(err));\n

\n

应用程序组件.ts：

\n

Construtor(public pwaUpdate: PwaService)     \n{\n this.pwaUpdate.checkForUpdates();\n}\n

\n

渐进式应用服务：

\n

@Injectable({\n  providedIn: \'root\',\n})\nexport class PwaService {\n  promptEvent;\n  updateAvailabe = false;\n\n  constructor(private swUpdate: SwUpdate, private appRef: ApplicationRef) {\n    window.addEventListener(\'beforeinstallprompt\', (event) => {\n      this.promptEvent = event;\n    });\n    this.checkUpdate();\n  }\n\n  checkForUpdates() {\n    this.swUpdate.available.subscribe((event) => {\n      console.log(\'swupdate available\');\n      this.promptUser();\n    });\n  }\n\n  promptUser() {\n    if (\n      confirm(\n        \'This site has been updated with new data. Do you wish to reload the site to get the new data?\'\n      )\n    ) {\n      this.swUpdate.activateUpdate().then(() => document.location.reload());\n    }\n  }\n\n  checkUpdate() {\n    this.appRef.isStable.subscribe((isStable) => {\n      if (isStable) {\n        const timeInterval = interval(8 * 60 * 60 * 1000);\n        // const timeInterval = interval(20000);\n\n        timeInterval.subscribe(() => {\n          this.swUpdate.checkForUpdate().then(() => console.log(\'checked\'));\n        });\n      }\n    });\n  }\n}\n

\n