SwUpdate Inconsistent (checkForUpdate does nothing)
- 主要语言
- TypeScript
- 星标
- 101k
- 派生
- 27.5k
- 平均合并
- 1 天 19 小时
- 30 天内合并 PR
- 288
描述
### Which @angular/* package(s) are the source of the bug?
service-worker
### Is this a regression?
No
### Description
I was trying to use a service worker to deliver prompt updates to users actively using the site. Followed the simple steps laid out in: https://angular.io/guide/service-worker-getting-started but I'm having issues with the initial load of the site.
My app.config looks like:
```
export const appConfig: ApplicationConfig = {
providers: [
...
provideServiceWorker('ngsw-worker.js', {
enabled: !isDevMode(),
registrationStrategy: 'registerWhenStable:30000',
}),
NewAppVersionTrackerService,
],
};
```
The service watching for updates:
```
@Injectable({ providedIn: 'root' })
export class NewAppVersionTrackerService {
private versionCheckIntervalSeconds = 60;
constructor(
private dialogService: DialogService,
private swUpdate: SwUpdate,
private zone: NgZone,
) {}
public init() {
this.watchForUpdates();
}
private watchForUpdates(): void {
if (!this.swUpdate.isEnabled) return;
console.info(`Version Tracker Initializing`);
this.zone.runOutsideAngular(() => {
interval(this.versionCheckIntervalSeconds * 1000).subscribe(() => {
console.log('Checking for SW Update');
this.swUpdate
.checkForUpdate()
.then((versionFound) => {
console.log('CHECK RESULT:', versionFound);
})
.catch(() => console.log('SW Update check failed?'));
});
});
this.swUpdate.versionUpdates.subscribe((versionEvent) => {
switch (versionEvent.type) {
case 'VERSION_DETECTED':
console.info(`New application version found, beginning download: ${versionEvent.version.hash}`);
break;
case 'VERSION_READY':
console.info(`New app version ready: ${versionEvent.latestVersion.hash}`);
this.dialogService.open(DynamicNewApplicationVersionReadyDialogComponent);
break;
}
});
}
}
```
And my app.component is:
```
export class AppComponent {
constructor(
appRef: ApplicationRef,
private newAppVersionTrackerService: NewAppVersionTrackerService,
) {
this.newAppVersionTrackerService.init();
appRef.isStable.pipe(filter((stable) => stable)).subscribe(() => console.log('App is stable now'));
}
}
```
Those are the only changes I made to the application. But it seems a total crapshoot if the service worked is actually linked to the SwUpdate service the first time you navigate to the page.
Sometimes it looks like:

Which is great, the `checkForUpdate` is returning a value and when I deploy a new version I see the dialog and can refresh.
**But** sometimes on initial load instead I get this:

The app is apparently still stable, and I can see the SW is registered in the Application tab of the chrome dev tools. But the `checkForUpdate` promise doesn't actually do anything, it doesn't resolve _or_ reject. And new deployments are never detected.
All of the first load testing is done through new instances of the chrome incognito windows.
Refreshing the page does return this to working correctly, but it would be great if the `checkForUpdate()` promise would work consistently for first time users as well.
### Please provide a link to a minimal reproduction of the bug
_No response_
### Please provide the exception or error you saw
_No response_
### Please provide the environment you discovered this bug in (run `ng version`)
```true
Angular CLI: 17.3.7
Node: 18.18.0
Package Manager: pnpm 9.0.6
OS: win32 x64
Angular: 17.3.8
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.7 (cli-only)
@angular-devkit/build-angular 17.3.7
@angular-devkit/core 17.3.7
@angular-devkit/schematics 17.3.7
@angular/cli 17.3.7
@angular/pwa 17.3.7
@schematics/angular 17.3.7
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.5
```
### Anything else?
_No response_
贡献指南
调研方向
从报告中显示的通过 provideServiceWorker、SwUpdate.checkForUpdate() 和 AppComponent 初始化的初始加载路径开始。 在新的无痕窗口中重现首次访问,并检查 service worker 注册何时变得可用。 当 checkForUpdate() 能够稳定地 resolve 或 reject,并且能够检测到新部署的版本而无需刷新时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend, web-dev
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 28/100