Angular Service Worker,缓存api调用离线应用程序 [英] Angular Service Worker, caching api calls for offline app
本文介绍了Angular Service Worker,缓存api调用离线应用程序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用API请求使角色工作的服务工作者。
我希望该应用离线工作,我有以下配置:
I'm trying to make the service worker in angular work with API requests. I'd like the app to work offline and I've the below config:
{
"name": "api",
"urls": ["https://x.com/**"],
"cacheConfig": {
"strategy": "performance",
"maxSize": 20,
"maxAge": "365d",
"timeout": "5s"
}
}
以下是我离线时xhr标签的样子:
Here is what the xhr tab looks like when I'm offline:
这是用户请求的内容:
正如您所看到的,用户的API调用无法解决。
As you can see the API calls for user don't resolve.
这就是响应用户
在线时看起来像:
This is what the response of user
looks like when online:
推荐答案
试试这个:
- 转到你的申请表选项卡 - >清除存储 - >清除站点数据。
-
从此更改DataGroups数组:
- Go to your application tab -> Clear Storage -> Clear Site Data.
Change your DataGroups array from this:
{
"name": "api",
"urls": ["https://x.com/**"],
"cacheConfig": {
"strategy": "performance",
"maxSize": 20,
"maxAge": "365d",
"timeout": "5s"
}
}
对此:
"dataGroups": [
{
"name": "api-performance",
"urls": [
"/user" //<=========== I know you want all API calls to be cached, but try this first and see
],
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "3d"
}
}
]
- 在
PROD
, - 第一次访问该页面。
- 禁用网络
- 刷新页面
- save and build your app in
PROD
, - visit the page the first time.
- disable network
- refresh your page
这篇关于Angular Service Worker,缓存api调用离线应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文