- Electron主要用于创建跨平台的桌面软件, 既然是桌面软件, 那即使是断网的情况下, 无需联网的功能也应该可以正常使用.
- 为了提升用户的体验, 我们应该能根据当前是否可以连通互联网, 对用户做出提醒(类似桌面qq
在线,离线, 的提醒) . - 为了更好的交互体验, 我们也可以将 离线不可用的功能按钮,变成灰色失效的状态.
Demo演示
源码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>检测在线或离线</title></head><body> <style> #desc { font-size: 20px; color: #44A1F8; } </style> <div id="desc"> 检测在线或离线的Demo </div> <script> window.addEventListener('online', function() { let option = { title: "有网了!", body: "机子帮你开好了, 快来上网啊~", icon: "../static/online.ico", }; // 创建上线通知 new window.Notification(option.title, option); console.log('有网络了'); }) window.addEventListener('offline', function() { let option = { title: "断网了!", body: "尝尝10亿伏特!还敢上网不?(炮姐如是说!)", icon: "../static/offline.ico", }; // 创建上线通知 new window.Notification(option.title, option); console.log('断网了'); }) </script></body></html>检测在线与离线的api非常容易实现, 在window上绑定两个回调函数, 就实现了监听网络的功能(用js的回调函数实现
检测在线与离线的功能真的非常简洁, 同样的, 用监听网络在线或离线的逻辑来解释”js回调函数”的思想也是非常贴切)
小结:
- Electron与传统的网站在线应用相比, Electron的一大优势就是能创建桌面应用, 应用离线可用, 对于检查网络这种常见需求, 能快速进行实现
- Electron与传统桌面软件相比, 布局非常简单, UI定制性极强, 随便引入几个UI美化的库, 界面就可以做的非常漂亮, 也验证”颜值即正义”的真理
这是用Electron创建跨平台应用的第四弹, 如果你想对Electron有更详细的了解, 欢迎查看其它章节的内容目录: https://www.jianshu.com/p/3b295544c78e
文章链接：https://www.sbkko.com/ganhuo-107.html
文章标题：用Electron创建跨平台应用(第四弹)检测当前是否连接互联网
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
文章标题：用Electron创建跨平台应用(第四弹)检测当前是否连接互联网
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
