web-dev-qa-db-ja.com

Angular 5 and Service Worker：ngsw-config.jsonから特定のパスを除外する方法

私はngsw-config.jsonを持っています（ docs から取られました）：

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

私のサイトには、RSSフィード/api/rssへのリンクがあり、Angularアプリをロードせずに新しいブラウザータブで開く必要があります。要求はindex.htmlにリダイレクトされますか？

[〜＃〜] upd [〜＃〜]：次の設定を試しましたが、動作しませんでした（!/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
19
ktretyak

Pedro Arantesadvice のおかげで、次の動作する設定に到達しました（dataGroupsおよび"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/**"
        ]
      }
    }
  ]
}
21
ktretyak

すでにデータグループを作成しようとしましたか？ dataGroupsは、アセット（ファイル）へのassetGroupsなどのデータ要求に使用されます。

データグループ

資産リソースとは異なり、データ要求はアプリとともにバージョン管理されません。 APIリクエストやその他のデータ依存性などの状況により役立つ手動設定のポリシーに従ってキャッシュされます。

データグループインターフェース：

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

/api/rssを除外するデータグループを作成できます（"!/api/rss"が機能しない場合は、urls": ["/api/user", "/api/admin"]に他のすべてのAPIを追加できます。

{
  "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";
    }
  }]
}
15
Pedro Arantes

ngsw-configuration.jsonファイルは、パターンマッチングパスにglob形式を使用します。

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.

ここで重要なのは、パスを除外するために使用できる!プレフィックスです。たとえば、!/api/rssのglobパターンはこのパスを除外する必要があります。

Nags-configuration.jsonファイルからパスを除外するには、このパスパターンに!文字を単に追加します。

5
Trent

Ngsw-config.jsonファイル内

{
  "index": "/index.html",
  "dataGroups":
  [
    {
      "name": "api",
      "urls": ["!/**/*profileimageupload*"],
      "cacheConfig": {
        "maxSize": 0,
        "maxAge": "0u",
        "strategy": "freshness"
      }
    }
  ]  
}

例えば。 APIが https://api.example.com/profileimageupload/ の場合、Service/APIから最後のセグメントを追加します

profileimageuploadを追加します。サービスワーカーからの呼び出しを除外（削除）したいので、追加しました！/ ** /yourService/Api姓、

0
Sachin from Pune