用Electron创建跨平台应用(第四弹) 监听当前是否联网-阿里云开发者社区

开发者社区> 开发与运维> 正文

用Electron创建跨平台应用(第四弹) 监听当前是否联网

简介: Electron主要用于创建跨平台的桌面软件, 既然是桌面软件, 那即使是断网的情况下, 无需联网的功能也应该可以正常使用. 为了提升用户的体验, 我们应该能根据当前是否可以连通互联网, 对用户做出提醒(类似桌面qq在线, 离线, 的提醒) .
  • 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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章