Posts List

Service Worker 基础知识

本文旨在帮你快速了解 service worker 的基本知识点,让你对 service worker 有一个大致的了解。为以后开发一个简单的 PWA 应用打下基础。 关于 service worker 的几个基本知识点 它是一个可编程的网络代理,让你可以控制页面请求的处理方式。 它是一个 JavaScript Worker,因此它无法直接操作 DOM。但可以通过 postMessage 接口与页面通信。同时,service worker 中的代码不会阻塞页面响应。 它在闲置时被终止,在需要时被启动。并不是常驻内存。因此你不能在 onfetch 或是 onmessage 回调中依赖全局状态。 被设计成完全异步。因此在 service worker 中无法使用同步 API (例如同步 XHR,localStorage等)。接口重度依赖于 promise。 只能在 HTTPS 页面加载(唯一的例外:localhost/127.0.0.1,方便调试)。 Service worker 的作用域 一个 service worker 的默认作用域是这个 service worker 脚本所在的目录。例如 https://example.com/sw.js 脚本默认就是 https://example.com 下的所有页面。 你也可以在注册 service worker 时明确指定作用域: navigator.serviceWorker.register('sw.js', { scope: './abc' }); 假设以上代码在 https://example.com 页面里执行,则意味着该 service worker 的作用域就是 https://example.