So far you have created an Angular application, registered service workers, and cached application resources. This chapter details how to discover an update to the application, communicate with users, and handle events to gracefully upgrade to the next version.
The chapter extensively uses Angular’s SwUpdate service, which provides ready-made features to identify and upgrade the application. It begins with instructions to include (import and inject) the SwUpdate service . Next, it details how to identify an available upgrade and activate the upgrade. It also details how to check at regular intervals for an upgrade. Toward the end, the chapter details how to handle an edge case, namely, an error scenario when browsers clean up unused scripts.
Considering the Web Arcade application is installable, you need a mechanism to look for updates, notify the user about new versions of the application, and perform an upgrade. A service worker manages installing and caching the Angular application. This chapter details working with SwUpdate, an out-of-the-box service provided by Angular to ease service worker communication. It gives access to events when a new version of the application is available, downloaded, and activated. You may use the functions in this service to do periodic checks for updates.
Getting Started with SwUpdate
ServiceWorkerModule Imported in AppModule
In the snippet, g is short for “generate,” and s is for “service.”
You can rewrite the previous command as ng generate service common/sw-communication.
Scaffolded SwCommunicationService
Import and Inject SwCommunicationService in AppComponent
Identifying an Update to the Application
Next, update SwCommunicationService to identify if an updated version of the application is available. The SwUpdate service provides an observable named available. Subscribe to this observable. It is invoked when the service worker identifies an updated version of the application.
At this point, you have the information that an upgrade is available on the server. You have not downloaded and activated it yet.
Identify a New Version of the Application
See line 4 for how to use the object available on updateSvc (an object of SwUpdate). It is an observable, which sends values when a new version of the application is available.
Line 5 prints current and available objects. Consider the result in Figure 6-1. Notice the version number in the message.
Result on the available observable
Listing 6-4 does not initiate a check for a new version. The subscribe callback (line 5) runs when a new version is identified. See the section “Checking for a New Version” to initiate a check for a new version at regular intervals.
Also, the new version is not downloaded and activated yet.
Remember the appData field in ngsw-config.json for the application. (Refer to Chapter 4.) The objects current and available include data from appData. In the sample application, we added a single field name that describes changes to the application. The result in Figure 6-1 prints the current and available objects. They are the fields from ngsw-config.json in the current and new versions of the application. See Listing 6-5 for ngsw-config.json.
ngsw-config.json with appData
As mentioned earlier, the available observer verifies if a new version of the service worker is ready and available. It does not mean it is in use yet. You may prompt the user to update the application. This gives the user a chance to complete the current workflow. For example, in Web Arcade, you do not want to reload and upgrade to a new version while the user is playing a game.
Identifying When an Update Is Activated
So far, you have identified if an upgrade is available. This step allows you to identify an activated upgrade. The activated observable is triggered once a service worker starts serving content from the new version of the application.
Activated Observable on SwUpdate
Result on the activated observable
Similar to the available observable, the current and previous objects include appData from ngsw-config.json for the respective versions of the application.
Activating with the SwUpdate Service
When the user opens the application in a new window, service workers check if a new version is available. The service worker might still load the application from the cache. This is because the new version may not have been downloaded and activated yet. It triggers the available event. The subscribe callback on the available observable will be invoked (similar to Listing 6-4). Typically, the next time a user attempts to open the application in a new window, a newer version of the service worker and the application are served. The precise behavior depends on the configuration and a few other factors.
However, you may choose to activate the newer version as soon as you know a newer version is available. The SwUpdate service provides the activateUpdate() API to activate new versions of the application. The function returns a promise<void>. The success callback of the promise is invoked after activating the update. Consider Listing 6-7, which activates the update.
This section does not prompt the user to choose to update the new version yet. As you progress to the next section, you will add the code to alert the user about the availability of a new version of the application.
Activate Update with the SwUpdate Service
See lines 8 and 13. The activateUpdate() function is called in line 9. It returns a promise. The then() function is called on the returned promise. You provide a callback that is invoked after the promise is resolved. See line 11, which prints a message that the “activate update is successful.”
Notice that activateUpdate() is called when an update is available. The activateUpdate() method is called within the available observable subscription. See lines 6 and 14. This is a subscription callback for the available observable.
Line 12 reloads the application (the browser window) after the update has been activated. It is a good practice to reload the browser on a successful update. In a few instances, routing with lazy loading may break if the window does not reload after the service worker and the cache are refreshed.
Checking for a New Version
The SwUpdates service can check for a new version of the application (service worker configuration) on the server. As mentioned earlier, so far you have received events if a new version was available or activated. You activated the new version if it was available. However, we are dependent on the browser and service worker built-in mechanisms to look for updates.
The function checkForUpdates() can be called on the instance of SwUpdate to look for updates on the server. It will trigger the available observable if a new version is available. The function is especially useful if you anticipate users keeping the application open for a long duration, sometimes days. It is also possible that you anticipate frequent updates and deployments to the application. You may set an interval and regularly check for updates.
Invoking CheckForUpdates at Regular Intervals
You inject ApplicationRef to verify if the Angular app is stable. Lines 2 and 12 import and inject the class, respectively.
Line 13 verifies if the application is stable. The field isStable is of type Observable<boolean>. When subscribed, it returns true when the application is stable. Line 14 assigns the observable to the local variable isApplicationStable$.
In line 15, the interval() function returns an Observable<number>. The function accepts a time duration in milliseconds as a parameter. The subscribe callback is invoked after the specified time interval. Notice that the code snippet specifies 12 hours in milliseconds.
Line 15 concats isApplicationStable$ with the observable returned by interval(). The resultant observable is set to isReadyForVersionUpgrade$. Subscribe to this observable. The success callback is invoked when the application is stable and the specified interval (12 hours) has passed.
The concat function has now been deprecated. If you are on RxJS version 8, use the concatWith() function to concatenate observables.
In line 18, in the subscribe callback for the observable isReadyForVersionUpgrade$, you check for updates using the SwUpdate instance.
As a quick recap, you check for upgrades every 12 hours when the application is stable. The checkForUpdate() function may trigger the available subscriber, which calls activateUpdate() that triggers the activate subscriber after successfully activating the new version of the application.
Notifying the User About the New Version
Notice that the current code reloads the application when a new version of the service worker is identified. It does not yet alert the user and allow her to choose when to reload. To provide this option, integrate the application with a Snackbar component. This is a ready-made component available in the Angular Material library. Angular Material provides Material Design implementations for Angular applications.
Why did we choose the Snackbar component? A typical alert blocks the user workflow. Users cannot continue to use the application until an action is taken on the alert. Such a paradigm works well when a workflow cannot continue without the user’s decision. For example, it could be an error scenario, which is important for a user to acknowledge and then make a correction.
On the other hand, when a new version of the service worker (and the application) is available, you do not want to disrupt the current user session. Users may continue to use the current version until the task at hand is complete. For example, if the user is playing a game on Web Arcade, continue until the game is complete. When the user deems it appropriate to reload the window, she may choose to respond to the alert.
A Snackbar component alerting the user that a new version of the application is available
Selecting an Angular Material theme
- 1.
Prompts you to choose Angular Material typography. This is a decision about using Angular Material fonts, default font sizes, etc.
- 2.
Prompts you to include browser animations interacting with Angular Material components. Animations provide visual feedback for user actions such as animating the click a button, transitioning a tab of content, etc.
Result Installing Angular Material
Adding Angular Material to the Web Arcade allows you to use various Angular Material components. You will import and use only the required components. The entire component library does not add to the bundle size.
Add the Snackbar Module to the Web Arcade Application
See the first line, which imports MatSnackBarModule from the Angular Material module for the Snackbar component. Also see line 11 that imports the module to the AppModule on Web Arcade.
Alert with a Snackbar that a new version of the application is available
Line 3 imports the Snackbar component from Angular Material’s snackbar module. It is injected into the service on line 11.
Notice the success callback between lines 14 and 18. It is on the available observable. As mentioned earlier, when an update is ready, this observer function is triggered.
See line 16. The open() function shows a Snackbar component. You provide two parameters, the message to show on the alert (Snackbar component) and the title for the action (or the button) on the Snackbar component. Revisit Figure 6-3 to match the code to the result.
Notice the open function returns a Snackbar reference object as well. You are using this object to perform an action when the user clicks the button on the Snackbar component.
Notice message.name is interpolated on line 17. The message object is obtained on the prior line 14. Notice it is the appData object on ngsw-config.json. This is one way to provide a friendly message for each version upgrade of the application and show the information to the user while she chooses to reload and install the new version. See Figure 6-3. The message from appData says, “we added more games to the arcade.”
Add Snackbar Module to Web Arcade
Line 4 invokes the onAction() function on the snackRef object. You chain the subscribe() function on the returned object. As mentioned earlier, the onAction() function returns an observable.
The success callback provided as an observer invokes the activateUpdate() function on the SwUpdate object. The observer callback between lines 6 and 10 are called when the user performs an action on the Snackbar component.
Remember, the code between lines 6 and 10 is the same as Listing 6-6, which performed the install as soon as it identified a new version.
Managing Errors in Unrecoverable Scenarios
It is possible that users have not returned to the application for a while on a machine. Browsers will clear the cache and claim the disk space. When the user returns to the application (after the cache was cleaned), the service worker may not have all the scripts it needs. Imagine, meanwhile, that a new version of the application was deployed on the server. Now, the browser cannot obtain the deleted script (from the cache), not even from the server. This results in an unrecoverable state for the application. To the user, it leaves only one option: to upgrade to the latest version.
Handle the Unrecoverable State
See line 5. It subscribes to the unrecoverable observer on the instance of SwUpdate (namely, updateSvc). The success callback for the observable is between lines 6 and 17.
- You open a Snackbar component, which alerts the user about the error at the bottom center of the page. See Figure 6-5.
Figure 6-5A Snackbar component alerting the user of the unrecoverable error
Notice the reason field on line 6. It has additional information about the unrecoverable state. You may print and use this information in the browser console or log it to a central location to investigate further.
Summary
Installable and cached web applications are powerful. They enable users to access the application in low-bandwidth and offline scenarios. However, you also need to build features to seamlessly upgrade the applications. As you know, for Web Arcade, service workers manage caching and offline access features.
This chapter detailed how to seamlessly upgrade an Angular application and communicate with service workers. It extensively uses Angular’s SwUpdate service, which provides many out-of-the-box features for identifying and activating a new version of the application. It uses observables; you subscribe when new versions of the applications are available or activated.
The chapter uses a Snackbar component to alert when a new version of the application is available. Show an alert after the upgrade is activated. Include information from appData in ngsw-config.json.
Extend ngsw-config.json to show additional information about the release. Include details of enhancements and bug fixes. Take it close to the real-world use case. Users expect to see a summary of details about an upgrade.
Explore positioning the Snackbar component at a different location on the page (as opposed to the default center bottom).
Explore alerting users with more components other than a Snackbar component. Build an experience that suits a different use case better. Remember, we used the Snackbar component as it does not interrupt and block an active user’s workflow. However, a Snackbar component has been used for alerting the unrecoverable error scenario as well. Hence, choose an appropriate alert component and mechanism for such error conditions.