Website-Suche

javascript - Angular-Service-Worker-Offline-Caching funktioniert nicht, wenn ich auf dem Server bereitgestellt habe

Als ich mein Angular-Projekt mit angular/pwa gebaut und auf einem lokalen Server mit http-server getestet habe, funktionierte es wie erwartet. Selbst das Offline-Caching funktioniert lokal einwandfrei.

Aber als ich dasselbe auf dem Server bereitgestellt habe, konnte ich es auf jedem Gerät installieren und ausführen, aber nicht öffnen, wenn ich offline bin.

Service-Worker speichern die Inhalte in Angular PWA nicht im Cache

Hier ist mein 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 { }

Hier ist meine ngsw-config.json-Datei

{
  "$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)"
        ]
      }
    }
  ]
}

Antwort #1

Aktualisiere deinen Service Worker so, indem du $schema entfernst, meine Konfiguration ist dieselbe wie deine

{
  "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)"
        ]
      }
    }
  ]
}

Du hast das Problem, weil dein Code beim Erstellen im Produktionsmodus nach dieser Datei sucht: ./node_modules/@angular/service-worker/config/schema.json

Also wird Ihr Service Worker nicht funktionieren

Antwort #2

Ich habe alle manifest-Dateifehler behoben und das $schema wieder zu new-config.json hinzugefügt, und jetzt funktioniert der Offline-Modus.

Verwandte Artikel