当Angular PWA Service Worker在离线模式下没有调用本地服务器时,可能是因为Service Worker无法找到本地服务器的资源。以下是一种可能的解决方法:
ngsw-config.json
文件,并确保你的本地服务器资源的URL在assets
或dataGroups
中。例如:"dataGroups": [
{
"name": "api",
"urls": [
"/api/**"
],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 20,
"maxAge": "3d",
"timeout": "5s"
}
}
]
ngsw-worker.js
文件,并查找fetch
事件监听器。确保你的本地服务器资源的请求被处理并缓存。例如:this.fetchHandler = (event) => {
const req = event.request.clone();
if (req.url.startsWith('/api/')) {
event.respondWith(this.handleApiRequest(req));
} else {
event.respondWith(fromCache(req));
}
};
function fromCache(req) {
return caches.match(req).then((resp) => {
return resp || fetch(req);
});
}
function handleApiRequest(req) {
return fetch(req).then((resp) => {
const clonedResp = resp.clone();
caches.open('api').then((cache) => {
cache.put(req, clonedResp);
});
return resp;
});
}
ngsw-worker.js
文件是否被正确地注册。例如,在app.module.ts
中的ServiceWorkerModule.register()
方法中,确保ngsw-worker.js
文件被正确地指定。ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
通过以上步骤,你的Angular PWA Service Worker应该能够在离线模式下调用本地服务器。如果问题仍然存在,你可以尝试清除浏览器缓存并重新启动应用程序。