pwa on chrome mobile一直只返回数据http响应的缓存版本

Question

我有一个Angular 7 Progressive Web Application（PWA，Service Worker）。

我的应用程序向api发出http请求以获取页面的数据。与服务工作者一起缓存数据，以便下次用户进入页面时，他将看到缓存的数据，直到他/她从http响应中获取最新数据。

问题出在Android上的Chrome Mobile上。它一直只返回缓存的http响应，而不是新数据。每个其他浏览器和操作系统都返回新数据。

这是我的ngsw.json文件：

{
  "configVersion": 1,
  "timestamp": 1553131016147,
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/favicon.ico",
        "/index.html",
        "/main.888b10bbc9ea06b8a9bf.js",
        "/polyfills.9f595158f842acad6b37.js",
        "/runtime.2f29e12616932f0ed037.js",
        "/styles.d2478451b17ed7e705c5.css"
      ],
      "patterns": []
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "urls": [],
      "patterns": [
        "https:\\/\\/maxcdn\\.bootstrapcdn\\.com\\/font-awesome\\/4\\.7\\.0\\/css\\/font-awesome\\.min\\.css"
      ]
    }
  ],
  "dataGroups": [
    {
      "name": "api",
      "patterns": [
        "\\/api"
      ],
      "strategy": "freshness",
      "maxSize": 100,
      "maxAge": 259200000,
      "timeoutMs": 5000,
      "version": 1
    }
  ],
  "hashTable": {
    "/favicon.ico": "7c6a9b4e1370b6ee9386e16fba9ca4738b9e7037",
    "/index.html": "fdf70f70c0f37aaa11b990ac0cf32839480b69a4",
    "/main.888b10bbc9ea06b8a9bf.js": "abcc804a2ffbd57187d759a7c18b82963ac03d8c",
    "/polyfills.9f595158f842acad6b37.js": "4eb96258211620bfe371478144b69844117f5120",
    "/runtime.2f29e12616932f0ed037.js": "21109b3561b5a6c3ed51bc3015962f05da8e57b3",
    "/styles.d2478451b17ed7e705c5.css": "29fb80dd9fc36fbb4ee107f15fd24dd7400ea255"
  },
  "navigationUrls": [
    {
      "positive": true,
      "regex": "^\\/.*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
    }
  ]
}

相关的代码部分在dataGroups下，所有的网址都带有/api前缀，正如你所看到的，我正在使用freshness策略，根据Angular的服务工作者配置页面：https://angular.io/guide/service-worker-config

新鲜度优化数据货币，优先从网络获取所请求的数据。只有当网络超时时，根据超时，请求才会回退到缓存。这对于频繁更改的资源非常有用;例如，帐户余额。

但在Android的这款Chrome Mobile手机中似乎恰恰相反。

你有没有遇到过这个并且可以指出我正确的方向？

Answer 1

从我对角度服务工作者的工作方式的理解是：

如果您指定了freshness策略，则服务工作者将等待timeout密钥指定的时间（不是timeoutMs），以便网络在指定的时间内响应将从缓存数据发送响应时作出响应。服务人员。

在您的情况下，Android设备可能具有较低的Internet速度，因此数据不会在指定的超时间隔内获取，因此您将获得缓存的数据。通过增加超时来检查应用程序。

---

以防你需要这个。

我发现缓存API请求非常不可靠，我没有清楚的想法何时才能获得更新的数据。 （当maxSize或maxAge超过指定值或超时已超过时，是，但仍然没有明确的方法可以确保获得新数据。）。

每当我想从服务器获取新数据时，我都会清除所有来自浏览器的缓存数据，这些数据属于ngsw api调用。我为此编写了这个脚本。看看你是否需要它。

caches.keys().then((keys) => {
    keys.forEach((eachCacheName) => {
        let regExPat = /^(ngsw).*api.*/;
        if (regExPat.test(eachCacheName)) {
            caches.open(eachCacheName).then((eachCache) => {
                eachCache.keys().then((requests) => {
                    requests.forEach((eachRequest) => { eachCache.delete(eachRequest); });
                });
            });
        }
    });
});