如何注册 Service Worker？

推荐答案

// www.javascriptcn.com code example
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker 注册成功: ', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker 注册失败: ', error);
    });
}

本题详细解读

1. 检查浏览器支持

在注册 Service Worker 之前，首先需要检查浏览器是否支持 Service Worker。可以通过检查 navigator.serviceWorker 是否存在来实现：

if ('serviceWorker' in navigator) {
  // 支持 Service Worker
}

2. 注册 Service Worker

如果浏览器支持 Service Worker，可以通过 navigator.serviceWorker.register() 方法来注册 Service Worker。该方法接受一个参数，即 Service Worker 脚本的路径：

navigator.serviceWorker.register('/service-worker.js')

3. 处理注册结果

register() 方法返回一个 Promise，可以通过 .then() 和 .catch() 来处理注册成功和失败的情况：

navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    console.log('Service Worker 注册成功: ', registration.scope);
  })
  .catch(function(error) {
    console.log('Service Worker 注册失败: ', error);
  });

• registration.scope: 表示 Service Worker 的控制范围。
• error: 如果注册失败，会返回一个错误对象，包含失败的原因。

4. Service Worker 脚本路径

Service Worker 脚本的路径决定了它可以控制的页面范围。例如，如果脚本路径为 /service-worker.js，那么它可以控制根路径 / 下的所有页面。如果路径为 /js/service-worker.js，则只能控制 /js/ 路径下的页面。

5. 注意事项

• Service Worker 只能在 HTTPS 或 localhost 环境下运行。
• Service Worker 脚本必须与页面同源，或者位于允许的跨域路径下。
• Service Worker 一旦注册成功，就会在后台运行，即使页面关闭也不会停止。