时间戳

首页 > 解决方案 > 如何每 30 分钟更新一次 Service Worker 中的缓存文件？

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

问题描述

我有这个服务人员：

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

标签： javascriptservice-worker

解决方案

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

向服务人员发送消息

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

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

推荐阅读