开启Service worker,使网页支持离线访问

本站已启用Service worker,本页作为缓存页出现,离线状态下仍可访问本页面。

2018-02-14 更新
使用google的工具库来实现sw。具体方法直接访问本站根目录下的sw.js吧。用webpack打包的方式太“蠢”了,我放弃了。

!!! note 提示
下面的内容已经过时,可看可不看。本篇博客的精修版以后再说吧。。。

使用Service worker实现加速/离线访问静态blog网站
将sw.js放入/themes/yilia/source-src/js/具体更改
更改webpack配置文件/themes/yilia/source-src/webpack.config.js具体更改
更改/themes/yilia/source-src/script.ejs具体更改

1
2
3
4
5
if ('serviceWorker' in navigator) {
var $script = document.createElement('script')
document.getElementsByTagName('body')[0].appendChild($script)
$script.innerHTML = 'navigator.serviceWorker.register("<%= left %>config.root<%= right %><%= right2 %><%= serviceworker %>");'
}

最后不要忘记npm run devnpm run dist

由于sw和APlayer、DPlayer兼容性太差,作为一个Javaer实在调试不过来,遂决定暂时放弃sw。
兼容性太差的具体表现如下

  1. 快速拖拽进度条100%出现音频无法播放
  2. Dplayer无法读取sw缓存的视频,进而导致无法播放视频
  3. 偶尔莫名其妙无法调节进度

开启Service worker,使网页支持离线访问

https://blog.zscself.com/posts/3e16aa00/

作者

F!redent

发布于

2017-03-30

更新于

2024-01-30

许可协议

CC BY-NC-SA 4.0

评论