-
-
Save JustDoItSascha/c5e05e7a03bfff896646a37015292a5b to your computer and use it in GitHub Desktop.
| @Injectable({ | |
| providedIn: 'root' | |
| }) | |
| export class PwaService { | |
| constructor( | |
| private appRef: ApplicationRef, | |
| private swUpdate: SwUpdate, | |
| ) { | |
| if (this.swUpdate.isEnabled) { | |
| this.appRef.isStable.pipe( | |
| first(isStable => isStable === true), | |
| switchMap(() => this.swUpdate.available), | |
| ).subscribe(() => { | |
| this.swUpdate.activateUpdate().then(() => document.location.reload()); | |
| }); | |
| } | |
| } | |
| checkForUpdate(): Observable<boolean> { | |
| const waitFor = 1000; | |
| if (this.swUpdate.isEnabled) { | |
| const available$ = this.swUpdate.available.pipe( | |
| mapTo(true), | |
| timeout(waitFor), | |
| catchError(() => of(false)), | |
| ); | |
| return fromPromise(this.swUpdate.checkForUpdate()).pipe( | |
| switchMap(() => available$), | |
| ); | |
| } | |
| return timer(waitFor).pipe(mapTo(false)); | |
| } | |
| } |
| @Component({ | |
| selector: 'app-splash-screen', | |
| template: ` | |
| <div class="splash-screen" *ngIf="show" @fadeOut> | |
| // Your custom splash screen design | |
| </div> | |
| `, | |
| animations: [ | |
| // the fade-in/fade-out animation. | |
| trigger('fadeOut', [ | |
| transition(':leave', [ | |
| query(':leave', animateChild(), {optional: true}), | |
| animate(300, style({opacity: 0})) | |
| ]), | |
| ]), | |
| ], | |
| styles: [` | |
| .splash-screen { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 9999; | |
| } | |
| `], | |
| changeDetection: ChangeDetectionStrategy.OnPush | |
| }) | |
| export class SplashScreenComponent implements OnInit { | |
| show = true; | |
| constructor( | |
| private pwaService: PwaService, | |
| private cdr: ChangeDetectorRef, | |
| private appRef: ApplicationRef, | |
| ) { | |
| } | |
| ngOnInit() { | |
| this.pwaService.checkForUpdate() | |
| .subscribe(result => { | |
| this.show = result; | |
| this.cdr.detectChanges(); | |
| }); | |
| } | |
| } |
Hey Albin, thanks for visiting my Gist :) Actually I did not include the imports. Just import the fromPromise function from the rxjs package and it will work. If you have any other questions, let me know. I'm glad when I can help you :)
Hey, yes it was an interesting topic. Is there a working demo available?
I noticed, but 'fromPromise' doesn't seem to be a part of RxJS so I tried 'from' instead.
Also... Should I place the component between the router-outlet tags in my app component?
Doesn't work currently (with above approach).
I agree with @albinlang, a working demo would be nice.
I agree with @albinlang, a working demo would be nice.
I have tried to get this to work for me the last couple of hours but without any luck. Let me know if you get it to work @jneuhaus
I do not get any error at all – the splash screen doesn't show.
I also wonder why "private appRef: ApplicationRef" is in the constructor? I can't see it being used in splash-screen.component.ts (only ion the service where it's also in the constructor).
@JustDoItSascha I'm not that familiar with how gist works so I invited you to my repo.
I have no idea what was going wrong in the first place but I created a new project and managed to get it to work.
Public repo here.
"Cannot find name 'fromPromise'"