ASP.NET Core+Angular Universal下Service Worker刷新及离线缓存异常问题

Hey there, let's break down your PWA caching problems and fix them step by step—this is a super common gotcha with Angular Universal and Service Workers, so I’ve got you covered:

Why This Happens #

Your issues stem from two key mismatches:

1. Client vs Server Routing Conflict: Angular uses client-side routing, but when you refresh a non-homepage URL (like /about), your ASP.NET Core server tries to find a physical file at that path. Since it doesn’t exist, it returns a 404 before the Service Worker can kick in.
2. Incomplete Service Worker Fallback Rules: Your current RoutesToPreCache only lists specific static paths, but it doesn’t account for dynamic client routes. Offline refreshes fail because the Service Worker doesn’t know to serve index.html for un-cached route requests.

Step-by-Step Solutions #

1. Configure Server-Side Route Fallback #

First, make sure your ASP.NET Core server returns index.html for any client-side route requests (instead of 404). Add this middleware before your static files and routing setup in Startup.cs:

app.Use(async (context, next) =>
{
    await next();
    // Redirect 404s for non-file requests to index.html
    if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
    {
        context.Request.Path = "/index.html";
        await next();
    }
});

// Proceed with your existing middleware setup
app.UseStaticFiles();
app.UseRouting();
// ... rest of your config

If you’re using Angular’s SPA middleware, you can handle fallbacks directly there too:

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }

    // Ensure all client routes fallback to index.html
    spa.Options.DefaultPage = "/index.html";
    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
    {
        // Optional: Cache static assets long-term, exclude index.html to avoid stale content
        OnPrepareResponse = ctx =>
        {
            if (!ctx.File.Name.Equals("index.html"))
            {
                ctx.Context.Response.Headers.Append("Cache-Control", "public, max-age=31536000");
            }
        }
    };
});

2. Update Service Worker Configuration #

Fix the syntax error in your original code (missing comma) and add a catch-all fallback rule for client routes. This tells the Service Worker to serve index.html for any un-cached route request:

services.AddProgressiveWebApp(new PwaOptions 
{ 
    CacheId = "v=123", 
    Strategy = ServiceWorkerStrategy.CacheFingerprinted, 
    RoutesToPreCache = "/,/Home/Index,/Shared/_Layout,/Shared/Error,/favicon.ico,/dist/vendor.js,/dist/main-client.js",
    OfflineRoute = "index.html",
    // Catch-all fallback for all client routes
    FallbackRoutes = new Dictionary<string, string>
    {
        { "/**", "/index.html" }
    }
});

3. Validate and Test #

After making these changes:

• Clear your browser’s cache and unregister existing Service Workers (Chrome DevTools > Application > Service Workers > Unregister).
• Re-run your app, navigate through all pages to let the Service Worker cache resources.
• Test offline mode and non-homepage refreshes again to confirm the fix.

Quick Tips #

• Stick to either WebEssentials.AspNetCore.Pwa or Angular’s built-in @angular/pwa—mixing them can cause conflicts.
• Use Chrome DevTools’ Application > Cache Storage to verify index.html and static assets are cached correctly.

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