服务工作者获取

Question

我正在使用 Service Worker 进行离线工作。 所以对于每个 Fetch 请求，我将它存储在缓存中。

现在，我希望 Service Worker 发出请求，并将其存储以备下次使用。 问题是当我使用fetch(myUrl).then... ， self.addEventListener('fetch', function(e)...的 Fetch Listener self.addEventListener('fetch', function(e)...没有捕捉到它。

我不想复制代码..有什么想法吗？

获取侦听器是：

self.addEventListener('fetch', function(e) {

    // e.respondWidth Responds to the fetch event
    e.respondWith(

        // Check in cache for the request being made
        caches.match(e.request)
            .then(function(response) {

                // If the request is in the cache
                if ( response ) {
                    console.log("[ServiceWorker] Found in Cache", e.request.url, response);
                    // Return the cached version
                    return response;
                }

                // If the request is NOT in the cache, fetch and cache

                var requestClone = e.request.clone();
                return fetch(requestClone)
                    .then(function(response) {

                        if ( !response ) {
                            console.log("[ServiceWorker] No response from fetch ")
                            return response;
                        }

                        var responseClone = response.clone();

                        //  Open the cache
                        caches.open(cacheName).then(function(cache) {

                            // Put the fetched response in the cache
                            cache.put(e.request, responseClone);
                            console.log('[ServiceWorker] New Data Cached', e.request.url);

                            // Return the response
                            return response;

                        }); // end caches.open
                        // returns the fresh response (not cached..)
                        return response;

                    })
                    .catch(function(err) {
                        console.log('[ServiceWorker] Error Fetching & Caching New Data', err);
                    });


            }) // end caches.match(e.request)
            .catch(function(e){
                // this is - if we still dont have this in the cache !!!
                console.log("[ServiceWorker] ERROR WITH THIS MATCH !!!",e, arguments)
            })// enf of caches.match
    ); // end e.respondWith
});

Answer 1

由于我无法评论以获取任何具体细节，而且您的代码对我来说似乎是正确的，我的猜测是：

• 您的 Service Worker 未注册或运行。 您可以通过检查检查器的应用程序选项卡来确保它正在运行。 它应该如下所示：

• 您假设它不起作用，因为消息没有记录到控制台。 Service Worker 在与您的页面不同的环境中运行，因此消息会记录到不同的控制台，您可以通过单击上图中的检查按钮进行检查。

Answer 2

缓存然后网络策略可能是您正在寻找的：

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network

var networkDataReceived = false;

startSpinner();

// fetch fresh data
var networkUpdate = fetch('/data.json').then(function(response) {
  return response.json();
}).then(function(data) {
  networkDataReceived = true;
  updatePage();
});

// fetch cached data
caches.match('/data.json').then(function(response) {
  if (!response) throw Error("No data");
  return response.json();
}).then(function(data) {
  // don't overwrite newer network data
  if (!networkDataReceived) {
    updatePage(data);
  }
}).catch(function() {
  // we didn't get cached data, the network is our last hope:
  return networkUpdate;
}).catch(showErrorMessage).then(stopSpinner);