Question

我无法注册服务人员。该文件与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);
            })
     })}

Answer 1

它不仅必须与index.js和app.js并存，而且还必须位于应用程序的根目录中。因此，如果发生这种情况，那么您的index.js或app.js位于js之类的文件夹中，它将无法正常工作。只需将serviceWorker.js与index.html放在同一目录中，然后在服务器中运行

这是为什么？我不是专家，但是我知道服务工作者习惯于在离线场景中提供所有文件。如果将其作为相对路径，则很难映射到外部的所有其他文件。

这不是规则，您可以通过某种方式找到将serviceWorker放在某个子文件夹中的方法，但我个人认为这不是最佳实践

Answer 2

服务人员用于缓存资产和其他文件，以便在网络速度慢或用户脱机的情况下可以在屏幕上呈现结果。这样可以带来更好的用户体验。

有关您可能要访问的详细信息：- https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

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

如何注册服务人员？

2 个答案: