Angular PWA Service Worker 不在离线模式下调用本地主机服务器

Question

我正在开发一个使用 Angular 和 PWA 的项目，在此服务器上运行：

http://localhost:8080/heroes

我在另一台服务器上有一个 mongodb api：

http://localhost:3000/heroes

如您所见，URL 相同，但端口不同，在线时可以正常工作。但是当我切换到离线时，我希望它能够继续工作，因为服务器 api mongo 是 localhost，但它给了我这个错误：

{
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null,
    "headers": {}
  },
  "status": 504,
  "statusText": "Gateway Timeout",
  "url": "http://localhost:3000/heroes",
  "ok": false,
  "name": "HttpErrorResponse",
  "message": "Http failure response for http://localhost:3000/heroes: 504 Gateway Timeout",
  "error": null
}

也许在另一条路线上运行mongodb会起作用，我不知道，谢谢大家。

---

我将我的项目 angular pwa 添加到免费服务器以进行测试“heroes1234.000webhostapp.com”，在主页部分您可以测试 jsons api 获取，它适用于我的 localhost:3000/heroes，在网上很好，但不工作在离线模式下。谢谢

Answer 1

您如何定义要缓存在ngsw.config.json 文件中的URL？ 如果要缓存数据请求（使用性能或新鲜度策略），则应在“dataGroups”数组中定义目标 URL，如下例所示：

"dataGroups": [
{
  "name": "jokes-cache",
  "urls": [
    "/icanhazdadjoke.com"
  ],
  "cacheConfig": {
    "strategy": "performance",
    "maxSize": 5,
    "maxAge": "15m"
  }
}

我写了一个article on how to create a PWA with angular，缓存静态资产和网络调用，以防你想深入话题。