多虚拟目录站点中Angular PWA的Service Worker缓存配置咨询

Got it, let's break down how to configure your Angular Service Worker for this multi-tenant PWA setup. I’ve worked on similar structures before, so here’s a practical, step-by-step approach that should fit your needs perfectly:

First, make sure you’ve already added the Angular Service Worker package to your project (if you haven’t, run ng add @angular/pwa in your terminal—this sets up the core SW infrastructure and generates the ngsw-config.json file we’ll modify).

This is the heart of your SW configuration. We’ll split your resources into two logical groups: core root-level assets (shared across all clients) and client-specific subdirectory assets.

Here’s the modified config you can use:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "core-app-resources",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.js", // Cache all root-level JS files
          "/*.css"
        ]
      }
    },
    {
      "name": "client-specific-assets",
      "installMode": "lazy",
      "updateMode": "lazy",
      "resources": {
        "files": [
          "/**/index.html", // Match index.html in any subdirectory
          "/**/manifest.json", // Match client-specific manifest files
          "/**/*.png", "/**/*.jpg", "/**/*.jpeg" // Cache client-specific images
        ]
      }
    }
  ]
}

Let’s break down what each part does: #

• Core-app-resources group:

  • Uses installMode: 'prefetch' to download and cache all root-level JS/CSS as soon as the Service Worker is installed. These are shared across every client, so preloading them ensures fast, offline access for all users.
  • The /*.js pattern specifically targets all JavaScript files in your root directory—exactly what you need.

• Client-specific-assets group:

  • Uses installMode: 'lazy' because you likely have many client subdirectories, and preloading all their assets upfront would bloat the initial cache. Instead, these assets are only cached when a user first visits that client’s subdirectory.
  • The /**/ wildcard matches any depth of subdirectories, so it works for both /client1/index.html and nested paths like /client2/subfolder/index.html if you ever need that.
  • updateMode: 'lazy' ensures that when a client’s assets (like their index.html or images) are updated, the SW will fetch the new version the next time a user visits that subdirectory.

• Verify path references: Make sure each client’s index.html references root-level JS files with absolute paths (e.g., <script src="/main.js"></script>) instead of relative paths. This ensures the SW recognizes and serves the cached root JS files correctly.
• Manifest uniqueness: Since each client has its own manifest.json in their subdirectory, the SW will cache each one under its unique path—no conflicts here. When users visit a client’s subdirectory, the browser will load the correct manifest from the SW cache.

After configuring, build your app for production with ng build --prod (this generates the Service Worker and hashes all assets for cache validation). Deploy it, then:

1. Visit a client’s subdirectory (e.g., /client1/index.html).
2. Open Chrome DevTools → Application → Service Workers to confirm the SW is active.
3. Check the Cache Storage tab to see that root JS files and the client’s index.html/manifest/images are cached.
4. Test offline mode: Disable your network connection and refresh the page—everything should load from the SW cache.

内容的提问来源于stack exchange，提问作者Peekyou