Javascript 无法读取属性'；增补列表器'；未定义的--navigator.serviceWorker.register（'；worker.js'；）

不过，我正在尝试让javascript正常工作。它给了我一些问题。
作者的工作脚本演示在这里。

我使用的代码与他在演示页面上的代码相同

我下载了worker.js并将其存储在我的js文件夹中。
代码中是这样的

if ('serviceWorker' in navigator) {  var iceworker = navigator.serviceWorker.register('worker.js')
//I get this error in Google Chrome
Uncaught TypeError: Cannot read property 'addEventListener' of undefined
//For this line.
navigator.serviceWorker.addEventListener('message', event => {

这是上面链接中的脚本

<audio preload="none" id="aud" controls src="https://toohotradio.net/metadata/icy/" type="audio/mpeg">
</audio>
<div></div>
<ul>
</ul>
<script>
if ('serviceWorker' in navigator) {
  var iceworker = navigator.serviceWorker.register('metadataworker.js')
    .then(function(reg) {
      console.log('Icecast service worker registered');
      addItem('Icecast service worker registered. Click play to start the stream.');
    }).catch(function(error) {
    console.warn('Error ' + error);
    addItem('Error ' + error);
  });
}
var delay = 8000;
navigator.serviceWorker.addEventListener('message', event => {
  if(event.origin != 'https://toohotradio.net'){
    return;
  }
  setTimeout(function(){
    document.querySelector('div').innerText = event.data.msg.substring(event.data.msg.indexOf("'") + 1,event.data.msg.lastIndexOf("'"));
  },delay);
  console.log(event.data.msg);
  addItem('Message from service worker ' + event.data.msg);
});
document.querySelector('audio').addEventListener('play', event => {
  performance.mark('play');
  addItem("Measuring buffering time...");
})
  document.querySelector('audio').addEventListener('playing', event => {
  performance.mark('playing');
  performance.measure('delay','play','playing');
  var measures = performance.getEntriesByName("delay");
  delay = measures[0].duration;
  addItem("Buffering took " + (delay/1000).toFixed(2) + " seconds");
  addItem("Setting metadata update delay to " + (delay/1000).toFixed(2) + " seconds");
})
  document.querySelector('audio').addEventListener('pause', event => {
  navigator.serviceWorker.controller.postMessage('message');
  document.querySelector('audio').src = document.querySelector('audio').src;
})
  function addItem(text) {
  var node = document.createElement("li");
  var textnode = document.createTextNode(text);
  node.appendChild(textnode);
  document.querySelector('ul').appendChild(node);
}
</script>

有人能帮我完成这项工作吗？

多谢各位

韦恩
想出了办法。

URL必须是HTTPSHTTPS或localhost

一旦我这么做了，它就开始工作了

一切都很好。
将
navigator.serviceWorker.addEventListener
部分移动到
if（'serviceWorker'在navigator中）
谢谢，ponury。这会运行，但不会像官方演示那样显示媒体文件信息。只有表演--------------测量缓冲时间…/缓冲时间为6.36秒/将元数据更新延迟设置为6.36秒