问题描述
我很难将 angulars Service Worker 集成到我的应用程序中.我遵循了指南,到目前为止它有效.我可以在我的主屏幕上创建一个快捷方式并启动我的应用程序.问题是我的应用程序以某种方式没有更新.如果我更改按钮的名称,构建应用程序并将其放到我的服务器上,应用程序仍会显示旧版本,直到我按 F5(重新启动应用程序也无济于事).
I'm having a hard time integrating angulars service worker into my application. I followed the guide and it works so far. I can create a shortcut on my homescreen and launch into my app. The problem is that my app somehow doesn't update. If I change the name of a button, build the app and put it onto my server the app still shows the old version until I hit F5 (restarting the app doesn't help either).
我尝试将以下代码放入我的应用程序的 ngOnInot 中,但没有帮助
I tried to put the following code into my ngOnInot of my app but it didn't help
ngOnInit() {
if (this._SwUpdate.isEnabled) {
setInterval( () => {
this._SwUpdate.checkForUpdate().then(() => console.log('checking for updates'));
}, this.updateInterval);
this._SwUpdate.available.subscribe(() => {
console.log('update found');
this._SwUpdate.activateUpdate().then(() => {
console.log('updated');
window.location.reload();
});
});
}
}
该应用程序正在我的 apache2 linux 机器上运行.我的 apache 是否缓存了某些东西,或者为什么我的应用没有意识到有新版本?
The app is running on my apache2 linux machine. Is my apache caching something or why doesn't my app realize that there is a new version?
预先感谢您的帮助:)
我的 ngsw-config.json
My ngsw-config.json
{
"index": "/index.html",
"assetGroups": [{
"name": "roomPlan",
"installMode": "prefetch",
"resources": {
"files": [
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
编辑 2:
如果我使用http-server"在本地运行应用程序,它会起作用,但是当我将文件复制到我的 apache 时,它不会检测到更新.在网络选项卡中,我可以看到间隔有效,应用程序每 3 秒从服务器获取一个新的ngsw.json".如果我更新我的应用程序,我可以看到ngsw.json"的响应中有新的哈希值.之后浏览器从我的服务器加载新的index.html"和main.***.js",但应用程序不应用新版本.根据我的代码,它应该说找到更新",但没有任何反应.
It works if I run the app local using "http-server" but when I copy the files over to my apache it doesn't detect the update. In the networking tab I can see that the interval works, the app gets a new "ngsw.json" from the server every 3 seconds. If I update my app I can see that there are new hash values inside of the response for "ngsw.json". After that the browser loads the new "index.html" and "main.***.js" from my server but the app doesn't apply the new version. According to my code it should say "update found" but nothing happens.
推荐答案
您可能需要告诉 Service Worker 检查服务器是否有更新,我通常为此使用服务:
You will probably need to tell the service worker to check the server for updates, I usually use a service for this:
export class UpdateService {
constructor(public updates: SwUpdate) {
if (updates.isEnabled) {
interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate()
.then(() => console.log('checking for updates')));
}
}
public checkForUpdates(): void {
this.updates.available.subscribe(event => this.promptUser());
}
private promptUser(): void {
console.log('updating to new version');
this.updates.activateUpdate().then(() => document.location.reload());
}
在你的 app-component.ts
中:
constructor(private sw: UpdateService) {
// check the service worker for updates
this.sw.checkForUpdates();
}
无论出于何种原因,Angular 有时无法正确注册 Service Worker.所以你可以修改`main.ts`:
替换:
For whatever reason, Angular sometimes does not register the service worker properly. So you can modify `main.ts` :
Replace:
platformBrowserDynamic().bootstrapModule(AppModule);
与:
platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
if ('serviceWorker' in navigator && environment.production) {
navigator.serviceWorker.register('ngsw-worker.js');
}
}).catch(err => console.log(err));
这篇关于Angular Service Worker SwUpdate.available 未触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!