Skip to content

Lab 3: Static Caching

Jump to bottom
Steffen Jahr edited this page Feb 1, 2018 · 3 revisions

In this lab, we’d like to examine the caching capabilities of Service Workers. First of all, we’ll have a look at static caching. This technique can be used to make the Application Shell available offline.

1. Switch Branch

Please run the following commands on your command line, e.g. in the root ngeurope-2018-pwa root folder:

$ git reset --hard
$ git clean -df
$ git checkout workshop/lab3

2. Revisiting ngsw-config.json

Caching is configured inngsw-config.json. Apart from the index property, the configuration file specifies assetGroups per default. You could also add dataGroups which can be used for dynamic caching or an arbitrary appData object which holds metadata for this Service Worker file version.

Currently, there are two asset groups: app and assets.

  • What’s the difference between both asset groups?
  • Add an urls property to the resources object of the asset group called assets. Assign an array to it. This array can hold additional URLs to be cached, such as web fonts.
  • Choose a web font from Google Fonts: Click the plus button on the font of your choice, open the “1 Family Selected” bar on the bottom and copy the code found in Embed Code (<link href="https://fonts.googleapis.com/css?family=…" rel="stylesheet">).
  • Paste this code into the head element of your index.html.
  • Copy the content of the href attribute (https://fonts.googleapis.com/css?family=…)
  • Paste it into the urls array.
  • Paste the URL into your address bar and press return. Copy all the font URLs found there (https://fonts.gstatic.com/…) and add them to the urls array as well.
  • Copy the font family name from the CSS file and modify client/src/styles/app/app.scss to use the selected web font throughout the application (body { font-family: '…' }).

3. Registering for Updates

After installing the Service Worker, cached versions will now be used. However, the files placed on the server could change. In this case, you would like to inform your users about updated application versions found on the server. Fortunately, the @angular/service-worker package provides an easy-to-use service for this scenario: SwUpdate.

This service offers an available observable which is triggered whenever there’s an update. Please adjust the register method of the UpdateService found in client/src/modules/app/services/update.service.ts to show a notification in case there’s updated content. You might use the NotificationService provided in the constructor.

Due to an Angular bug, the available observable might not be triggered in all cases. Hence, you might not see the update banner.

4. Test static caching

The Service Worker is only included in production builds. Please stop the previous test server running inside the client directory and run:

$ npm run start-prod

Next, perform the following steps.

  • Press Ctrl/⌘ and click here to open the demo application in a new tab.
  • Turn off any data connections in your browser/mobile device (see below).
  • Click/tap the Reload button in order to check if the application still comes up. (Note: Due to a bug this might currently not be working.)
  • Turn data connections back on.
  • Close Dev Tools if they are still open.
  • Change a source file and let the app rebuild. Check if the update notification comes up (Desktop only).

Developer Tools

  • Press F12 (Windows/Linux) or ⌥⌘I (macOS).
  • Click the Network tab
  • Tick the Offline check box

Device

On your device, enable Airplane Mode.

Clone this wiki locally