非CLI方式Webpack构建的Angular项目如何集成@angular/service-worker？

Absolutely you can integrate @angular/service-worker into your ASP.NET Core + Webpack Angular project—this is totally doable, even if the CLI's out-of-the-box setup hides some of the manual steps you need to take here. Let's break down why your service worker isn't generating and how to fix it:

1. Fix Your Webpack Configuration (The Big Missing Piece) #

The Angular CLI handles service worker generation automatically via its internal build tools, but when using a custom Webpack setup, you need to explicitly add the service worker plugin to your config. Here's how:

• First, make sure you have @angular-devkit/build-angular installed (it includes the Webpack plugin for service workers):

  npm install @angular-devkit/build-angular --save-dev
  

• Add the ServiceWorkerPlugin to your Webpack config file:

  const { ServiceWorkerPlugin } = require('@angular-devkit/build-angular/webpack');
  
  module.exports = {
    // ... your existing Webpack settings (entry, output, loaders, etc.)
    plugins: [
      // ... your other plugins (like AngularCompilerPlugin)
      new ServiceWorkerPlugin({
        ngswConfigPath: './ngsw-config.json', // Path to your service worker config
        outputPath: './wwwroot/dist', // Match this to your ASP.NET Core static files directory
      }),
    ],
  };
  

2. Validate Your Angular App Setup #

Double-check these key parts of your Angular code:

• In app.module.ts, confirm you're registering the service worker correctly, and that it's enabled only in production:

  import { ServiceWorkerModule } from '@angular/service-worker';
  import { environment } from '../environments/environment';
  
  @NgModule({
    imports: [
      // ... other imports
      ServiceWorkerModule.register('ngsw-worker.js', {
        enabled: environment.production,
        registrationStrategy: 'registerWhenStable:30000' // Optional: Adjust registration timing if needed
      })
    ]
  })
  export class AppModule { }
  

• Ensure you have a valid ngsw-config.json in your project root. Here's a minimal working example:

  {
    "$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|webp|gif|otf|ttf|woff|woff2)"
          ]
        }
      }
    ]
  }
  

3. Make Sure Your Build Pipeline Triggers Service Worker Generation #

The service worker only gets generated during production builds, so you need to ensure:

• Your Webpack build runs in production mode. Update your package.json scripts:

  "scripts": {
    "build": "webpack --mode production"
  }
  

• ASP.NET Core calls this build script during publish. Add this to your .csproj file to hook into the publish pipeline:

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec Command="npm install" Condition="!Exists('node_modules')" />
    <Exec Command="npm run build" />
    <ItemGroup>
      <DistFiles Include="wwwroot/dist/**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
  

4. Debug the Generation Process #

If you still don't see ngsw-worker.js and ngsw.json in your output directory:

• Run your build with verbose logging to check if the service worker plugin is running:

  npm run build -- --display verbose
  

• Verify no other Webpack plugins (like minifiers or asset optimizers) are interfering. Try temporarily disabling them to rule out conflicts.
• Check that your ngsw-config.json has no syntax errors (run ngsw-config ./wwwroot/dist ./ngsw-config.json to validate it, if you have the Angular CLI installed).

5. Ensure ASP.NET Core Serves the Service Worker Correctly #

Even if the files are generated, ASP.NET Core needs to serve them properly:

• In your Program.cs (or Startup.cs for older .NET versions), configure static files to handle the service worker with the right cache headers:

  app.UseStaticFiles(new StaticFileOptions
  {
      OnPrepareResponse = ctx =>
      {
          if (ctx.File.Name.Equals("ngsw-worker.js", StringComparison.OrdinalIgnoreCase))
          {
              // Force browsers to check for updates every time
              ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
          }
      }
  });
  

Once you've worked through these steps, your service worker should generate correctly and register in the browser when you run a production build and publish your ASP.NET Core app.

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