服务工作者获取答案

【问题标题】：Service worker Fetch服务工作者获取
【发布时间】：2017-10-06 13:35:24
【问题描述】：

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

现在，我希望服务人员会提出请求，并将其存储起来以备下次使用。问题是当我使用 fetch(myUrl).then... 时，服务工作者中的 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
});

【问题讨论】：

你确定你的 service worker 已经注册了吗？

标签： javascript service-worker

【解决方案1】：

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

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

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

【讨论】：

我确实检查了服务人员。对于每个新请求，我都会写信给控制台。然后我在那里运行一个函数，即获取。我在控制台中得到它的结果，但我没有从 fetch 监听器中得到控制台消息。
您能提供记录消息的屏幕截图吗？

【解决方案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);

【讨论】：