在哪里放置 ServiceWorker 片段 - head 或 body？

Question

我从 service-workers 开始（晚会有点晚，但总比没有好），我将我的 <script>if ('serviceWorker' in navigator) {..}</script> 片段放在最底部，在我的另一个片段下方（System.import(...)).

那是个好地方吗？我还应该将标准脚本片段放在页面上的其他什么地方：开头还是 body 的开头？或者将它放在另一个脚本中？

更重要 - 为什么？

Answer 1

根据您的 service worker 的重量级，以及在初次访问期间需要在您的页面上执行多少 JavaScript，这可能会或可能不会有所不同。但您可以阅读 this article Service Worker 注册最佳实践，以更深入地了解何时可能重要。

文章的要点是合理的模式是使用

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

注册你的 service worker。只要它在触发 load 事件之前运行，它几乎可以出现在页面的任何地方。

Answer 2

FWIW，我认为在 head 中进行注册更好，以防万一您有一些第三方请求在 head 中进行并且您需要配置一些运行时缓存...

...
    <link href='/favicon.png' rel='icon' type='image/png'>
    <link href="/manifest.json" rel="manifest">

    <script>
        'serviceWorker' in navigator && window.addEventListener('load', navigator.serviceWorker.register('/service-worker.js'))
    </script>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="/bundle.css">
</head>
...

在哪里放置 ServiceWorker 片段 - head 或 body？

Where to put ServiceWorker snippet - head or body?

javascript

offline-mode

service-worker