注意

  本教程基于Butterfly主题实现，如果读者使用的不是该主题，请根据自己情况修改代码。

修改SW

  如果前面按照我的实现（《基于Butterfly的PWA适配》）创建了sw.js，那么完全按照我的内容走就可以了。如果你没有sw.js或者没有使用我的sw.js，那么请跳过这一步骤。

  向sw.js中添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//想要使用该功能的话需要在js中调用
//  navigator.serviceWorker.addEventListener('message', function())
//  navigator.serviceWorker.controller.postMessage("refresh")
//前者是用于在删除缓存后触发reload()，后者是触发删除缓存的操作
self.addEventListener('message', function (event) {
    //刷新缓存
    if (event.data === 'refresh') {
        caches.open(CACHE_NAME).then(function (cache) {
            cache.keys().then(function (keys) {
                for (let key of keys) {
                    const value = findCache(key.url)
                    if (value == null || value.clean || !dbAccess.check(key.url)) {
                        // noinspection JSIgnoredPromiseFromCall
                        cache.delete(key)
                        dbTime.delete(key)
                    }
                }
                event.source.postMessage('success')
            })
        })
    }
})

  上面这个代码用到的全局变量都是在另一个博文《基于Butterfly的PWA适配》中使用的。

添加按钮

  打开[butterfly]\layout\includes\rightside.pug，修改以下内容（注意保持缩进）：

1
2
3
4
5
6
7
8
9
10
11
    when 'chat'
      if chat_btn
        button#chat_btn(type="button" title=_p("rightside.chat_btn"))
          i.fas.fa-sms
    when 'comment'
      if commentsJsLoad
        a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
          i.fas.fa-comments
+   when 'refresh'
+     button#refresh-cache(type="button" title='刷新缓存' onclick="refreshCache()")
+       i.fas.fa-refresh.fa-spin
1
2
3
4
5
  #rightside
    - const { enable, hide, show } = theme.rightside_item_order
-   - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
+   - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside', 'refresh']
    - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']

添加JS

  新建：[butterfly]\source\js\custom\refresh.js，写入以下内容：

location.reload(true)相当于按Ctrl + F5

  如果你按照我上面的内容修改了sw.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
function refreshCache() {
    if ('serviceWorker' in window.navigator && navigator.serviceWorker.controller) {
        if (confirm('是否确定刷新博文缓存')) navigator.serviceWorker.controller.postMessage("refresh")
    } else if (GLOBAL_CONFIG.Snackbar) {
        btf.snackbarShow('ServiceWorker未激活')
    } else {
        alert('ServiceWorker未激活')
    }
}

navigator.serviceWorker.addEventListener('message', event => {
    if (event.data === 'success') location.reload(true)
})

  如果你跳过了sw.js的修改：

1
2
3
function refreshCache() {
    if (confirm('是否确定刷新博文缓存')) location.reload(true)
}

  然后在配置文件中引入JS：

1
- <script async src="/js/custom/refresh.js"></script>

有无sw对比

  如果你完全按照我的教程编写了sw.js，那么刷新缓存按钮可以直接刷掉所有想刷掉的sw缓存以及浏览器的本页缓存。如果你不需要刷新浏览器的本页缓存，那么可以把location.reload(true)改为location.reload()来改善性能。

  如果你没有按照上面的教程修改sw.js，那么刷新按钮将只能刷掉浏览器的本页缓存，即时你有sw.js并且其会控制缓存，刷新按钮也无法刷新掉sw.js控制的缓存。