34

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

7 回答 7

34

感谢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/**"
        ]
      }
    }
  ]
}
于 2017-12-16T20:23:41.370 回答
20

您是否已经尝试创建数据组？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";
    }
  }]
}
于 2017-12-16T19:09:17.417 回答
15

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

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

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

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

于 2019-10-23T10:10:55.247 回答
9

这样做的正确方法是从索引重定向中省略端点。因此，您的 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":

于 2020-08-19T14:53:55.870 回答
4

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

于 2017-12-16T05:59:01.630 回答
0

在 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 last name的原因，

于 2019-01-16T18:30:58.770 回答
0

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

更多详情;

请转到github问题

于 2020-02-18T07:55:12.177 回答