Service-Worker安装异常求助：caches.open报TypeError: Request failed

Hey there! I’ve been in your shoes before—service worker caching issues can be tricky even when everything looks right. Let’s break down the most likely culprits behind that "Request failed" error and empty cache:

Common Causes & Fixes #

• CORS Misconfiguration for Cross-Origin Resources
  If you’re trying to cache resources from another domain (like a CDN), the server hosting those files needs to send proper CORS headers (Access-Control-Allow-Origin). Without them, the browser blocks the request when the service worker tries to cache it.
  If you can’t modify the server’s headers, you can add mode: 'no-cors' to your request options, but note this will store the resource as an opaque response (you won’t be able to check its status code later). Example:

  caches.open('my-cache-v1')
    .then(cache => cache.add(new Request('/cdn/style.css', { mode: 'no-cors' })));
  

• Relative Path Pitfalls
  Service workers resolve relative paths based on their own file location, not your app’s root. If you’re using paths like ./css/style.css, try switching to absolute paths (e.g., /css/style.css) or full URLs to avoid resolution errors. Double-check that the paths match exactly what’s loading in your browser’s Network tab.

• Missing or Misnamed Resources
  Even a tiny typo (like app.js vs App.js on a case-sensitive server) can cause a 404, which breaks the cache.addAll() or cache.add() call. Open your service worker’s inspector (Chrome DevTools > Application > Service Workers > Inspect) to see detailed error logs—this will tell you exactly which resource failed to load.

• Uncaught Promise Errors
  Make sure you’re catching errors in your caching promise chain to get more context. Without a catch(), the error message might be vague. Add this to your code:

  caches.open('my-cache-v1')
    .then(cache => cache.addAll(['/index.html', '/js/app.js', '/css/style.css']))
    .catch(error => console.error('Caching failed:', error));
  

  The logged error will point you to whether it’s a network issue, invalid resource, or something else.

• Service Worker Scope Limitations
  If your service worker file is in a subdirectory (e.g., /sw/sw.js), its default scope is limited to that subdirectory. It can’t cache files outside of /sw/ unless you explicitly set a broader scope during registration:

  navigator.serviceWorker.register('/sw/sw.js', { scope: '/' })
  

  You’ll also need to configure your server to send the Service-Worker-Allowed: / header to allow this expanded scope.

Since you mentioned you’re starting to narrow down the issue, feel free to share more details about what you’ve uncovered—I can help you refine the fix!

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