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 inngsw-config.json
- in a new shell run
yarn ngsw
. This will great a newngsw.json
file in thedist
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.