Javascript 如何注册服务人员？

我不能注册服务人员。该文件与index.js和app.js位于一起。我得到下一个错误

A bad HTTP response code (404) was received when fetching the script.

Failed to load resource: net::ERR_INVALID_RESPONSE

Registration failed TypeError: Failed to register a ServiceWorker: A 
bad HTTP response code (404) was received when fetching the script.

****** 
    if ('serviceWorker' in navigator) {
        window.addEventListener('`load`', () => {
        navigator.serviceWorker.register('serviceWorker.js', { scope:'./' })
            .then((registration) => {
                console.log('Registration completed successfully',registration);
            })
            .catch((error) => {
                console.log('Registration failed', error);
            })
     })}

---

它不仅必须位于index.js和app.js旁边，还必须位于应用程序的根目录中。所以，如果你的index.js或app.js恰好在一个文件夹中，比如说js，它就不会工作。只需将serviceWorker.js与index.html放在同一目录中，并请在服务器中运行它

为什么会这样？ 我不是这方面的专家，但我知道服务人员习惯于在脱机场景中为您的所有文件提供服务。如果你把它作为一个相对路径，那么要映射到外部的所有其他文件是很困难的

---

这不是一条规则，但是你可以找到一种方法把你的服务工作者放在一些子文件夹中，但是我个人认为这不是最好的实践

< P>服务人员被用来缓存资产和其他文件，这样在网络缓慢或用户离线的情况下，结果可以在屏幕上呈现。这将带来更好的用户体验

有关详细信息，请访问：-

---

这是在index.js上完成的，如果您使用的是最新的CRA版本，则只需修改

serviceWorker.unregister（）中的最后一行即可到
serviceWorker.register（）
它不仅必须位于
index.js
和
app.js
旁边，还必须位于应用程序的根目录中。因此，如果你的
index.js
或
app.js
在文件夹中，比如说
js
，它就不会工作。只需将
serviceWorker.js
放在与
index.html
相同的目录中，并请在服务器中运行它。将此添加为答案，它就可以工作了。但我不明白为什么这样的安排如此重要。假设我有10名服务人员，从语义的角度来看，将他们与.html文件放在一起并不好。最好制作一个服务人员文件夹，并指明通往它的路。但此方法不起作用。无论您编写了多少服务工作人员，浏览器都只会注册一个工作人员，并且在您注册另一个工作人员时，它将替换上一个工作人员。这反过来会导致您只编写一个优秀的服务人员。如果您需要10名服务人员，那么您的代码/设计肯定有问题。我想强调的是，“它必须位于应用程序的根目录中”，我的案例就是我的Amazon EC2 web服务器的根目录。我在这方面工作了整整一周，只有andylamax对服务人员的工作地点要求做了说明。谢谢你，安迪！