如何每 30 分钟更新一次我的 Service Worker 中的缓存文件？

比约恩 C

我有这个服务人员：

//IMPORT POLYFILL
importScripts('cache-polyfill.js');

//INSTALL
self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open('stock_item_balance_v1').then(function(cache) {
            return cache.addAll([
                '/app/offline_content/purchase/stock_items/stock_items_balance.php',
                '/app/offline_content/purchase/stock_items/js/stock_items_balance.js'
            ]);
        })
    );
});

//FETCH (FETCH IS WHEN YOU CHECK FOR INTERNET)
self.addEventListener('fetch', function(event) {
    //console.log(event.request.url); 

    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
            
        })
    );
});

在“stock_items_balance.php”中，我从我的数据库中获取数据。所以每 30 分钟我想更新我的缓存页面并重新加载窗口。

所以首先我有一个检查互联网连接的脚本。
如果为真，我想清理/更新缓存并重新加载页面。

我该怎么做？

//INTERVAL
setInterval(function(){
    
  //CLEAN/UPDATE CACHED FILES
  serviceworker.update(); // ???

  //RELOAD PAGE
  window.location.reload();

}, 180000);

杰夫波斯尼克

（我认为您有一个更大的问题，即您所描述的方法是否真的会为您的用户提供良好的、可预测的、支持离线的体验，但我只会关注您提出的实际技术问题。）

向服务工作者发送消息

首先，您应该记住，可以为同一个 URL 打开多个选项卡，如果您这样做，最终您的更新代码可能会多次运行。此答案中的代码在异步缓存更新完成后，通过获取 Service Worker 的所有活动客户端的列表并告诉每个客户端导航到当前 URL，从 Service Worker 内部为您处理“重新加载”步骤（这实际上是重新加载）。

// Additions to your service worker code:
self.addEventListener('message', (event) => {
  // Optional: if you need to potentially send different
  // messages, use a different identifier for each.
  if (event.data === 'update') {
    event.waitUntil((async () => {
      // TODO: Move these URLs and cache names into constants.
      const cache = await caches.open('stock_item_balance_v1');
      await cache.addAll([
        '/app/offline_content/purchase/stock_items/stock_items_balance.php',
        '/app/offline_content/purchase/stock_items/js/stock_items_balance.js'
      ]);
      const windowClients = await clients.matchAll();
      for (const windowClient of windowClients) {
        // Optional: check windowClient.url first and
        // only call navigate() if it's the URL for one
        // specific page.
        windowClient.navigate(windowClient.url);
      }
    })());
  }
});

// Additions to your window/page code:
setInterval(() => {
  if (navigator.serviceWorker.controller) {
    navigator.serviceWorker.controller.postMessage('update');
  }
}, 180000);

什么行不通

缓存存储 API 可从 Service Worker 内部和页面window范围内部使用。通常我建议人们做的是从window上下文中打开相同的缓存，并调用cache.add()网络上的最新信息来更新缓存的条目。但是，cache.add()从window上下文调用将导致您的fetch处理程序拦截网络请求，此时，您的响应实际上不会来自网络。通过cache.add()从 Service Worker 内部调用，您可以保证生成的网络请求不会触发您的fetch处理程序。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-21

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章