私はworkbox-webpack-pluginを使用しており、AngularフロントエンドとPythonバックエンドの異なるキャッシュに画像、css、js、およびほとんどのAPI応答をキャッシュするため、Service Workerを正常にセットアップしました
API 応答をキャッシュから正しく取得しないルートが 1 つあります。エラーが発生し続けます
Uncaught (in promise) no-response: The strategy could not generate a response for 'http://127.0.0.1:8080/challenges/?is_exclusive=false&is_published=true&consolidate_groups_with_location=true&groups=9413,9404,9413&location_scope=-1&location_continent_id=5&location_country_id=235&location_state_province_id=44&location_region_id=194&location_city_id=14009&ends_at=2019-06-07%2020:54:38'. The underlying error is TypeError: Failed to fetch.
at StaleWhileRevalidate.makeRequest (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-strategies.dev.js:1005:15)
そのページの API 応答はキャッシュ ストレージに保存され、情報を表示するために必要な情報が含まれています。他のすべてのページが機能し、その理由がわかりません。また、このエラーを処理するために何をする必要があるかについても言葉がありません。
このコードを使用してみましたが、イベント リスナーが起動していないようです。
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response; // if valid response is found in cache return it
} else {
return fetch(event.request) //fetch from internet
.then(function(res) {
return caches.open("api-local-cache")
.then(function(cache) {
cache.put(event.request.url, res.clone()); //save the response for future
return res; // return the fetched data
})
})
.catch(function(err) { // fallback mechanism
return caches.open('api-local-cache')
.then(function(cache) {
return cache.match('/users/me');
});
});
}
})
);
});
これが私のワークボックス戦略です
workbox.routing.registerRoute(
new RegExp('http://127.0.0.1:8080'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: "api-local-cache"
})
);
Service Worker が保存された API 応答を取得することを期待していますが、そうではなく、取得に失敗したと表示されます。