Service Worker中延迟添加的addEventListener为何会被忽略？

我查阅了相关文章与问题，但仍无法理解这种使用方式的设计初衷。

被忽略的代码示例 #

以下Service Worker中的监听会被忽略：

(async () => {
  await new Promise(handler => setTimeout(() => handler(), 0));
  console.log("await");
  self.addEventListener('message', (e) => console.log(e))
})()

同时会收到如下警告：

Event handler of 'message' event must be added on the initial evaluation of worker script.

正常生效的代码示例 #

但以下Service Worker中的监听不会被忽略：

self.addEventListener('message', (e) => console.log(e))

原因解析 #

这是浏览器针对Service Worker的生命周期管理与性能优化规则决定的：

• Service Worker的休眠特性：Service Worker在空闲时会被浏览器休眠甚至终止，当有对应事件触发时，浏览器需要明确知道应该唤醒它来处理哪些事件。如果监听器是延迟注册的，浏览器在脚本首次同步执行的初始阶段无法捕获到这个监听器，后续message事件触发时就不会去唤醒对应的Service Worker。
• 初始评估阶段的监听器收集：浏览器会在Service Worker脚本首次同步执行的初始评估阶段，集中收集所有注册的事件监听器，以此建立事件与Service Worker的关联映射。异步延迟注册的监听器错过了这个收集窗口，自然不会被浏览器识别和处理。
• 性能与可靠性的平衡：这种设计是为了避免浏览器需要持续追踪Service Worker内部的异步操作，减少不必要的资源消耗，同时确保事件触发时能精准唤醒对应的Service Worker，保证事件处理的可靠性。

内容的提问来源于stack exchange，提问作者MaximPro