title: Service Worker with Multiple Caches
body: <p>There are numerous examples out there for initializing a service worker with a single cache similar to the following:</p>
  
  <pre><code>let cacheName = 'myCacheName-v1';
  let urlsToCache = ['url1', 'url2', url3'];
  
  self.addEventListener('install', function (event) {
    event.waitUntil(
      caches.open(cacheName).then(function (cache) {
        return cache.addAll(urlsToCache);
      }).then(function () {
        return this.skipWaiting();
      })
    );
  });
  </code></pre>
  
  <p>I wish to initialize multiple caches on my service worker. The motivation is to group assets by their tendency for change (e.g., static app data vs. css, javascript, etc.). With multiple caches, I can update individual caches (via versioned cache names) as files within that cache change. Ideally, I wish to setup a structure similar to the following:</p>
  
  <pre><code>let appCaches = [{
      name: 'core-00001',
      urls: [
        './',
        './index.html', etc...
      ]
    },
    {
      name: 'data-00001',
      urls: [
        './data1.json',
        './data2.json', etc...
      ]
    },
    etc...
  ];
  </code></pre>
  
  <p>My best attempt so far is something similar to:</p>
  
  <pre><code>self.addEventListener('install', function (event) {
    appCaches.forEach(function (appCache) {
      event.waitUntil(
        caches.open(appCache.name).then(function (cache) {
          return cache.addAll(appCache.urls);
        }));
    });
    self.skipWaiting();
  });
  </code></pre>
  
  <p>This approach seems to work. However, I'm still a newbie to service workers and promises. Something tells me that this approach has a pitfall that I'm too inexperienced to recognize. Is there a better way to implement this?</p>