https://time-friend.com/zh/tags/service-worker/Recent content in Service Worker on Time FriendHugozh-CNTue, 08 Jul 2025 15:30:00 +0000https://time-friend.com/zh/archive/blog-architecture-service-worker/Tue, 08 Jul 2025 15:30:00 +0000https://time-friend.com/zh/archive/blog-architecture-service-worker/<p>PWA 是个 buzzword, 说白了这个博客用到的 PWA 功能就两个: manifest.json 和 Service Worker. manifest.json 让浏览器知道&quot;这是个应用&quot;, Service Worker 让它在离线时也能工作.</p> <p>这篇重点说 Service Worker, 因为它比较复杂. manifest.json 很简单, 放在最后说.</p> <h1 id="service-worker-是什么">Service Worker 是什么</h1> <p>简单说, Service Worker 是一个运行在浏览器背后的脚本. 它独立于网页, 在后台默默干活.</p> <p>你可以把它理解为<strong>浏览器和网络之间的中间人</strong>. 正常情况下, 浏览器请求一个资源 (HTML, JS, 图片), 直接去服务器拿. 有了 Service Worker, 请求会先经过它:</p> <pre tabindex="0"><code>浏览器 → Service Worker → 网络 (或缓存) </code></pre><p>Service Worker 可以决定: 这个请求是去网络拿, 还是直接从本地缓存返回, 还是两者都做.</p> <p>这个博客的 Service Worker 就是用 Workbox 生成的, 大约 5KB.</p> <h1 id="有什么用">有什么用</h1> <h2 id="离线访问">离线访问</h2> <p>这是最核心的功能. 如果用户访问过一次博客, Service Worker 会把静态资源缓存下来. 下次即使没有网络, 也能打开之前看过的文章.</p>