wake-up-neo.com

Angular 5 und Service Worker: So schließen Sie einen bestimmten Pfad von ngsw-config.json aus

Ich habe ngsw-config.json (aus docs genommen):

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Auf meiner Website gibt es einen Link zum RSS-Feed /api/rss, der in einem neuen Browser-Tab geöffnet werden sollte, ohne die Angular-App zu laden. Wie kann ich es aus einer Liste von Ressourcen ausschließen, deren Anfrage an index.html weitergeleitet wird?

UPD: Ich habe versucht, die folgende Konfiguration zu bearbeiten (siehe !/api/rss):

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "patterns": ["!/api/rss"],
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "!/api/rss"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}
angularservice-workerangular-service-worker
15
ktretyak

Dank der Pedro Arantesadvice erreichte ich die nächste funktionierende Konfiguration (siehe dataGroups und "maxAge": "0u"):

{
  "index": "/index.html",
  "dataGroups":
  [
    {
      "name": "api",
      "urls": ["/api"],
      "cacheConfig": {
        "maxSize": 0,
        "maxAge": "0u",
        "strategy": "freshness"
      }
    }
  ],
  "assetGroups":
  [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}
13
ktretyak

Haben Sie bereits versucht, Datengruppen anzulegen? dataGroups wird zur Datenabfrage verwendet, z. B. assetGroups an Assets (dies sind Dateien).

Datengruppen 

Im Gegensatz zu Asset-Ressourcen werden Datenanforderungen nicht versioniert zusammen mit der App. Sie werden gemäß manuell konfiguriertem .__ zwischengespeichert. Richtlinien, die für Situationen wie API-Anforderungen und .__ nützlich sind. andere Datenabhängigkeiten.

Datengruppenschnittstelle:

export interface DataGroup {
  name: string;
  urls: string[];
  version?: number;
  cacheConfig: {
    maxSize: number;
    maxAge: string;
    timeout?: string;
    strategy?: 'freshness' | 'performance';
  };
}

Sie können eine Datengruppe erstellen, die /api/rss ausschließt (wenn "!/api/rss" nicht funktioniert, können Sie alle anderen APIs in urls": ["/api/user", "/api/admin"] hinzufügen:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "assetGroup1",
    ...
  }, {
    "name": "assetGroup1",
    ...
  }],
  "dataGroups": [{
    "name": "dataGroup1";
    "urls": ["!/api/rss"];
    cacheConfig: {
      maxSize: 50;
      maxAge: "3d12h";
    }
  }, {
    "name": "dataGroup2";
    "urls": ["/api/user"];
    cacheConfig: {
      maxSize: 40;
      maxAge: "3d12h";
    }
  }]
}
12
Pedro Arantes

Die Datei ngsw-configuration.json verwendet das Glob-Format für Musterabgleichpfade.

Patterns use a limited glob format:

** matches 0 or more path segments.
* matches exactly one path segment or filename segment.
The ! prefix marks the pattern as being negative, meaning that only files that don't match the pattern will be included.

Wichtig ist hier das Präfix !, mit dem ein Pfad ausgeschlossen werden kann. Zum Beispiel sollte ein Glob-Muster von !/api/rss diesen Pfad ausschließen.

Um einen Pfad aus Ihrer Datei nags-configuration.json auszuschließen, fügen Sie diesem Pfadmuster einfach das Zeichen ! voran.

6
Trent

In der Datei ngsw-config.json { "index": "/index.html", "dataGroups": [ { "name": "api", "urls": ["!/**/*profileimageupload*"], "cacheConfig": { "maxSize": 0, "maxAge": "0u", "strategy": "freshness" } } ]
}

z.B. Wenn Ihre API wie https://api.example.com/profileimageupload/ ist, fügen Sie das letzte Segment aus dem Service/API hinzu

Ich füge profileimageupload hinzu, das ich aus dem Service-Worker ausschließen (entfernen) möchte. Deshalb habe ich hinzugefügt!/**/IhrService-/API-Nachname,

0
Sachin from Pune