Angular service worker demo
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
e2e
src
.editorconfig
.gitignore
README.md
angular.json
ngsw-config.json
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

NgServiceWorker

Demo: briebug-service-worker.netlify.com

Getting Started

yarn vs npm

yarn === npm install
yarn CMD === npm run CMD

Install dependencies

yarn

Commands

Run the service worker app locally

This does a prod build and serves the static files from ./dist

yarn start

Start only the server

note: -c-1 option will disable server caching

yarn start:server

Register a new service worker configuration

This will update the service worker config file, ngsw.json, in the dist folder.

After making a change to ngsw-config.json and with yarn start running you can run this command, reload the page, and the client will register the new service worker changes.

yarn ngsw

Demo steps

The following steps assume you've setup a service worker with ng add @angular/pwa

1. Prefetch assets

With goal of making this app work offline, we're going to pre-fetch all the assets so they're available regardless of connectivity. We will cache the Google fonts & icons as well as a fallback image we'll use later in the app. In the ngsw-config.json file make the following changes to the assets assetGroups:

"assetGroups": [
  ...,
  {
    "name": "assets",
    "installMode": "lazy", // 1. change this to "prefetch"
    "updateMode": "prefetch",
    "resources": {
      "files": ["/assets/**"],
      // 2. add the following "urls"
      "urls": ["https://fonts.googleapis.com/**", "https://fonts.gstatic.com/**"]
    }
  }
]

2. Cache api response

We have a view that displays a list of SpaceX launches. After a successful request we'll want to cache the response for 1 week. In the ngsw-config.json add a dataGroups prop with the following configuration.

"dataGroups": [
  {
    "name": "spacex-api", // unique name
    "urls": ["**//api.spacexdata.com/**"], // path to match
    "cacheConfig": {
      "strategy": "performance", // load from the cache if available, otherwise network request
      "maxSize": "1", // cache 1 entry
      "maxAge": "7d" // cache for 7 days
    }
  }
]

3. Service worker status

Review the src/app/core/services/app-status.service.ts. It contains some basic helpers for dealing with update notifications, programmatically check for updates, and reloading the application if desired.

Review the src/app/sw-nav/sw-nav.component.html. It contains service worker state logic for notifying the user that a new update is available.

Review the src/app/launch component, it contains fallback image functionality when the app is offline to manage the only non-cached assets (each individual launch patch image).

4. Load the app

  • run yarn start
  • Open a new chrome tab and the network inspector, then load the app at localhost:4200
  • access the Launches tab
  • notice normal network requests for all assets
  • reload the app at localhost:4200

Notice that the following requests are being served (from serviceWorker) under the Size column.

  • all hashed files from the dist folder (html, css, js)
  • api.spacexdata.com/v2/launches api request for launch data
  • assets - assets/images/rocket-default.png

From the Launches tab, toggle the offline button in the Network tab and observe that a fallback image is used in place of the launch patches from the api.

  • temporarily modify the appData value in ngsw-config.json
  • in a new shell run yarn ngsw. This will great a new ngsw.json file in the dist folder
  • reload the app
  • the app will request this file on every load with a cache busting param and register that a new "version" of the app is available. This will trigger a "autorenew" icon to appear in the nav bar allowing you to refresh the app to the latest version.

This project was generated with Angular CLI version 6.0.7.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.