• 欢迎访问祭夜Bug,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏本站吧
  • 已知Bug:当你从别的页面进入首页,首页会近乎空白,已确认为幻灯片问题,没空修 #流汗滑稽
  • 有页面排版问题,请到留言板反馈,谢谢!

Service Workers 实现网站加速和离线缓存

建站 祭夜ゐ 来源:Service Workers 实现网站加速和离线缓存 2年前 (2017-09-16) 486次浏览 已收录 0个评论 扫描二维码
玩这个是因为博主闲的很。。
由于本站部分页面的图片采用缩略图,故断网情况下,这些图片将无法显示

最近看到了 Service Workers 这个东西,它可以根据配置为用户缓存网站静态与动态资源:截获用户的所有网络请求,根据缓存配置来决定是从缓存还是网络获取相应资源,从而可以极大提高网页的加载速度。优点有可定制性高、不需要服务端支持、效果显著。

最后的效果就是当你第二次访问我的网站时只会加载大约80k 的资源(除去 AdSense 的情况下),这其中包括了所有图片和音频视频,这 80k 主要是 HTML 和我使用的 DPlayer 的 API。
Service Workers 实现网站加速和离线缓存

甚至可以在断开网络时访问(剪断网线试试吧):

Service Workers 实现网站加速和离线缓存

当然局限性也是有的:

只支持 HTTPS,因为可以截获用户的网络请求,需要在一个安全的环境。

兼容性不太好,点击查看兼容性报告,目前只有 Chrome Firefox Opera 和部分 Android 浏览器 支持。

Service Workers 实现网站加速和离线缓存

 

使用方法网上有很多教程,这里不赘述了,推荐这几篇吧:

使用service worker+sw-precache实现网站加速

使用Service worker实现加速/离线访问静态blog网站

Service Workers 与离线缓存


祭夜blog , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Service Workers 实现网站加速和离线缓存
喜欢 (0)

您必须 登录 才能发表评论!