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

Question

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

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

服务工作者没有缓存 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所以你的服务人员将无法工作