service work 缓存

情景描述

• 我们使用create react app产生一个前端项目。
• 直接导致的问题就是，上一次成功的从服务器拿到的response。当服务器未开启或者服务有问题，在同一浏览器再次打开仍然能够拿到从服务器获取的response。
• 这严重影响到了开发。但是在我的知识体系中认为这是缓存造成的。

矛盾点

• 服务器如果坏了，也就意味着数据请求不到。但是我们的前端页面却可以在服务器坏的时候拿到数据。那么这是缓存机制造成的还是是什么？
• 打开chrome tool application发现针对数据存储其中包含：Cache LocalStorage sessionStorage service works cookie 以及到底他们的作用机制有什么不同，造成当前原因的到底是什么？

问题解答

• Q1:总是提到缓存，缓存是什么，什么作用，所谓的清除缓存是清除什么，以及缓存的可用时间可用位置都是什么？
• A1:缓存的相关信息
  • 这里我想说的缓存其实是web缓存机制
  • web缓存：是指一个Web资源（如html页面，图片，js，数据等）存在于Web服务器和客户端（浏览器）之间的副本
  • 缓存的作用：用于快速读取资源或者避免重复请求资源
  • 缓存本质：可以理解成客户端（浏览器）拥有一个小型的数据库，将从服务器读取过来的资源存在本地（浏览器）数据库中。当用户请求资源的时候，首先访问本地数据库中是否包含可用数据，有则直接提出，没有再向服务器发送请求。这不仅可以避免重复请求而且对于用户而言可以加快请求处理速度
  • HTML5提供的缓存机制：有很多种类其中包含：http（浏览器）缓存、websql、indexDb、cookie、localStorage、sessionStorage、application cache、cacheStorage
  • 而缓存的可用时间以及位置都是根据不同的缓存方式决定的

---

• Q2:那么我们出现的这种缓存是哪一种缓存呢？
• A2:我们这里的缓存应该是运用了service work。

---

• Q3:是什么是service worker?
• A3:我想把它理解成一个运行在浏览器后端的小型服务器，针对浏览器通过fetch发出的请求，他可以做到拦截请求，发回自己的响应。这就类似于浏览器给浏览器自身发送请求。但是对于页面或者浏览器而言，这和他发送到后端的请求没什么区别。因此可以将Service worker理解成浏览器服务器。

---

• Q4:那么create-react-app是什么时候为我们加上这个service worker的？
• A4:
  • 这是create react app为我们在代码中自动加入的。我们可以选择不注册service work即可。
  • 方式通过在index.html中直接将registerServiceWorker();删除即可.现在也明白了为什么create react APP非要使用fetch，因为ServiceWorker可以劫持fetch发送的请求。

反思

• 作为前端dev，竟然前端基础知识缺失那么多。还是源于没有系统学习。总是get到一个点之后，就学习这个一点。类似于树型结构就学了树杈上的一个点。现在如果想要做到基础知识的补充必须学会先从树杈向上爬，爬到最近的交汇点，然后系统的向下学习，积累多了应该就可以点连成线了。

ACTION

• 以后每一个知识点。先要归类。归到最近的知识块中。然后反问自己是否对这个知识块了解。如果不懂，要求自己吧整个知识块全部弄明白