---
title: serviceworkers简单配置
description: Service Workers本质上是一种能在浏览器后台运行的独立线程，它能够在网页关闭后持续运行。Service Workers能够拦截网络请求并根据网络是否
author: chaihongjun
category: frontend
published: 2018-06-08
url: https://chaihongjun.me/frontend/15.html
---

# serviceworkers简单配置

Service Workers本质上是一种能在浏览器后台运行的独立线程，它能够在网页关闭后持续运行。Service Workers能够拦截网络请求并根据网络是否可用来采取适当的动作，更新来自服务器的资源，从而实现拦截和加工网络请求、消息推送、静默更新、事件同步等一系列功能。它是PWA（Progressive Web Apps，渐进式网络应用）应用的核心技术之一。它能够缓存网站资源，实现离线访问，能拦截网络请求，优化网络性能，因此利用这些优势去优化。

参考网站：

[https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API)

这篇文章不在详细介绍Service Workers的前世今生，只利用它的缓存特性提升网站性能，这里我们只建立白名单，将需要缓存的内容都放入其中。

![e5871dd9d89130c4d42696576a40a84d.gif](https://chaihongjun.me/public/uploads/images/20240829/1724894258669875.gif)

创建一个脚本：
MDBLOCK0
以上代码写入需要优化的页面，用于在页面范围内注册Service Workers，注意代码内serviceworker.js这个文件的路径，这个文件用于实际编写缓存规则等配置。

接着编写serviceworker.js:
MDBLOCK1
urlsToCache里面是需要缓存的文件（白名单形式），特别注意，跨域的资源是无法缓存的。

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/15.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。