Service Worker 是 Chrome 团队提出和力推的一个 WEB API，用于给 web 应用提供高级的可持续的后台处理能力。该 WEB API 标准起草于 2013 年，于 2014 年纳入 W3C WEB 标准草案，当前还在草案阶段。
Service Worker 最主要的特点是：在页面中注册并安装成功后，运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。
效果
https://www.liumingye.cn/
- 1.png (123.5 KiB) 查看 2529 次
前提
网站需要开闭HTTPS
安装
一丶下载
下载https://www.liumingye.cn/service-worker.js，放到你网站的根目录
二丶添加JS
代码： 全选
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js?v=20180503');
}
</script>插入到你的主题footer.php里面
三丶配置黑名单
编辑 service-worker.js
第11行的/(admin|hm\.baidu\.com)/
添加链接关键字，多个用|隔开
四丶兼容评论
1.编辑header.php，在<!DOCTYPE html>前插入。如图
代码： 全选
<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "XMLHttpRequest" && ($this->is('post')||$this->is('page')) && stripos($_SERVER['HTTP_REFERER'], $_SERVER['SERVER_NAME'])) {
header('HTTP/1.1 200 OK');
ini_set("display_errors", 1);
$this->response($this->need('comments.php'));
}
?>- 1 - 副本.png (21.57 KiB) 查看 2529 次
2.添加JS
代码： 全选
function loadComments(a) {
if ($('#comments').length > 0) {
var url = a || window.location.href;
$.ajax
({
type: 'POST',
url: url.match(/[^#]*/),
success: function (data) {
$("#comments").html(data);
var dom = a ? $('#comments') : $(String(url.match(/#comment-[\d]*/)));
if(dom.length||a){
$("html, body").animate({
scrollTop: dom.offset().top + "px"
}, 200);
}
$('a','.page-navigator').each(function(){
$(this).attr('onclick','loadComments("'+$(this).attr('href')+'")');
$(this).removeAttr('href');
});
//ajaxc();
}
});
}
}
loadComments();3.删除post.php和page.php里面的
代码： 全选
<?php $this->need('comments.php'); ?>网站渐进式增强体验(PWA)改造：Service Worker 应用详解
http://lzw.me/a/pwa-service-worker.html
没有弄定时删除缓存，主要是我也不怎么写博文。
手动删除缓存，修改js里的version就行了。
