JS（二十）Service Worker_js serviceworker ready-优快云博客

本文链接：https://blog.youkuaiyun.com/u014744118/article/details/102951794

Service Worker提供离线访问能力，充当浏览器与Web应用间的代理，拦截请求并缓存资源。它异步运行，不影响主线程，用于消息推送、后台同步等功能。注册并激活后，Service Worker在HTTPS环境下运行，可通过事件驱动控制其生命周期，实现Web应用的离线体验和性能提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

service worker要解决的问题是用户丢失网络连接，换句话说使用service worker后，当用户在离线状态也可以获得很好的用户体验。

基本概念

Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。你可以完全控制应用在特定情形（最常见的情形是网络不可用）下的表现。

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。

Service Worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。它是异步运行，所以不会对我们的js主线程造成阻塞，我们可以基于service worker实现消息推送、更新一集地理围栏等服务。它是渐进增强，使用特性嗅探浏览器来渐进增强，对不支持的浏览器不会产生影响。并且可以离线工作，让存储的数据在离线时使用。

create-react-app中的serviceWorker.js就是一个很好的例子：

// This optional code is used to register a service worker.
// register() is not called by default.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.

// To learn more about the benefits of this model and instructions on how to
// opt-in, read http://bit.ly/CRA-PWA

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 is considered localhost for IPv4.
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export function register(c