angular - Angular service-worker 阻止缓存 SSE 调用

Question

我已经使用 angular (5.2.9) service-worker 设置了 PWA。以下是我的配置：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ],
      "urls": [
        "https://fonts.googleapis.com/**",
        "https://fonts.gstatic.com/**"
      ]
    }
  }],
  "dataGroups": [{
    "name": "api-freshness",
    "urls": [
      "!/api/event"
    ],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 30,
      "maxAge": "20m",
      "timeout": "9s"
    }
  }]
}

我试图实现的dataGroups.urls[]是使用网络优先原则缓存每个提取，除了调用之外/api/event，这是一个使用长期连接的 ServerSentEvents 端点。可悲的是，上面的设置并没有实现这一点。

此端点用于我的应用程序中的两个中央路由，但侦听相同类型的事件调用数据刷新。在 DevTools Application>下检查我的应用程序Clear Storage，我可以在客户端缓存请求时拖尾存储大小。在我使用api/event. 然后缓存突然跳了3-4 Mb，我猜这是因为它是一个流......？

缓存调用后，每次调用api/event都会进入两次，一次来自网络，一次来自 service-worker，并且 service-worker 调用始终处于挂起状态。通过关闭 SSE 连接，只有网络调用被取消。这样做的效果是，在使用此端点在两条路由之间来回导航几次之后，chrome 似乎用完了可用的套接字 - 进一步调用任何停留在Pending状态的端点，这反过来又离开我的应用程序处于无用状态。:-(

非常感谢您对此的任何意见。

score 1 · Accepted Answer

我已经阅读了生成ngsw-worker.js文件的代码，发现了这一行：

if (req.headers.has('ngsw-bypass') || /[?&]ngsw-bypass(?:[=&]|$)/i.test(requestUrlObj.search)) {
  return;
}

所以我只是将我的连接 URL 更改为这个：

this.sse = new EventSource(`${EVENTS_API}?accessToken=${token}&ngsw-bypass=true`);

它有帮助，现在我的 Angular 应用程序每次都可以连接到服务器发送事件 API，而不会出现错误。

score -2 · Accepted Answer

如果您想防止重复的服务人员呼叫，请执行以下几个步骤。

构建您的项目生产模式。
转到构建文件夹（默认为 /dist）
打开 /dist 目录下的 ngsw-worker.js 文件。
查找 onFetch(event) {功能

修改 onfetch 函数，如下所示

onFetch(event) {

/* your api endpouint url or domain url here*/

var blackListDomain=["www.xyz.com/api","www.abc.com/v2/api"];

for (var i = 0; i < blackListDomain.length; i++) {
    if (event.request.url.indexOf(blackListDomain[i])>-1) {
         console.log("revent " + event.request.url);
        return;
    }
}

暗示

angular - Angular service-worker 阻止缓存 SSE 调用

2 回答 2

Related

Reference