为 Service Worker 添加缓存更新刷新提示

2020-08-25 约 526 字预计阅读 2 分钟

前面 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) 都可以触发。

唯一美中不足的地方就是首次进入博客会提示刷新，因为首次进入博客缓存必然会有变动……