Angular PWA 在 android 主屏幕应用程序和浏览器上强制重新加载
Angular PWA force realod on android home screen app and browser
我有一个 angular pwa 检查新版本并重新加载新的应用程序代码。
它在任何桌面浏览器上都能完美运行,但是当我在 android 设备或移动浏览器上使用 chrome 创建主屏幕快捷方式时,它不会在有新版本时更新其代码。
我在 android 设备
中有 Chrome 73.0.3683.9
我用 rxjs 添加了一个计时器,每 3 分钟检查一次更新(仅用于调试)并在有更新时重新加载。
我在这里添加代码,希望有人能帮助我理解为什么它不能在移动设备上运行。
ngsw-config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
]
}
updates.service.ts
@Injectable()
export class UpdatesService implements OnDestroy {
private _unsb$ = new Subject();
constructor(private _swUpdate: SwUpdate) {
if (this._swUpdate.isEnabled) {
// every 3 minutes
timer(0, 1000 * 60 * 3)
.pipe(takeUntil(this._unsb$))
.subscribe(() => {
this._swUpdate.checkForUpdate()
.then(() => console.log('Finish checking for updates...'))
})
} else console.log('No service worker allowed');
}
CheckForUpdates() {
this._swUpdate.available
.pipe(takeUntil(this._unsb$))
.subscribe(event => {
this._swUpdate.activateUpdate()
.then(() => window.location.reload())
});
}
ngOnDestroy() {
this._unsb$.next();
this._unsb$.complete();
}
}
app.components.ts
export class AppComponent implements OnInit {
constructor(private _updates: UpdatesService) { }
ngOnInit(): void {
this._updates.CheckForUpdates();
}
}
好的,所以我设法理解了问题所在,在移动设备中 phone 服务在应用程序稳定之前通过计时器开始轮询,因此由于某种原因它没有正确检查更新
this._swUpdate.checkForUpdate()
.then(() => console.log('Finish checking for updates...'))
所以我添加了检查应用程序是否稳定,然后开始轮询更改。
updates.service.ts
@Injectable()
export class UpdatesService implements OnDestroy {
private _unsb$ = new Subject();
constructor(private _swUpdate: SwUpdate, appRef: ApplicationRef) {
console.log('%c Update service is running...', 'color: green; font-weight: bold;');
if (this._swUpdate.isEnabled) {
console.log('%c Service worker enabled', 'color: orange; font-weight: bold;');
// Allow the app to stabilize first, before starting polling for updates.
const appIsStable$ = appRef.isStable.pipe(first(isStable => isStable === true));
const everySixHours$ = interval(1000 * 60 * 60 * 6).pipe(startWith(0))
const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
everySixHoursOnceAppIsStable$
.pipe(takeUntil(this._unsb$))
.subscribe(() => {
console.log('%c Checks for updates...', 'color: blue; font-weight: bold;')
this._swUpdate.checkForUpdate()
.then(() => console.log('%c Finish checking for updates...', 'color: blue; font-weight: bold;'));
});
} else console.log('%c No service worker allow', 'color: red; font-weight: bold;');
}
SubscribeForUpdates(): void {
this._swUpdate.available
.pipe(takeUntil(this._unsb$))
.subscribe(event => {
console.log('current version is', event.current.hash);
console.log('available version is', event.available.hash);
this._swUpdate.activateUpdate()
.then(() => window.location.reload(true))
});
}
ngOnDestroy(): void {
this._unsb$.next();
this._unsb$.complete();
}
}
ngsw-config.json 和 app.component.ts 保持不变。
希望对大家有帮助
我有一个 angular pwa 检查新版本并重新加载新的应用程序代码。 它在任何桌面浏览器上都能完美运行,但是当我在 android 设备或移动浏览器上使用 chrome 创建主屏幕快捷方式时,它不会在有新版本时更新其代码。 我在 android 设备
中有 Chrome 73.0.3683.9我用 rxjs 添加了一个计时器,每 3 分钟检查一次更新(仅用于调试)并在有更新时重新加载。
我在这里添加代码,希望有人能帮助我理解为什么它不能在移动设备上运行。
ngsw-config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
]
}
updates.service.ts
@Injectable()
export class UpdatesService implements OnDestroy {
private _unsb$ = new Subject();
constructor(private _swUpdate: SwUpdate) {
if (this._swUpdate.isEnabled) {
// every 3 minutes
timer(0, 1000 * 60 * 3)
.pipe(takeUntil(this._unsb$))
.subscribe(() => {
this._swUpdate.checkForUpdate()
.then(() => console.log('Finish checking for updates...'))
})
} else console.log('No service worker allowed');
}
CheckForUpdates() {
this._swUpdate.available
.pipe(takeUntil(this._unsb$))
.subscribe(event => {
this._swUpdate.activateUpdate()
.then(() => window.location.reload())
});
}
ngOnDestroy() {
this._unsb$.next();
this._unsb$.complete();
}
}
app.components.ts
export class AppComponent implements OnInit {
constructor(private _updates: UpdatesService) { }
ngOnInit(): void {
this._updates.CheckForUpdates();
}
}
好的,所以我设法理解了问题所在,在移动设备中 phone 服务在应用程序稳定之前通过计时器开始轮询,因此由于某种原因它没有正确检查更新
this._swUpdate.checkForUpdate()
.then(() => console.log('Finish checking for updates...'))
所以我添加了检查应用程序是否稳定,然后开始轮询更改。
updates.service.ts
@Injectable()
export class UpdatesService implements OnDestroy {
private _unsb$ = new Subject();
constructor(private _swUpdate: SwUpdate, appRef: ApplicationRef) {
console.log('%c Update service is running...', 'color: green; font-weight: bold;');
if (this._swUpdate.isEnabled) {
console.log('%c Service worker enabled', 'color: orange; font-weight: bold;');
// Allow the app to stabilize first, before starting polling for updates.
const appIsStable$ = appRef.isStable.pipe(first(isStable => isStable === true));
const everySixHours$ = interval(1000 * 60 * 60 * 6).pipe(startWith(0))
const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
everySixHoursOnceAppIsStable$
.pipe(takeUntil(this._unsb$))
.subscribe(() => {
console.log('%c Checks for updates...', 'color: blue; font-weight: bold;')
this._swUpdate.checkForUpdate()
.then(() => console.log('%c Finish checking for updates...', 'color: blue; font-weight: bold;'));
});
} else console.log('%c No service worker allow', 'color: red; font-weight: bold;');
}
SubscribeForUpdates(): void {
this._swUpdate.available
.pipe(takeUntil(this._unsb$))
.subscribe(event => {
console.log('current version is', event.current.hash);
console.log('available version is', event.available.hash);
this._swUpdate.activateUpdate()
.then(() => window.location.reload(true))
});
}
ngOnDestroy(): void {
this._unsb$.next();
this._unsb$.complete();
}
}
ngsw-config.json 和 app.component.ts 保持不变。 希望对大家有帮助