前面 Hexo 迁移到 Hugo 记录 中提到过怎么在 Hugo 加入 Service Worker,本文基于前面的文章源码进行修改。
要支持缓存更新提示刷新其实很简单,在博客根目录/layouts/_default/baseof.html
中加入以下代码即可,这里用了 Noty 的消息提示插件库:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| ...
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/noty.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/lib/noty.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/lib/themes/metroui.css" rel="stylesheet" type="text/css" />
<script>
// 可以这么注册 Service Worker
if ('serviceWorker' in navigator) {
// 监听 Service Worker 状态,有更新即提示
navigator.serviceWorker.addEventListener('controllerchange', function (ev) {
try {
console.log("Cache Update!");
new Noty({
type: "info",
theme: "metroui",
closeWith: ['click'],
callbacks: {
onClick: () => {
window.location.reload();
}
},
timeout: "5000",
text: "<style>#tips:link{color: #2a2a2a} #tips:visited{color: #4b0173} #tips:hover{color: #f5f5ff} #tips:active{color: #cccccc}</style><div><b>检测到站点需要更新</b></div><a id='tips' href='#' onclick='window.location.reload();'>点击刷新页面</a> 更新站点",
}).show();
}catch (e) {
}
});
...
}
</script>
...
|
效果就不放了,自己测试一下就知道了,随便改一下precache
中任意一个文件的 revision (MD5) 或者改一下Service Worker
的 suffix (version) 都可以触发。
唯一美中不足的地方就是首次进入博客会提示刷新,因为首次进入博客缓存必然会有变动……