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

在我的网站上有一个指向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 advice，我接触了下一个工作配置（请参阅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请求和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";
    }
  }]
}

Answer 3

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文件中排除路径，只需将!字符添加到此路径模式中。

Answer 4

现在，这变得更容易了，您可以使用 ngsw-bypass 来绕过角度服务工作者的URL。来自docs：

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

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

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

Answer 5

执行此操作的正确方法是从索引重定向中忽略端点。因此，您的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/**。

此处

的文档

请注意，根据文档，在! "resources":下，否定（"urls":）无效。

Answer 6

在ngsw-config.json文件中

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

例如如果您的API类似于this tool，请添加服务/ API中的最后一段

我添加了 profileimageupload ，我想排除（删除）来自服务人员的呼叫，这就是我添加！/ ** / yourService / Api姓氏的原因，

>

Answer 7

您可以通过标头或查询字符串针对特定请求禁用服务工作者。

更多细节；

Go github issue please

Answer 8

如果有帮助，请告诉我们：

    { 
   "exclude": [ 
     "test.ts", 
     "**/*.spec.ts" 
   ] 
   }

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

8 个答案: