Question

我在我的一个项目中使用服务工作者。随叫随到，我的服务工作者成功注册并缓存所有提供的URL。但是当我重新加载页面时，所有缓存的数据都是从磁盘缓存或内存缓存中挑选出来的，而不是从服务工作者中挑选出来的。我提到了这个问题Service worker is caching files but fetch event is never fired并交叉检查了范围确定没有问题。

service-worker.js

var CACHE_NAME = 'home-screen-cache';
var urlsToCache = [
      '/static/client-view/fonts/fontawesome-webfont.eot',
      '/static/client-view/fonts/fontawesome-webfont.woff',
      '/static/client-view/fonts/fontawesome-webfont.ttf',
      '/static/client-view/fonts/fontawesome-webfont.svg',
      '/static/css/cricket.css',
      '/static/client-view/js/jquery.mobile.custom.min.js',
      '/static/client-view/js/jquery-2.1.4.min.js',
      '/static/js/cricket_matches.js'
  ];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          console.log("Found in cache");
          return response;
        }
        console.log("Not found in cache");
        return fetch(event.request);
      }
    )
  );
});

service-worker registration script

if ('serviceWorker' in navigator) {
          window.addEventListener('load', function() {
        navigator.serviceWorker.register('{% static 'service-worker.js' %}').then(function(registration) {
          // Registration was successful
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
          // registration failed :(
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }

如果您需要任何其他数据，请在评论中提及。请帮忙。

Service Worker在获取和返回缓存数据时不会触发

0 个答案: