Angular 6 PWA Service Worker完全失效，请求排查指导

Hey Vik, let's go through some practical steps to diagnose why your service worker isn't registering after creating the app with ng g myapp --service-worker:

• Verify your Angular CLI and project versions
  Run ng version in your terminal to check that you're using a compatible version of Angular CLI (v6+ should support the --service-worker flag out of the box). Mismatched versions between CLI and Angular core can cause unexpected behavior.

• Check angular.json build configuration
  Open your project's angular.json file, locate the build options under your project's architect section. Ensure these two lines are present:

  "serviceWorker": true,
  "ngswConfigPath": "ngsw-config.json"
  

  If they're missing, add them and re-run a production build.

• Always use a production build
  Service workers are not enabled by default in development mode. You need to build your app for production first with:

  ng build --prod
  

  Then serve the generated dist/ folder using a static server like http-server (install it via npm install -g http-server, then run http-server dist/myapp). Avoid using ng serve for testing service workers—it doesn't support them in dev mode.

• Validate AppModule setup
  Open src/app/app.module.ts and confirm the ServiceWorkerModule is imported and configured correctly:

  import { ServiceWorkerModule } from '@angular/service-worker';
  import { environment } from '../environments/environment';
  
  @NgModule({
    imports: [
      // ... other modules
      ServiceWorkerModule.register('ngsw-worker.js', {
        enabled: environment.production, // Ensures it only runs in prod
      }),
    ],
    // ...
  })
  export class AppModule {}
  

  Also double-check that environment.production is set to true in src/environments/environment.prod.ts.

• Ensure ngsw-config.json exists
  This configuration file is required for the Angular service worker to function. If it's missing from your project root, create it with the basic template:

  {
    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": [
            "/favicon.ico",
            "/index.html",
            "/manifest.webmanifest",
            "/*.css",
            "/*.js"
          ]
        }
      },
      {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
          "files": [
            "/assets/**",
            "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
          ]
        }
      }
    ]
  }
  

• Check browser DevTools for errors
  Open Chrome DevTools → Application tab → Service Workers panel. Look for any error messages here (like "Failed to register service worker" or missing ngsw-worker.js). This can point to issues like missing files or security context problems.

• Confirm your server uses a secure context
  Service workers require HTTPS to run (localhost is an exception for development). If you're using a custom local domain instead of localhost, make sure your server is set up with HTTPS.

After going through these steps, re-run your Lighthouse audit on the production-built app served via a static server—it should detect the service worker if everything is configured correctly.

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