Photo by NeONBRAND on Unsplash

How to Develop a PWA Splash Screen with Angular 8+

Sascha Wolff
Nov 21, 2019 · 4 min read

When you’ve already created an (Angular) PWA, you probably have noticed, that the service worker will perform a self-update, but in the background. That means when you deploy a new version of your app on your server, the next time the user opens the app it will update itself automatically in the background. But in the current session, the user sees the old version of the app.

This happens because the new service worker is indeed downloaded, but not activated yet. It will activate only on the next visit. But this can be tricky because oftentimes you not only have a front-end app but also a back-end server and maybe you have major breaks in your API. So the old version of the front-end is not compatible with the new API. If this is the case, your users must be always using the newest version of the app.

And I will show you, how to do that 😎.


🤔 What is our goal?

It’s very easy to convert a normal Angular App to a PWA. You just run a few CLI commands, create an icon and configure theme colors. But there is no such thing as a splash screen out of the box.

Our goal is to show a splash screen to the user whenever he opens the app. While the splash screen is open, we want to check for updates and if an update is found we reload the app. If no update is found we remove the splash screen.

This is one cool example of a splash screen on dribbble.com we could realize with the following tutorial:

❓How to check for updates

Angular provides a service called SWUpdate which holds all the information around your app and possible updates.

class SwUpdate {
available: Observable<UpdateAvailableEvent>
activated: Observable<UpdateActivatedEvent>
isEnabled: boolean
checkForUpdate(): Promise<void>
activateUpdate(): Promise<void>
}

source: https://angular.io/api/service-worker/SwUpdate

What are these properties and methods are for?

available
This observable emits whenever a new version is found. It searches for new version on startup or whenever you use checkForUpdate() .

activated
This observable emits whenever a new version has been activated. This is normally the case when a new version is available and the user reloads the application. You could use that for showing a tutorial of the new version whenever a user sees it for the first time.

isEnabled
This function is needed to be sure that the current browser supports service workers and the service worker is enabled.

checkForUpdate()
This method triggers an update check. Unfortunately, it doesn’t return a value. So you have to use it in combination with SwUpdate.available .

activateUpdate()
This method forces the service worker to activate a new version, but it’s still only used on the next loading.

🤖 So, how can we use this in combination with a splash screen?

First of all, we need a splash screen, which is visible by default.

https://gist.github.com/JustDoItSascha/c5e05e7a03bfff896646a37015292a5b#file-splash-screen-component-ts

This splash screen is a simple Angular component that has position: absolute and lays above everything else. When we are sure that there is no update available, we fade the splash screen out. This component should be added to your root AppComponent .

Now we need the PwaService :

https://gist.github.com/JustDoItSascha/c5e05e7a03bfff896646a37015292a5b#file-pwa-service-ts

Important notice: The ServiceWorkerModule waits for the application to stabilize before registering any service worker. Every use of observables prevents the application from becoming stable, therefore we need to use ApplicationRef.isStable and wait with every update check we want to do.

In the PwaService constructor we subscribe to the available stream and every time we find a new version, we activate it and perform a document.location.reload() after activation.

Then we implement a method checkForUpdate() which does multiple things:

  1. It checks if service workers are enabled. If not, it returns an observable that directly maps to false (I just implemented a short waiting time, because a splash screen which hides immediately could cause a flickering effect).
  2. When service workers are enabled it performs the SwUpdate.checkForUpdate() method and maps to the available stream, which should emit immediately after the SwUpdate.checkForUpdate() promise resolves when an update is found. Because we don’t get any information when no update is found, the available stream gets a timeout, which maps to false when no update is found.

After that, we just need to set show to the result of the checkForUpdate() method, which is either true or false . This lasts 1 second in minimum so the splash screen doesn’t flicker.


💎 Conclusion

With just a few tricks it’s easy to implement a “splash screen like” feature into your Angular app. Also, check out this article:

You could combine this technique to preload images into the cache with a splash screen to create a good and fluent user experience.

Happy Coding 🤤!

The Startup

Medium's largest active publication, followed by +587K people. Follow to join our community.

Sascha Wolff

Written by

I’m a Front-End Enthusiast and specialist for Angular, JavaScript, NodeJS, Docker and more.

The Startup

Medium's largest active publication, followed by +587K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade