这些天，在准备Google移动专家认证考试的同时，必须学习如何开发PWA（渐进式Web应用程序）。
PWA的开发包括：
1.响应式Web设计，又称RWD（媒体查询，图像响应，断点，网格，Flexbox）
2.制作应用程序的最佳做法（可访问性，优化）
3.服务人员（客户端和服务器之间的网络代理）
我将首先在这里谈论服务人员。
服务人员可以拦截要发送给服务器的用户请求，也可以按照我们的命令更改请求。 举个简单的例子：当服务器处于脱机状态并且没有响应时，我想显示“ Customized Offline”消息，而不是T-Rex Game
SW是基于事件的过程，可在客户端的浏览器上工作。
- 注册（使用navigator.serviceWorker）
- 安装（引入新的软件后，有机会将文件添加到缓存中）
- 激活（引入新的软件时，有机会删除旧的缓存文件）
- 提取（它运行的每个页面加载，这里有机会拦截网络请求）
使用SW的最佳技术是“ 缓存优先” 。 意味着首先检查缓存中的文件（如果不可用，然后从网络获取）。
self.addEventListener（'fetch'，fetchEvent => {
const request = fetchEvent.request;
fetchEvent.respondWith（
//首先从缓存中检查
caches.match（请求）
.then（responseFromCache => {
如果（responseFromCache）{
返回responseFromCache
}
}）//否则从网络获取
返回fetch（request）; ）//结束responseWith}）;
就像我们可以从网络中离线获取一样，然后显示自定义的离线页面
self.addEventListener（'fetch'，fetchEvent => {
const request = fetchEvent.request;
fetchEvent.respondWith（
返回获取（请求）
//从缓存中获取离线页面
.catch（错误=> {
返回caches.match（'/ offline.html'）;
//安装事件时页面必须保存在缓存中
}）; ）//结束responseWith}）;
甚至我们也可以将图像缓存在单独的缓存中，以便在您的软件中更好地管理缓存。
if（request.headers.get（'Accept'）。includes（'image'））{//首先克隆图像请求
const copy = responseFromFetch.clone（）;
fetchEvent.waituntil（
caches.open（imageCacheName）
.then（imageCache => {//保存在缓存中
返回imageCache.put（请求，复制）
}）
）;}
因此，就像使用乐高积木一样，在需要使用该积木以满足您的需求的地方。 因此，只要考虑一下任何块结构，然后再实现即可。
希望这能给您有关服务人员的概述
