序：

曾经我设想把css、js写到localStorage或者indexedDB里，实现网页的离线访问。但是尝试过发现根本不行，首先断网情况下首页是没办法访问的，其次从indexedDB里加载静态资源的异步问题处理起来也很烦，根本无法实现我想要的效果。

发现PWA应用可以完美满足我的需求。

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/

https://learn.microsoft.com/zh-cn/microsoft-edge/progressive-web-apps-chromium/

先说原理：

     客户端(Client)发送请求到服务器(Server、CDN)获取资源。虽然浏览器对部分资源如图片、css、js做了缓存，但是其他的比如html、各种api的请求是没有缓存的，每次都需要发送到服务端。

如果数据没有更新的话，每次向服务端发送一次请求，不仅需要Server端进行处理浪费计算资源，还可能需要做Server端的缓存。还需要网络传输。

所以，浏览器提供的PWA相关接口，其中最重要的概念便是Service Worker。Service Worker其实就是一个代理，当用户访问该站点的所有URL时，请求都由Service Worker进行拦截。

     既然能拦截一切请求如首页html文件、css、js和各种api接口，那我们能做的事情就多了。比如，将所有数据如html、api响应结果都存在Service Worker中或者indexedDB或者localStorage中。基于此，甚至可以将该网页站点做成完全offline，就像一个安装了的app那样可以打开、操作数据。只不过需要在第一次打开后对站点做好缓存(安装)。

# 拦截请求

# 本地数据

# 缓存策略