成功安装Service Worker后更新UI

塔欣·拉曼(Tahin Rahman)

看起来Service Worker在工作程序上下文中运行,并且无法访问DOM。但是,一旦安装了Service Worker,我希望我的用户知道该应用程序现在可以脱机工作。我怎样才能做到这一点?

维维克·普拉塔普·辛格(Vivek Pratap Singh)

当服务人员进来时activated state,这是展示烤面包' Content is cached for offline use'的完美时机注册服务工作者时,请尝试以下代码下的操作。

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

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章