Angular 5和Service Worker:如何从ngsw-config.json中排除特定路径

Question

我ngsw-config.json(摘自文档):

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

Answer 1

感谢Pedro Arantes的 建议,我达到了下一个工作配置(见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/**"
        ]
      }
    }
  ]
}

Answer 2

您是否已尝试创建数据组？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"不起作用,您可以添加所有其他API urls": ["/api/user", "/api/admin"]:

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

Answer 3

正确的方法是从索引重定向中省略端点。因此，您的 ngsw-config.json 应该如下所示，添加navigationUrls和否定您希望省略的 url 部分。这样 URL 将被重定向并完全绕过 ngSW。

    {
      "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/**"
          ]
        }
      }],
      "navigationUrls": [
        "!/api/rss"
      ]
    }

注意，!/api/rss是具体的。如果您想省略整个api文件夹，请使用!/api/**。

此处的文档https://angular.io/guide/service-worker-config#navigationurls

请注意，根据文档，否定 ( !) 不起作用。"resources": "urls":

Answer 4

现在这变得更容易了，您可以使用ngsw-bypass 绕过来自 angular service worker 的 URL 。从文档：

要绕过 Service Worker，您可以将 ngsw-bypass 设置为请求标头或查询参数。（标题或查询参数的值被忽略，可以为空或省略。）

我正在使用查询字符串绕过 service worker 的某个 url，如下所示：

https://mydomain.report-uri.com/r/d/csp/enforce?ngsw-bypass=true

Answer 5

该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.

这里重要的是!前缀,可用于排除路径.例如,glob模式!/api/rss应该排除此路径.

要从nags-configuration.json文件中排除路径,只需将!字符添加到此路径模式中.