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
来源: http://www.jianshu.com/p/61d45a30e271