Hexo配置SWPP实现PWA

碎碎念

前些天，我对网站的样式进行了优化，包括关于页面、顶栏特效和左上角菜单等。然而，每次修改后，都需要手动按 Ctrl+F5 强制刷新缓存，虽然操作不复杂，但有些朋友可能并不知道 Ctrl+F5 可以强制刷新，导致页面样式异常。同时，浏览器会缓存样式文件，虽然缓存了内容，却没有得到充分利用。因此，我决定配置 SW 来实现更精细的控制。

恰好，空梦 大佬开发了一个功能更丰富、更加可控的 SWPP。相比于传统 SW，SWPP 支持 增量更新、URL 竞速、备用 URL 等强大特性。于是，我连夜缠着大佬帮我配置，最终顺利实现，真的非常感谢空梦的帮助！

可能你对这些概念还不太熟悉？别急！接下来我会逐一讲解。本篇教程的目标是让大家能够 零门槛 配置 SWPP，可能不会涉及一些晦涩的知识，当然我也不是很懂，如果你对底层原理感兴趣，欢迎阅读官方文档！

简单介绍

原生SW

可能很多人对 SW（Service Worker）并不了解，甚至没听说过它的作用。简单来说，SW 是一种运行在浏览器后台的独立脚本，能够拦截和控制页面的网络请求，实现资源缓存、后台同步、推送通知等功能。

在默认情况下呢，浏览器会根据 HTTP 头的缓存策略来决定资源的缓存时间，但这些缓存并不受开发者的直接控制，而是由浏览器自行管理。而 SW 允许开发者通过编写脚本，精确控制哪些资源应该缓存、缓存多久、何时更新等，提供了更灵活的缓存管理能力。

你可以尝试在你的网站上修改一个CSS样式，然后推送到网站上，在缓存等全部刷新后，进入网站，样式仍然无法生效，需要手动强制刷新才能显示最新的效果，这就是浏览器的默认缓存，我们所要做的就是合理利用这部分内容，使网站更新更及时，更加节省流量，加载速度更快。

下面是原生SW的官方文档，你会发现比SWPP的理论性知识还枯燥难懂……