如何用 ServiceWorker 生命周期替换 appcache 生命周期事件

Question

我正在尝试在我的应用程序中将 appcache 更改为 serviceworker 以进行离线工作。我已经从 html 页面中删除了清单标记，并在生命周期事件中创建了 serviceworker.js。但是，appcache 事件的使用方式如下：

function framework(){
    this.appCache = window.applicationCache;
  //more other codes
}
  var fw = new framework();

现在，像这样检查生命周期事件：

if (fw.appCache) {
/* Checking for an update. Always the first event fired in the sequence.*/ fw.appCache.addEventListener('checking',    handleCacheEvent, false);
/* An update was found. The browser is fetching resources.*/               fw.appCache.addEventListener('downloading', handleCacheEvent, false);
/* Fired if the manifest file returns a 404 or 410.
   This results in the application cache being deleted. */                 fw.appCache.addEventListener('obsolete',    handleCacheEvent, false);
/* The manifest returns 404 or 410, the download failed,
   or the manifest changed while the download was in progress.*/           fw.appCache.addEventListener('error',       handleCacheError, false);
/* Fired for each resource listed in the manifest as it is being fetched.*/fw.appCache.addEventListener('progress',    handleProgressEvent, false);
/*Fired after the first cache of the manifest. */                          fw.appCache.addEventListener('cached',  function(event){handleCacheEvent(event);removeProcessing();$("#processingTextId").html("");}, false);
/* Fired after the first download of the manifest.*/                       fw.appCache.addEventListener('noupdate', function(event){handleCacheEvent(event);removeProcessing(); $("#processingTextId").html("");}, false);
/* Fired when the manifest resources have been newly redownloaded. */      fw.appCache.addEventListener('updateready', function(e) {if (fw.appCache.status == fw.appCache.UPDATEREADY) {alert('Successful'); try{fw.appCache.swapCache();window.location.reload();} catch(err){}}}, false);

}

function handleCacheEvent(event) {$("#processingTextId").html(event.type);}
function handleProgressEvent(event) {$("#processingTextId").html("(" + event.loaded + " of "+ event.total +")");}
function handleCacheError(event) {$("#processingTextId").html("Cache failed to update!")

所以，我的问题是如何用服务工作者事件替换这些事件。我的服务人员已注册并正确缓存资产。现在，我在 index.html 中这样做

注册

<script type="text/javascript">
       if('serviceWorker' in navigator){
            navigator.serviceWorker.register('serviceworker.js')
            .then(registration =>{
                console.log('registration successful:',registration.scope);
            })
            .catch(err=>{
                console.log('registration failed:',err);
            });
    }


    </script>

我创建了单独的 serviceworker.js。

如何用 serviceworker 替换那些 appcache 事件？

Answer 1

使用 Service Worker 时，您不会自动收到任何这些事件。此外，Service Worker 填充和更新缓存的模型比 AppCache 更加“开放式”，因此将 Service Worker 缓存转换为等效的 AppCache 事件并不总是可能的。

不过，总的来说，有两件事可以提供帮助：

阅读Service Worker Lifecycle。您可能关心的一些事件可以通过监听服务工作者生命周期的等效更改来近似。例如，如果您precache some URLs during service worker installation，那么新注册的服务工作者离开installing 状态将大致相当于 AppCache 清单完成缓存的时间。同样，如果您检测到之前注册的 Service Worker 何时有更新（并且该更新是由于要预缓存的 URL 列表发生变化），那么这将大致对应于 AppCache 清单的更新时间。

如果您的服务工作者使用“运行时”缓存，其中 URL 被添加到 fetch 处理程序内的缓存中，您可以使用以下技术告诉您的客户端页面何时缓存新项目，使用postMessage()进行通信。

Service Worker 的 JavaScript 的一部分：

const cacheAddAndNotify = async (cacheName, url) => {
  const cache = await caches.open(cacheName);
  await cache.add(url);
  const clients = await self.clients.matchAll();
  for (const client of clients) {
    client.postMessage({cacheName, url});
  }
};

self.addEventListener('fetch', (event) => {
  // Use cacheAddAndNotify() to add to your cache and notify all clients.
});

您的网络应用 JavaScript 的一部分：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', (event) => {
    const {cacheName, url} = event.data;
    // cacheName and url represent the entry that was just cached.
  });
}

同样，您所听内容的具体细节以及您对它的反应实际上将取决于您的 Service Worker 中的逻辑。不要期望所有事件之间存在 1:1 映射。相反，请将此迁移作为一个机会来思考您真正关心哪些与缓存相关的更改，并专注于侦听这些更改（通过 service worker 生命周期事件或postMessage() 通信）。