你的web应用支持离线访问和策略缓存吗？

Posted 2021-04-14 JavaScript全栈

沉醉在生命的优美。看着星，想象你自己跟它们在奔驰。——哲学家，马克·奥勒留

性能始终在时间与空间上相互权衡取舍，计算机系统的优化需要借助各种缓存策略，从CPU到内存，从接口到外设。如果有一天，硬件成本和实现难度不再是阻碍，也许便没有了“优化”这个字眼。

当下，前端面临的优化与挑战更多，复杂的终端环境，各种不同的浏览器内核，尺寸不一的浏览设备，兼容要做。复杂不稳定的网络环境，越来越多的资源，优化要做。对于缓存，我们并不陌生，但是我们想有主观意识的缓存，我想缓存什么，缓存多久，缓存和请求资源的策略是什么都有自己来定，service worker 能帮我们做到。

使用 service worker 前，需要创建一份注册文件，不妨在项目下创建一个名为 sw.js 的文件

console.log('Hello, I am sw.js file')

然后在应用中通过这个文件进行注册，通过以下代码就能完成应用中 service worker 的注册，后面关于 service worker 相关的处理，在 sw.js 文件中进行。

<script> // 检查当前浏览器是否支持service workers if ('serviceWorker' in navigator) { // 确保资源加载完成，再注册service worker window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js'); }); }</script>

刷新页面，就能看到控制台打印了这句话，表示 service worker 注册成功

打开控制台 Application ，一切在掌控之中， service worker 注册成功

到这里完成了，完成了 service worker 的注册，关于其相关的配置和处理，我们一起去 sw.js 文件中定义吧！

Google推出的、标准统一api操作的、基于 service worker 的策略缓存库，它有以下几点让人称赞的特点

1.Precaching2.Runtime caching3.Strategies4.Request routing5.Background sync6.Helpful debuggin7.Greater flexibility and feature set than sw-precache and sw-toolbox

我想起了一句话，简单的概念复杂化，通俗的概念神秘化，这是为了展示自己的不凡，