Javascript 成功安装Service Worker时更新UI

看起来服务工作者在工作者上下文中运行，没有访问DOM的权限。但是，一旦安装了Service Worker，我希望我的用户知道该应用程序现在可以脱机工作。如何才能做到这一点？

当服务人员处于

激活状态时

，这是显示toast的最佳时机，“

内容被缓存以供脱机使用

”。注册服务人员时，请尝试以下代码

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(reg) {
    // updatefound is fired if service-worker.js changes.
    reg.onupdatefound = function() {
      var installingWorker = reg.installing;

      installingWorker.onstatechange = function() {
        switch (installingWorker.state) {
          case '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 the page's interface.
              console.log('New or updated content is available.');
            } 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 now available offline!');
            }
            break;

          case 'redundant':
            console.error('The installing service worker became redundant.');
            break;
        }
      };
    };
  }).catch(function(e) {
    console.error('Error during service worker registration:', e);
  });
}

---

当服务人员处于

激活状态时

，这是显示toast的最佳时机，“

内容被缓存以供脱机使用

”。注册服务人员时，请尝试以下代码

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(reg) {
    // updatefound is fired if service-worker.js changes.
    reg.onupdatefound = function() {
      var installingWorker = reg.installing;

      installingWorker.onstatechange = function() {
        switch (installingWorker.state) {
          case '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 the page's interface.
              console.log('New or updated content is available.');
            } 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 now available offline!');
            }
            break;

          case 'redundant':
            console.error('The installing service worker became redundant.');
            break;
        }
      };
    };
  }).catch(function(e) {
    console.error('Error during service worker registration:', e);
  });
}

在测试之后，我想使用

命名函数

，而不是嵌套的

匿名函数

作为事件处理程序，以使代码更易于我欣赏，并且希望以后更容易理解

但只有在花了一些时间对文档进行排序之后，我才设法在正确的对象上侦听正确的事件。所以，在这里分享我的工作示例，希望能将其他人从繁琐的过程中解救出来

    // make sure that Service Workers are supported.
    if (navigator.serviceWorker) {
        navigator.serviceWorker.register('/sw.js')
            .then(function (registration) {
                console.log("ServiceWorker registered");

                // updatefound event is fired if sw.js changed
                registration.onupdatefound = swUpdated;
            }).catch(function (e) {
            console.log("Failed to register ServiceWorker", e);
        })
    }

    function swUpdated(e) {
        console.log('swUpdated');
        // get the SW which being installed
        var sw = e.target.installing;
        // listen for installation stage changes
        sw.onstatechange = swInstallationStateChanged;
    }

    function swInstallationStateChanged(e) {
        // get the SW which being installed
        var sw = e.target;
        console.log('swInstallationStateChanged: ' + sw.state);

        if (sw.state == 'installed') {
            // is any sw already installed? This function will run 'before' 'SW's activate' handler, so we are checking for any previous sw, not this one.
            if (navigator.serviceWorker.controller) {
                console.log('Content has updated!');
            } else {
                console.log('Content is now available offline!');
            }
        }

        if (sw.state == 'activated') {
            // new|updated SW is now activated.
            console.log('SW is activated!');
        }
    }

在测试之后，我想使用

命名函数

，而不是嵌套的

匿名函数

作为事件处理程序，以使代码更易于我欣赏，并且希望以后更容易理解

但只有在花了一些时间对文档进行排序之后，我才设法在正确的对象上侦听正确的事件。所以，在这里分享我的工作示例，希望能将其他人从繁琐的过程中解救出来

    // make sure that Service Workers are supported.
    if (navigator.serviceWorker) {
        navigator.serviceWorker.register('/sw.js')
            .then(function (registration) {
                console.log("ServiceWorker registered");

                // updatefound event is fired if sw.js changed
                registration.onupdatefound = swUpdated;
            }).catch(function (e) {
            console.log("Failed to register ServiceWorker", e);
        })
    }

    function swUpdated(e) {
        console.log('swUpdated');
        // get the SW which being installed
        var sw = e.target.installing;
        // listen for installation stage changes
        sw.onstatechange = swInstallationStateChanged;
    }

    function swInstallationStateChanged(e) {
        // get the SW which being installed
        var sw = e.target;
        console.log('swInstallationStateChanged: ' + sw.state);

        if (sw.state == 'installed') {
            // is any sw already installed? This function will run 'before' 'SW's activate' handler, so we are checking for any previous sw, not this one.
            if (navigator.serviceWorker.controller) {
                console.log('Content has updated!');
            } else {
                console.log('Content is now available offline!');
            }
        }

        if (sw.state == 'activated') {
            // new|updated SW is now activated.
            console.log('SW is activated!');
        }
    }

---

问题是要展示我需要访问DOM的祝酒词，而我不能从服务人员那里访问DOM

console.log（）

还不够。您没有从软件访问DOM。必须在注册service worker时编写此代码。因此，当service worker处于活动状态时，您可以在触发事件时访问DOM。明白了。我必须在登记服务人员时进行这项工作。我正试着从软件上做到这一点。谢谢。问题是我需要举杯祝酒，才能访问DOM，但服务人员不能这样做

console.log（）

还不够。您没有从软件访问DOM。必须在注册service worker时编写此代码。因此，当service worker处于活动状态时，您可以在触发事件时访问DOM。明白了。我必须在登记服务人员时进行这项工作。我正试着从软件上做到这一点。谢谢