Question

Create-react-app附带一个registerServiceWorker.js文件，其中包含注册服务工作者的代码。我对它的运作方式感到有些困惑。有问题的代码是：

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
        .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              console.log('New content is available; please refresh.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
            }    
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:',     error);
    });
}

第一个控制台日志需要发生什么，显示＆＃34;新内容可用;请刷新，＆＃34;显示？

更具体地说，当index.html发生更改时（如果脚本文件名发生更改），如何触发此代码运行。

Answer 1

让我们一步一步地分解它。

navigator.serviceWorker.register在建立有效的服务工作者存在时解决了
registration.onupdatefound为服务工作者的HTTP请求解析到之前的某个其他文件（或第一次找到SW时）时触发的事件的侦听器
registration.installing.onstatechange为新的Service Worker的生命周期更改注册了一个监听器（从安装到安装，从安装到激活等）。
if (installingWorker.state === 'installed')过滤掉installed以外的所有状态 - 因此在安装每个新SW后执行其正分支
if (navigator.serviceWorker.controller)检查页面当前是否由任何（上一个）服务工作者控制。如果为true，那么我们将在此处理上述更新方案。

总结一下 - 这个console.log将在更新的（不是第一个）Service Worker正确安装后执行。

index.html更改后不会触发。它是唯一一个经过检查的Service Worker代码（由serviceWorker.register方法指向）。另请注意，通常浏览器（或至少Chrome？）在下载当前版本后24小时内不会检查新SW版本。另请注意，如果使用过于激进的缓存标头发送，那么为此服务工作文件设置的普通旧HTTP缓存可能会搞乱。

究竟是什么触发了这个服务工作者代码运行？

1 个答案: