服务人员提取

我正在使用服务工作人员进行脱机工作。所以对于每个提取请求，我将它存储在缓存中。服务人员提取

现在，我希望服务人员提出请求，并在下次存储它。问题是当我使用fetch(myUrl).then...时，服务工作者中的Fetch Listener self.addEventListener('fetch', function(e)...无法捕捉它。

我不想重复代码..任何想法？

取指令听者是：

self.addEventListener（ '取'，函数（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

}）;

来源

2017-10-06 Gugu

你确定你的服务人员注册呢？ –

因为我不能发表评论我要得到任何具体细节和你的代码似乎我的权利，我的猜测是：

您服务工作者没有注册，或跑步。你可以确定它是通过检查你的检查员的应用程序选项卡来运行的。它应该看起来像下面这样：

你认为它没有工作，因为没有被记录到控制台的消息。服务工作人员在与您的页面不同的环境中运行，因此这些消息将记录到不同的控制台，您可以通过单击上图中的检查按钮来检查该控制台。

来源

2017-10-06 15:05:17

我确实检查了服务人员。对于每个新的请求，我都会写入控制台。然后我运行一个函数，即提取。我在控制台中得到它的结果，但我没有从提取监听器获取控制台消息。 – Gugu

你能提供记录消息的截图吗？ –

缓存则网络策略可能是你在找什么：

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

来源

2017-10-06 17:22:42

服务人员提取

回答

相关问题