skip to content

In an Angular ngsw-config.json assetGroup, what do installMode and updateMode set to prefetch or lazy change, and which suits app bundles versus images?

level: middleimportance: should knowfreq 32%

answer

  1. when a file enters the cache
  2. everything up front versus on request
  3. changed files on a new version
  4. lazy update needs lazy install
  5. the generated app and assets groups

basics

~10 s

installMode decides whether a group's files are cached up front (prefetch) or only when requested (lazy); updateMode decides whether changed cached files are re-downloaded immediately on a new version or when next requested.

solid answer

~40 s

An `assetGroup` covers versioned files from the build. `installMode: 'prefetch'` (the default) downloads every listed file while caching a version, so they work offline even if never requested; `'lazy'` caches a file only after the app requests it. `updateMode` applies to files already cached when a new version arrives: `'prefetch'` re-downloads changed ones immediately, `'lazy'` waits until they are requested again, and `lazy` is only valid when `installMode` is also `lazy`; it defaults to the `installMode` value. The generated config reflects the trade-off: an `app` group prefetches `index.html`, `*.js` and `*.css` so the app, including lazy chunks, runs offline; an `assets` group installs images and fonts lazily but updates the cached ones by prefetch.

code

json · 16 lines
json
{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": { "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"] }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": { "files": ["/**/*.(svg|png|webp|woff2)"] }
    }
  ]
}

go deeper

for a junior

Recall that prefetch caches all listed files up front and lazy caches them only when requested.

for a middle

Explain installMode versus updateMode, their defaults, the lazy-update rule, and what the generated app and assets groups do.

for a senior

Choose modes per group from offline requirements and bandwidth, and spot configs that leave routes or icons unavailable offline.

for a principal

Weigh first-install download size against offline completeness for the product's users and connection types.

## Asset groups in context `ngsw-config.json` is the configuration file for `@angular/service-worker`. Its **`assetGroups`** describe **assets**: files that are part of an application version and change with each build, such as `index.html`, JavaScript bundles, CSS, icons and fonts. Each group has a `name`, a `resources` list of file globs or URLs, and two modes that decide when files enter the cache. ## installMode: when files are first cached | Value | Behaviour | Cost and benefit | |---|---|---| | `prefetch` (default) | Fetches every listed file while caching the version | Bandwidth up front; everything is available offline, even files never requested yet | | `lazy` | Caches a file only after the app requests it | No wasted downloads; a file never requested is not available offline | ## updateMode: what happens to cached files on a new version When the worker installs a new version, some files in the group have changed hashes. `updateMode` decides what happens to those **already cached** files: - `prefetch`: download and cache the changed files immediately; - `lazy`: treat them as unrequested and fetch them only when requested again. Two rules from the configuration reference: 1. `updateMode` **defaults to the value of `installMode`**. 2. `updateMode: 'lazy'` is **only valid when `installMode` is also `lazy`**; a prefetched group cannot lazily update. ## The generated configuration Adding service worker support with the CLI writes an `ngsw-config.json` with two groups: - **`app`** (`installMode: prefetch`): `/index.html`, `/index.csr.html`, `/favicon.ico`, `/manifest.webmanifest`, `/*.css`, `/*.js`. Because `/*.js` matches every emitted JavaScript file, lazy route chunks are prefetched too, so the whole app shell can start offline. - **`assets`** (`installMode: lazy`, `updateMode: prefetch`): images and fonts by extension. They are cached as the user encounters them, and once cached they are kept current when a new version ships. There are **no `dataGroups`** in the generated file, so API responses are not cached until you add some. ## Choosing modes - **Code and the shell**: `prefetch`. A lazy chunk that is missing offline breaks navigation, and the version-integrity rules assume the shell and its chunks travel together. - **Large optional media** (high-resolution images, per-locale images, video posters): `lazy` install, so each device caches only what it shows. - **Media that must work offline once seen** (icons used in forms): `lazy` install with `prefetch` update, like the generated `assets` group. - **Huge rarely-used files**: `lazy`/`lazy`, accepting that they are fetched again after each new version. ## How the modes behave when a version changes Suppose version 2 of the app changes `logo.svg` and `report.png` but not `map.png`, and the user had previously viewed all three. | Group modes | What happens to the changed files | What happens to never-requested files | |---|---|---| | `prefetch` / `prefetch` | Downloaded as part of installing version 2 | Downloaded as part of installing version 2 | | `lazy` / `prefetch` | Re-downloaded immediately because they were already cached | Still not cached until requested | | `lazy` / `lazy` | Dropped and fetched again only when next requested | Still not cached until requested | In every case `map.png`, whose hash did not change, does not need a new download. The practical difference is what an offline user sees right after an update: with `lazy` / `lazy`, a changed image that was viewed before the update may be unavailable offline until it is viewed again online. ## Pitfalls - **Prefetching everything** makes the first install download the whole `dist` output, which hurts on metered connections and delays the point at which the worker has a complete version. - **Lazy-installing JavaScript** means a route never visited online is unavailable offline. - **Globs that miss files**: the generated `assets` glob lists specific extensions; a new image or font format outside the list is not cached until you add it. - **Moving output paths** after generating the config requires updating the globs by hand. ## Interview summary `installMode` is about the first time a file enters the cache; `updateMode` is about files already cached when a new version arrives. Prefetch the code, lazy-install the media, and remember that a lazy update requires a lazy install.

  • Why is updateMode 'lazy' invalid when installMode is 'prefetch'?
    A prefetch group promises that every listed file is cached for the version. Lazily updating would leave changed files uncached in the new version, breaking that promise, so the configuration only allows a lazy update for groups that were lazy to begin with.
  • Are lazy-loaded route chunks available offline with the generated configuration?
    Yes. The generated `app` group prefetches `/*.js`, which matches every emitted JavaScript file, including lazy chunks. A custom config that lazy-installs JavaScript would lose that: routes never visited online would fail offline.

saying these in an interview costs you the question

  • installMode lazy still downloads every file, just later in the background
  • updateMode lazy works with any installMode
  • The generated ngsw-config.json caches API responses by default
  • Lazy route chunks are never cached by the Angular service worker
  • prefetch means files are fetched on each request