- 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![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)