2

我在NestJS（版本 7）服务器上运行Angular PWA（版本 11） 。每次新部署后，PWA 都会崩溃，因为浏览器会尝试加载不再存在的 JavaScript 文件，并且服务器会重定向到根站点 (html)：

main.945bce5e14ef8a6c0362.js:1 Uncaught SyntaxError: Unexpected token '<'

应用模块（app.module.ts）配置如下：

import { join } from 'path';

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';

import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      serveStaticOptions: {
        etag: false,
        setHeaders: (res, path) => {
          if (path.includes('ngsw.json')) {
            res.set('Cache-Control', 'no-cache, no-store, must-revalidate');
          }
        }
      },
      rootPath: join(__dirname, '..', 'pwa'),
      exclude: ['/api*']
    })
  ],
  controllers: [AppController],
  providers: [AppService]
})
export class AppModule {}

有什么建议么？先感谢您。

4

1 回答 1

0

我将向您展示我如何使用正在工作的服务人员，您可以对其进行测试，看看它是否能解决您的问题。

这是您导入服务人员的方式：

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

您应该在您app.component的测试中使用它来测试浏览器是否实现了服务工作者：

public ngOnInit(): void {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.available.subscribe(() => {
      if (confirm('Nouvelle version disponible')) {
        window.location.reload();
      }
    });
  }
}

这是你的服务工作者应该是这样的：

{
  "index": "/index.html",
  "assetsGroups": [
    {
      "name": "App Name",
      "installMode": "prefetch",
      "ressources": {
        "files": [
          "/favicon.ico",
          "/index.html"
        ],
        "versionedFile": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "ressources": {
        "files": [
          "assets/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "example-api",
      "urls": [
        "/api/example"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "timeout": "10s",
        "maxAge": "1d",
        "maxSize": 100
      }
    }
  ]
}
于 2021-04-29T14:54:16.190 回答