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

Question

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

http://localhost:8080/heroes

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

http://localhost:3000/heroes

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

{
"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"，在部分主页中您可以测试 JSON API 获取，它适用于我的本地主机：3000/英雄，在线很好，但在离线模式下不起作用。 谢谢

Answer 1

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

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

我写了一篇关于如何使用角度、缓存静态资产和网络调用创建 PWA 的文章，以防您想加深该主题。