使用Cache.addAll缓存JSON文件报错：Iterator getter is not callable

Hey there, let's break down why you're hitting this error and how to fix it!

What's the Root Cause? #

The error TypeError: Failed to execute 'addAll' on 'Cache': Iterator getter is not callable happens because cache.addAll() requires a valid iterable array of URL strings as its argument. Right now, the files variable you're passing in isn't a properly formatted array (or isn't an array at all).

Step 1: Diagnose the files Variable #

First, let's check exactly what you're getting from your JSON response. Modify your code to log raw response data and the parsed files structure—this will reveal the issue quickly:

event.waitUntil( 
  caches.open(CACHE_NAME) 
    .then(function(cache) { 
      return fetch('resource').then(function(response) { 
        // Log raw response text first to verify JSON structure
        return response.text().then(function(rawJson) {
          console.log('[install] Raw JSON from "resource":', rawJson);
          return JSON.parse(rawJson);
        });
      }).then(function(files) { 
        // Check the type and structure of parsed files
        console.log('[install] files type:', typeof files);
        console.log('[install] Is files an array?', Array.isArray(files));
        console.log('[install] Parsed files content:', files);
        
        // Only proceed if it's a valid array
        if (Array.isArray(files)) {
          console.log('[install] Adding files from JSON file: ', files); 
          return cache.addAll(files); 
        } else {
          throw new Error('Parsed data is not an array!');
        }
      }); 
    }) 
    .then(function() { 
      console.log( 
        '[install] All required resources have been cached;', 
        'the Service Worker was successfully installed!' 
      ); 
      return self.skipWaiting(); 
    }) 
    .catch(err => console.error('[install] Error:', err))
); 

Run this and check your browser console—you'll see:

• If your JSON response is actually a valid array (like ["/style.css", "/app.js"])
• Or if it's an object with an array nested inside (like {"assets": ["/file1.js", "/file2.png"]})
• Or if the response is invalid (like an HTML error page from a 404)

Step 2: Fix the Issue Based on Your JSON Structure #

Here are the most common fixes:

Case 1: Your JSON is an object with a nested array

If your resource endpoint returns something like this:

{
  "cachedAssets": [
    "/index.html",
    "/styles/main.css",
    "/scripts/app.js"
  ]
}

You need to access the nested array instead of passing the whole object to cache.addAll():

.then(function(files) { 
  console.log('[install] Adding files from JSON file: ', files.cachedAssets); 
  return cache.addAll(files.cachedAssets); // Use the nested array here
});

Case 2: Your JSON has invalid syntax

If the raw JSON log shows malformed syntax (missing brackets, trailing commas, etc.), fix the JSON output from your resource endpoint to be a valid array of URLs.

Case 3: The response isn't JSON at all

If you see HTML in the raw response log, that means your fetch('resource') is hitting an error (like 404). Double-check the URL to make sure it points to the correct JSON file.

Final Tip #

Always add a .catch() to your promise chain (like in the diagnostic code above) to catch unexpected errors and make debugging way easier.

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