JavaScript 一个简单的服务工人


本文向大家介绍JavaScript 一个简单的服务工人,包括了JavaScript 一个简单的服务工人的使用技巧和注意事项,需要的朋友参考一下

示例

main.js

服务工作者是根据事件和原点和路径注册的工作者。它采用JavaScript文件的形式,该文件可以控制与其关联的网页/站点,以非常精细的方式拦截和修改导航和资源请求,以及缓存资源,从而使您可以完全控制应用在某些情况下的行为(最明显的情况是网络不可用时。)

资料来源:MDN

几样东西:

  1. 这是JavaScript工作者,因此无法直接访问DOM

  2. 这是一个可编程的网络代理

  3. 它在不使用时将终止,并在下次需要时重新启动

  4. 服务人员的生命周期与您的网页完全独立

  5. 需要HTTPS

此代码将在Document上下文中执行,(或)此JavaScript将通过<script>标签包含在您的页面中。

// 我们检查浏览器是否支持ServiceWorkers
if ('serviceWorker' in navigator) {
  navigator
    .serviceWorker
    .register(
      // 服务工作者文件的路径
      'sw.js'
    )
    // 注册是异步的,它返回一个promise
    .then(function (reg) {
      console.log('Registration Successful');
    });
}

sw.js

这是服务工作者代码,在ServiceWorker全局范围中执行。

self.addEventListener('fetch', function (event) {
  // 在这里什么也不做,只记录所有网络请求
  console.log(event.request.url);
});