electron 里html不识别require_electron关于应用功能之旅(六)

微信公众号：[猫十二的日常]，欢迎留言和指出问题a

本节将讲剩下几个功能，离线/在线侦测 针对macos系统BrowserWindows的展示文件 原生文件拖放 离屏渲染 暗黑模式 在electron中嵌入网页等几个功能进行探讨

离线/在线侦测

离线在线监测是针对网络情况的判断，实际上这种监测不一定准确，跟软件所处的网络环境还有可能跑在虚拟环境下面的虚拟以太网处于"always connected" 状态，我们不可能完全依赖这个东西进行判断

渲染进程的事件探测是基于HTML5API中的navigator.onLine属性实现的

navigator.onLine 属性返回值：

• false：如果所有网络请求都失败(例如，断开网络)。

• true: 在其他情况下都返回 true

Renderer.js

const watcher = () => {
    
console.log(navigator.onLine ? "在线" : "离线");
};
window.addEventListener("online", watcher);
window.addEventListener("offline", watcher);

//离线

按照下面的操作可以触发离线在线状态

主进程的事件探测

这个其实在主进程并没有提供这个功能，但是我们可以基于ipc通讯将渲染进程监听到事件，传递到主进程.从而实现了主进程能够拿到在线离线的状态

Renderer.js

const { ipcRenderer } = require("electron");
const watcher = () => {
    
console.log(navigator.onLine ? "在线" : "离线");
  ipcRenderer.send("is-offlne", navigator.onLine ? "在线" : "离线");
};
window.addEventListener("online", watcher);
window.addEventListener("offline", watcher);

//离线

Main.js

const { app, BrowserWindow, ipcMain } = require("electron");

ipcMain.on("is-offlne", (event, arg) => {
    
console.log("现在所处的网络", arg);
});

//现在所处的网络 离线

针对 macOS系统 BrowserWindows的展示文件

在 macOS 上，您可以为应用程序中的任何窗口设置一个代表文件。这也意味着文件的icon也将展示在标题上面&#