# 概述

Service workers 本质上充当 Web 应用程序、浏览器与网络(可用时)之间的代理服务器。这个 API 旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用采取来适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。

# 概念

Service worker 是一个注册在指定源和路径下的事件驱动的 worker。它采用 JavaScript 控制关联的页面或者网站,拦截并修改访问和资源请求,细粒度的缓存资源

Service worker 运行在 worker 上下文, 运行在其他的线程中,完全异步的设计思路;不能使用 XHR localStorage 等 API, 同时也不能操作 DOM

Service worker 只能运行在 HTTPS 的环境下(localhost, 127.0.0.1 也中),因为它可以修改网络请求,太危险了。

# 核心流程

# 注册

如果注册成功, service worker 会被下载到客户端,并尝试安装激活等。

# 下载

首次访问 service worker 控制的网站或页面是, service worker 会被立刻下载。

# 安装

第一次下载或者与现有的 service worker 不同(字节对比)

  • 首次下载, 安装完成后,会触发激活
  • 如果现有 service worker 已经启动的话,新版本会在后台安装,但不会激活。知道所有加载的页面不再使用旧的 service worker 才会激活新的 service worker。(理解不了)

对于安装到激活,可以直接跳过等待过程的,后面会提到,并且发现很多示例也是这么做的

在安装过程主要是做预加载的工作。

# 激活

到了激活状态,说明了新的 service worker 已经被启动, 包括后面的 fetch 事件也是新的方法。在激活事件中,主要做清理工作。