Splash Screen for Angular 8+ PWA

pwa.service.ts

@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));
    }
}

splash-screen.component.ts

@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, sorry, I was busy the whole week. Can you send me a new invitation for the repo and I will have a look today. Albin Lang <notifications@github.com> schrieb am Sa., 23. Mai 2020, 00:02:

…

***@***.**** commented on this gist. ------------------------------ @JustDoItSascha <https://github.com/JustDoItSascha> I'm not that familiar with how gist works so I invited you to my repo. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/c5e05e7a03bfff896646a37015292a5b#gistcomment-3314917>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACAADHX5OXWCR25Z5LOPLV3RS3Y6FANCNFSM4NGYVKMA> .

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.