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

Angular 5 and Service Worker: How to exclude a particular path from 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/**"
          ]
        }
      }]
    }

在我的网站上有一个 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/**"
          ]
        }
      }]
    }

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.

您是否尝试过创建数据组? 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";
    }
  }]
}

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

在 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 的原因姓名,

现在这变得更容易了,您可以使用 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

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

更多细节;

Go github issue please

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