jjzjj

javascript - 如何: ServiceWorker check if ready to update

coder 2024-05-06 原文

我要实现的目标:

  • 使用加载器/微调器渲染页面

  • 如果 service-worker.js 已注册并处于事件状态，则检查更新

    • 如果没有更新，则移除 loader
    • 如果 updatefound 并且安装了新版本，则重新加载页面
  • 否则注册service-worker.js
    • 当 updatefound 时，意味着安装了新的，移除 loader

我正在使用 sw-precache 模块来生成 service-worker.js 和以下注册码:

window.addEventListener('load', function() {

  // show loader
  addLoader();

  navigator.serviceWorker.register('service-worker.js')
    .then(function(swRegistration) {

      // react to changes in `service-worker.js`
      swRegistration.onupdatefound = function() {
        var installingWorker = swRegistration.installing;
        installingWorker.onstatechange = function() {
          if(installingWorker.state === 'installed' && navigator.serviceWorker.controller){

            // updated content installed
            window.location.reload();
          } else if (installingWorker.state === 'installed'){

            // new sw registered and content cached
            removeLoader();
          }
        };
      }

      if(swRegistration.active){
        // here I know that `service-worker.js` was already installed
        // but not sure it there are changes
        // If there are no changes it is the last thing I can check
        // AFAIK no events are fired afterwards
      }

    })
    .catch(function(e) {
      console.error('Error during service worker registration:', e);
    });
});

看完spec很明显，没有像 updatenotfound 这样的处理程序。看起来 serviceWorker.register 检查 service-worker.js 是否通过运行 get-newest-worker-algorithm 在内部更改，但我看不到通过公共(public) api 公开的类似方法。

我认为我的选择是:

  • 在 service worker 注册激活后等待几秒钟，看看是否触发了 onupdatefound
  • 如果缓存未更新，则从 service-worker.js 代码触发自定义事件

还有其他建议吗？

编辑:

我想出了一些代码，通过在 SW 注册和 SW 客户端之间使用 postMessage() 解决了这个问题(如@pate 所建议的那样)

下面的demo试图通过postMessage实现SW客户端和SW注册之间的校验，但是失败了，因为SW代码已经被缓存了DEMO

编辑:

所以现在看来​​我无法实现我想要的，因为:

  1. 当 service worker 处于事件状态时，您无法通过评估 SW 中的某些代码来检查更新 - 这仍然是相同的缓存 SW，那里没有变化
  2. 您需要等待 onupdatefound，没有其他任何东西会通知 SW 的更改
  3. activation 旧版 SW 在 onupdatefound
    4. 之前
  4. 如果没有变化，激活后不会触发任何东西
  5. 软件注册update()不成熟，不断变化，从 Chrome 46 开始，如果操作成功完成或没有更新，update() 将返回一个解析为“undefined”的 promise
  6. 设置超时以推迟 View 渲染不是最佳选择，因为对于应该设置多长时间没有明确的答案，这也取决于 SW 大小

最佳答案

Fabio 提供的另一个答案无效。 Service Worker 脚本无权访问 DOM。不可能从 DOM 中删除任何东西，或者，例如，从 Service Worker 中操作任何正在处理 DOM 元素的数据。该脚本单独运行，没有共享状态。

不过，您可以做的是在实际运行页面的 JS 和 Service Worker 之间发送消息。我不确定这是否是执行 OP 所要求的最佳方法，但可用于实现它。

  1. 在页面上注册一个 onmessage 处理器
  2. 从 SW 的激活或安装事件向页面发送消息
  3. 在页面上收到消息后采取相应行动

我自己将软件版本号保存在软件内部的一个变量中。然后我的 SW 将该版本号发布到页面，页面将其存储到浏览器的 localStorage 中。下次加载页面时，SW 将其当前版本号发布到页面上，onmessage 处理程序将其与当前存储的版本号进行比较。如果它们不相同，则 SW 已更新为包含在消息中的某个版本号。之后，我更新了版本号的 localStorage 副本并完成了这个和那个。

此流程也可以通过其他方式完成:从页面向 SW 发送一条消息，让 SW 回复一些内容，然后采取相应的行动。

我希望我能够清楚地解释我的想法:)

关于javascript - 如何: ServiceWorker check if ready to update，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45759595/

ServiceWorkerjavascriptcodeliworkerservice-workersw-precache

有关javascript - 如何: ServiceWorker check if ready to update的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  4. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  5. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  6. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  7. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  8. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  9. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  10. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

随机推荐