Berd's Playground (Deprecated)

最近在 DIYGOD大佬的博客 看到了ServiceWorker这个东西:

ServiceWorker简介 from anotherhome.net

查找了 一些资料 然后参考了一下 这个博客 提供的JavaScript脚本后,终于用一下午折腾出来一个JS,如图

这个JS是基于我们站的实际情况修改的,主要是对HTML页面的离线请求与ajax离线请求做了一些优化
添加这个脚本后,网站访问速度确实得到了一定的提升,并且访问过的部分页面也可以离线访问了:

当然,对于离线状态下访问没有缓存的页面也有相应的措施:

在此放上URL: https://pl.zxda.net/sw.js 欢迎使用哦~
建议使用前针对自己的网站做一些修改,下面解释一下这几个配置项:

• 这是之前的JS中就有的一些缓存设置

  const offlineResources=[
  	// ↓无论如何都要缓存一下首页,主页都访问不了会很尴尬
  	'/',
  	// ↓缓存提示缓存不存在的页面
  	'//static.zxda.net/offline/page.html', 
  	// ↓这是ajax页面的返回数据,<s>假装服务器返回了一个失败信息</s>
  	'//static.zxda.net/offline/ajax.html',
  ];
  

• 不缓存的匹配表达式,根据网页中用到的各种请求配置

  const ignoreFetch=[
  	/https?:\/\/seal.godaddy.com\//,
  	/https?:\/\/.*.cnzz.com\//,
  	/https?:\/\/.*.googleapis.com\//,
  	/https?:\/\/.*.gstatic.com\//,
  ];
  

• 这似乎是DIYGOD自己加上的,我稍微修改了一下

  const offline={
  	// ↓图片不解释
  	img: '',
  	// ↓普通HTML页面访问不了的提示
  	page: '//static.zxda.net/offline/page.html',
  	// ↓ajax失败的离线数据
  	ajax: '//static.zxda.net/offline/ajax.html',
  };
  

• 这块是自己加上的恩,被这些正则匹配到的是特殊路径

  const specialUrls={
  	// ↓被这个匹配到的就当作ajax请求处理
  	ajax: /https?:\/\/pl.zxda.net\/ajax\//
  };
  

大概就是这么一些配置

于是我又水了一篇博客

给 ZXDA 加了个 ServiceWorker, 效果似乎还不错呢