如何注册服务工作者？

Question

我无法注册Service Worker。该文件与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);
            })
     })}

- J.Michael

---

它不仅需要与 index.js 和 app.js 并列，而且必须位于应用程序的根目录中。因此，如果您的 index.js 或 app.js 在名为 js 的文件夹中，它将无法正常工作。只需将 serviceWorker.js 放在与 index.html 相同的目录中，并请在服务器上运行它。 - andylamax

将此作为答案添加，它有效。但我无法理解为什么这样的安排很重要。 - J.Michael

Answer 1

它不仅需要与index.js和app.js并列，而且还必须在应用程序的根目录中。因此，如果你的index.js或app.js在一个名为js的文件夹中，它将无法工作。只需将serviceWorker.js放在与index.html相同的目录中，并请在服务器上运行它。

为什么是这样呢？ 我不是这方面的专家，但我知道service worker用于在离线场景下提供所有文件。如果您将其作为相对路径放置，则很难映射到外部的所有其他文件。

尽管如此，这并不是一条规则，你可以找到一种方法将你的serviceWorker放在某个子文件夹中，但我个人认为这不是最佳实践。

- andylamax

---

假设我有10个服务工作者，从语义的角度来看，将它们与.html文件放在一起并不好。最好创建一个服务工作者的文件夹并指向它。但是这种方法行不通。 - J.Michael

无论你写了多少个 service worker，浏览器只会注册其中一个。当你注册另一个 worker 时，它会替换之前的那个。这意味着你只需要编写一个优秀的 service worker。如果你需要 10 个 service worker，那么你的代码/设计肯定有问题。 - andylamax

希望强调“它必须在您的应用程序根目录下”，在我的情况下是Amazon EC2 Web服务器的根目录。我花了整整一周的时间来研究这个问题，而andylamax是唯一一个提到服务工作者位置要求的人。非常感谢Andy！ - E.Bradford

Answer 2

Service Workers用于缓存资源和其他文件，以便在网络缓慢或用户离线的情况下可以渲染结果并显示在屏幕上。这会带来更好的用户体验。

详情请访问： https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

这是在index.js中完成的，如果您正在使用最新的CRA版本，只需将最后一行从serviceWorker.unregister();修改为serviceWorker.register();

- SAURABH