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

Question

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

在我的网站上有一个 link 到 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

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 模式应该排除此路径。

To exclude a path from your nags-configuration.json file, simply prepend the ! character to this path pattern.

Answer 2

您是否尝试过创建数据组？ dataGroups 用于数据请求，例如 assetGroups 资产（文件）。

Data Groups

Unlike asset resources, data requests are not versioned along with the app. They're cached according to manually-configured policies that are more useful for situations such as API requests and other data dependencies.

数据组接口：

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

Answer 3

感谢 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 4

在 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 ，我想排除（删除）来自 service worker 的调用，这就是我最后添加 !/**/yourService/Api 的原因姓名,

Answer 5

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

To bypass the service worker you can set ngsw-bypass as a request header, or as a query parameter. (The value of the header or query parameter is ignored and can be empty or omitted.)

我正在使用查询字符串绕过服务工作者的某个 url，如下所示：

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

Answer 6

您可以通过 headers 或查询字符串为特定请求禁用服务工作者。

更多细节；

Go github issue please

Answer 7

正确的做法是从索引重定向中省略端点。所以你的 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": 下不起作用。

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

Angular 5 and Service Worker: How to exclude a particular path from ngsw-config.json

service-worker

angular

angular-service-worker