使用 Service worker 实现加速/离线访问静态 blog 网站
sztown
8年前
<p>现在很流行基于 GitHub page 和 markdown 的静态 blog，非常适合技术的思维和习惯，针对不同的语言都有一些优秀的静态 blog 系统出现，如 Jekyll/Ruby，Pelican/Python，Hexo/NodeJs，由于静态内容的特性非常适合做缓存来加速页面的访问，就利用 Service worker 来实现加速，结果是除了 PageSpeed，CDN 这些常见的服务器和网络加速之外，通过客户端实现了更好的访问体验。</p> <p>加速/离线访问只需三步</p> <p>1. 首页添加注册代码</p> <p><img src="https://simg.open-open.com/show/8116ee8fedd7cd70c73653bdd80ec7bd.png"></p> <p>2. 复制代码</p> <p>将 https://alphayang.github.io/sw.js 保存到你的网站根目录下。</p> <p>3. 修改不缓存域名列表及离线状态页面</p> <p>在你的 sw.js 中修改</p> <p><img src="https://simg.open-open.com/show/d04fc7129fa4068ef151997e58cc9f5e.png"></p> <p>打开 Chrome Dev Tools->Source，看看自己的 blog 都引用了哪些第三方资源，逐个加到忽略列表里。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6ce16db53af183e077d63d1f4d4fc920.jpg"></p> <p>在根目录下添加 offline.html，在没有网络且缓存中也没有时使用，效果如下：</p> <p><img src="https://simg.open-open.com/show/6c83cf4456f8246bb9696885dd842493.jpg"></p> <p>在根目录下添加 offline.svg，在无网络时图片资源请求返回该文件。</p> <p>4. 加速效果</p> <p>首页加速后，网络请求从 16 降为 1，加载时间从 2.296s 降为 0.654s，得到了瞬间加载的结果。</p> <p><img src="https://simg.open-open.com/show/56ff7e0f76d9093e861610fba5584e94.jpg"></p> <p>加速/离线原理探索</p> <p>什么是 Service worker?</p> <p><img src="https://simg.open-open.com/show/b570cecbbdb4bee3c74f7591d43227a3.jpg"></p> <p>如上图，Service worker 是一种由 Javascript 编写的浏览器端代理脚本，位于你的浏览器和服务器之间。当一个页面注册了一个 Service worker，它就可以注册一系列事件处理器来响应如网络请求和消息推送这些事件。Service worker 可以被用来管理缓存，当响应一个网络请求时可以配置为返回缓存还是从网络获取。由于 Service worker 是基于事件的，所以它只在处理这些事件的时候被调入内存，不用担心常驻内存占用资源导致系统变慢。</p> <p>Service worker 生命周期</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7f7e7b5c0ecac5f9d72f49db8837bc5c.png"></p> <p>Service worker 为网页添加一个类似于 App 的生命周期，它只会响应系统事件，就算浏览器关闭时操作系统也可以唤醒 Service worker，这点非常重要，让 Web App与 Native App 的能力变得类似了。</p> <p>Service worker 在 Register 时会触发 Install 事件，在 Install 时可以用来预先获取和缓存应用所需的资源并设置每个文件的缓存策略。</p> <p>一旦 Service worker 处于 activated 状态，就可以完全控制应用的资源，对网络请求进行检查，修改网络请求，从网络上获取并返回内容或是返回由已安装的 Service worker 预告获取并缓存好的资源，甚至还可以生成内容并返回给网络语法。</p> <p>所有的这些都用户都是透明的，事实上，一个设计优秀的 Service worker 就像一个智能缓存系统，加强了网络和缓存功能，选择最优方式来响应网络请求，让应用更加稳定的运行，就算没有网络也没关系，因为你可以完全控制网络响应。</p> <p>Service worker 的控制从第二次页面访问开始</p> <p>在首次加载页面时，所有资源都是从网络载的，Service worker 在首次加载时不会获取控制网络响应，它只会在后续访问页面时起作用。</p> <p><img src="https://simg.open-open.com/show/2ad3a4614c5f076467bfe685f6c462a1.jpg"></p> <p>页面首次加载时完成 install，并进入 idle 状态。</p> <p><img src="https://simg.open-open.com/show/c907908adee1e1fb5e8ac0c51ed012d1.jpg"></p> <p>页面第二次加载时，进入 activated 状态，准备处理所有的事件，同时 浏览器会向服务器发送一个异步 请求来检查 Service worker 本身是否有新的版本，构成了 Service worker 的更新机制。</p> <p><img src="https://simg.open-open.com/show/0732d6247991f58a212c26dc1f9a96ef.jpg"></p> <p>当 Service worker 处理完所有的事件后，进入 idle 状态，最终进入 terminated 状态资源被释放，当有新的事件发生时再度被调用。</p> <p>特点</p> <ul> <li> <p>浏览器:Google Chrome，Firefox，Opera 以及国内的各种双核浏览器都支持，但是 safari 不支持，那么在不支持的浏览器里 Service worker 不工作。</p> </li> <li> <p>https:网站必须启用 https 来保证使用 Service worker 页面的安全性，开发时 localhost 默认认为是安全的。</p> </li> <li> <p>non-block:Service worker 中的 Javascript 代码必须是非阻塞的，因为 localStorage 是阻塞性，所以不应该在 Service Worker 代码中使用 localStorage。</p> </li> <li> <p>单独的执行环境:Service worker 运行在自己的全局环境中，通常也运行在自己单独的线程中。</p> </li> <li> <p>没有绑定到特定页面:Service worker 能控制它所加载的整个范围内的资源。</p> </li> <li> <p>不能操作 DOM:跟 DOM 所处的环境是相互隔离的。</p> <p><img src="https://simg.open-open.com/show/02cc99ce531e067ca14cafcc54685075.jpg"></p> </li> <li> <p>没有浏览页面时也可以运行:接收系统事件，后台运行。</p> </li> <li> <p>事件驱动，需要时运行，不需要时就终止:按需执行，只在需要时加载到内存。</p> </li> <li> <p>可升级:执行时会异步获取最新的版本。</p> </li> </ul> <p>实现加速/离线</p> <p>Cache</p> <p>网页缓存有很多，如 HTTP 缓存，localStorage，sessionStorage 和 cacheStorage 都可以灵活搭配进行缓存，但操作太繁琐，直接使用更高级 Service worker –本文的主人公。</p> <p>添加 Service worker 入口</p> <p>在 Web App 的首页添加以下代码</p> <p><img src="https://simg.open-open.com/show/5c7efb7a25c180d591c789ae9babb4e7.png"></p> <p>如果浏览器支持 Service worker 就注册它，不支持还是正常浏览，没有 Service worker 所提供的增强功能。</p> <p>Service worker 控制范围：</p> <p>简单情况下，将 sw.js 放在网站的根目录下，这样 Service worker 可以控制网站所有的页面，同理，如果把 sw.js 放在 /my-app/sw.js 那么它只能控制 my-app 目录下的页面。</p> <p>把 sw.js 放在 /js/ 目录呢？更好的目录结构和范围控制呢？在注册时指定 js 位置并设置范围。</p> <p>navigator.serviceWorker.register('/js/sw.js', {scope: '/sw-test/'}).then(function(registration) {</p> <p>// Registration was successful</p> <p>console.log('ServiceWorker registration successful with scope: ', registration.scope);</p> <p>}).catch(function(err) {</p> <p>// registration failed :(</p> <p>console.log('ServiceWorker registration failed: ', err);</p> <p>});</p> <p>Service worker 实现</p> <p>监听三个事件：</p> <p><img src="https://simg.open-open.com/show/1470aafb52fe354f9072480a100bd8dc.png"></p> <p>install</p> <p><img src="https://simg.open-open.com/show/274e357afe4381cffd34e235e6d01e08.jpg"></p> <p>install 时将所有符合缓存策略的资源进行缓存。</p> <p>fetch</p> <p><img src="https://simg.open-open.com/show/eb5fa06383e49bffeba61b7c03913aa2.jpg"></p> <p>onFetch 做为浏览器网络请求的代理，根据需要返回网络或缓存内容，如果获取了网络内容，返回网络请求时同时进行缓存操作。</p> <p>activate</p> <p>///////////</p> <p>// Activate</p> <p>///////////</p> <p>function onActivate(event) {</p> <p>log('activate event in progress.');</p> <p>event.waitUntil(removeOldCache());</p> <p>}</p> <p>function removeOldCache() {</p> <p>return caches</p> <p>.keys()</p> <p>.then((keys) => {</p> <p>return Promise.all( // We return a promise that settles when all outdated caches are deleted.</p> <p>keys</p> <p>.filter((key) => {</p> <p>return !key.startsWith(version); // Filter by keys that don't start with the latest version prefix.</p> <p>})</p> <p>.map((key) => {</p> <p>return caches.delete(key); // Return a promise that's fulfilled when each outdated cache is deleted.</p> <p>})</p> <p>);</p> <p>})</p> <p>.then(() => {</p> <p>log('removeOldCache completed.');</p> <p>});</p> <p>}</p> <p>在 activate 时根据 version 值来删除过期的缓存。</p> <p>管理 Service worker</p> <p>特定网站</p> <p>1) Google Chrome</p> <p>Developer Tools->Application->Service Workers，</p> <p><img src="https://simg.open-open.com/show/2ce66e3ccf64a6504428f94ee55f5607.jpg"></p> <p>在这里还有三个非常有用的复选框：</p> <ul> <li> <p>Offline: 模拟断网状态</p> </li> <li> <p>Update on reload: 加载时更新</p> </li> <li> <p>Bypass for network: 总是使用网络内容</p> </li> </ul> <p>2) Firefox</p> <p>只有在 Settings 里有一个可以在 HTTP 环境中使用 Service worker 的选项，适应于调试，没有单独网站下的 Service worker 管理。</p> <p><img src="https://simg.open-open.com/show/9812798a94f3d33892db0ea1a043c58b.jpg"></p> <p>3) Opera 及其它双核浏览器同 Google Chrome</p> <p>如果看到多个相同范围内的多个 Service worker，说明 Service woker 更新后，而原有 Service worker 还没有被 terminated。</p> <p>浏览器全局</p> <p>看看你的浏览器里都有哪些 Service worker 已经存在了。</p> <p>1) Google Chrome</p> <p>在地址栏里输入：</p> <p>chrome://serviceworker-internals/</p> <p>可以看到已经有 24 个 Service worker 了，在这里可以手动 Start 让它工作，也可以 Unregister 卸载掉。</p> <p><img src="https://simg.open-open.com/show/09b9b9a5ced246d6af835187e84a525f.jpg"></p> <p>2) Firefox</p> <p>有两种方式进入 Service worker 管理界面来手动 Start 或 unregister。</p> <ul> <li> <p>菜单栏，Tool->Web Developer->Service workers</p> </li> <li> <p>地址栏中输入: </p> <p>about:debugging#workers</p> </li> </ul> <p><img src="https://simg.open-open.com/show/7d1404ed332acb2a117449f379ff3ccd.jpg"></p> <p>3) Opera 及其它双核浏览器同 Google Chrome</p> <p>更多</p> <p>TODO:</p> <ul> <li> <p>Service workers 的更新需要手动编辑 version，每次发布新文章时需要编辑；</p> </li> <li> <p>使用 AMP 让页面渲染速度达到最高。</p> </li> </ul> <p>作者其他文章：</p> <p><a href="http://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652041348&idx=1&sn=c4f570dfc9a9363282bfc0b081147cbe&chksm=808d50c1b7fad9d745870e04747dc65d6797881c1f7248f0609305153153a481491ecfbffe39&scene=21#wechat_redirect" rel="nofollow,noindex">AR/VR/MR，Android开发者可以做些什么？</a></p> <p><a href="http://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652040619&idx=1&sn=30aa2b9f34a6574f4d22ce30bd15665e&chksm=808d4deeb7fac4f887dce4f4dbb67319c5161705113b43905843fee237154306405e5b425722&scene=21#wechat_redirect" rel="nofollow,noindex">Android无处不在，Android开发者大有可为</a></p> <p><a href="http://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652038684&idx=1&sn=501b373cc06f3a6b2af3113f706999b2&scene=21#wechat_redirect" rel="nofollow,noindex">与谷歌开发技术专家一起，开启“I/O地图开发技术”之旅</a></p> <p> </p> <p>来自：http://mp.weixin.qq.com/s/y8zgMC7BIhdcms7qQG4oEw</p> <p> </p>