当我部署在服务器中时，Angular Service Worker 离线缓存不起作用

Question

当我使用 angular/pwa 构建我的 Angular 项目并使用 http-server 在本地服务器上测试它时，它按预期工作。即使离线缓存在本地也能正常工作。

但是当我在服务器中部署相同的东西时，我可以在任何设备上安装并运行它，但在离线时无法打开。

service-workers 没有缓存 Angular PWA 中的内容

这是我的 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GetchucknorrisjokesService } from './getchucknorrisjokes.service';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [ GetchucknorrisjokesService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的 ngsw-config.json 文件

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Answer 1

通过删除 $schema 来更新您的服务工作者，我的配置与您的相同

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

您遇到问题是因为当您构建到生产模式时，您的代码正在寻找此文件 ./node_modules/@angular/service-worker/config/schema.json

所以你的服务人员将无法工作

Answer 2

我解决了所有

manifest

文件错误，并将 $schema 添加回

new-config.json

，现在离线模式正在运行。