サービスワーカー

Question

次のような単一のキャッシュとサービスワーカーを初期化するためのそこに多くの例があります。

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(); 
    }) 
); 
}); 

私は私のサービスワーカーに複数のキャッシュを初期化したいです。その動機付けは、変更の傾向（例えば、静的なアプリデータ対CSS、JavaScriptなど）によって資産をグループ化することです。複数のキャッシュでは、（変更されたキャッシュ名を使用して）キャッシュ内のファイルとして個々のキャッシュを更新することができます。理想的には、私はセットアップに次のような構造をしたい：このアプローチは動作しているようです

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(); 
}); 

：

let appCaches = [{ 
    name: 'core-00001', 
    urls: [ 
     './', 
     './index.html', etc... 
    ] 
    }, 
    { 
    name: 'data-00001', 
    urls: [ 
     './data1.json', 
     './data2.json', etc... 
    ] 
    }, 
    etc... 
]; 

私の最高の試みは、これまでのようなものです。しかし、私はまだ労働者と約束をするための初心者です。何かは、このアプローチには私が認識するにはあまりにも慣れていない落とし穴があることがわかります。これを実装するより良い方法はありますか？

Answer 1

ハンドラではevent.waitUntilを1回だけ呼び出すほうがよいですが、1つのプロミスを待つのは比較的簡単です。そのような

何か作業をする必要があります：

event.waitUntil(Promise.all(
    myCaches.map(function (myCache) { 
    return caches.open(myCache.name).then(function (cache) { 
     return cache.addAll(myCache.urls); 
    }) 
) 
)); 

Promise.allは、すべてのキャッシュが初期化されるまでinstallハンドラが待機することを意味アレイ決意、内のすべての約束の後に約束の配列を受け取り、解決します。

Answer 2

ありがとうございましたpirxpilot！あなたの答えはJavaScript Promises: an Introductionと組み合わされています。これらの約束をどのようにつなぎ合わせるかを試行錯誤した結果、良い実装ができました。

変更をキャッシュするという要件を追加しました。ベストプラクティスごとに、古いキャッシュは 'activate'イベント中に削除されます。最終製品は：

let cacheNames = appCaches.map((cache) => cache.name); 

self.addEventListener('install', function (event) { 
    event.waitUntil(caches.keys().then(function (keys) { 
    return Promise.all(appCaches.map(function (appCache) { 
     if (keys.indexOf(appCache.name) === -1) { 
     caches.open(appCache.name).then(function (cache) { 
      console.log(`caching ${appCache.name}`); 
      return cache.addAll(appCache.urls); 
     }) 
     } else { 
     console.log(`found ${appCache.name}`); 
     return Promise.resolve(true); 
     } 
    })).then(function() { 
     return this.skipWaiting(); 
    }); 
    })); 
}); 

self.addEventListener('activate', function (event) { 
    event.waitUntil(
    caches.keys().then(function (keys) { 
     return Promise.all(keys.map(function (key) { 
     if (cacheNames.indexOf(key) === -1) { 
      console.log(`deleting ${key}`); 
      return caches.delete(key); 
     } 
     })); 
    }) 
); 
});