1

我正在使用 workbox-webpack-plugin 并且我已经成功设置了我的服务工作者，因为它在角度前端和 python 后端的不同缓存中缓存了图像、css、js 和我的大部分 api 响应

有一种路由永远不会从缓存中正确检索 api 响应。我不断收到错误

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

我希望看到我的服务人员检索存储的 api 响应，但它没有并说无法获取。

4

0 回答 0