electron - electron BrowserWindow - 《public》

nodeIntegration、contextIsolation

加载远程页面：win.loadURL('远程页面地址')
加载本地页面：win.loadFile('本地页面地址')

👇🏻 下面这是最终的启动效果。存在的一个问题：启动期间的白屏问题。这个白屏问题在官方

仔细观察应用的启动过程，会发现有一个闪屏的效果 - 也就是一开始的时候，处于白屏状态，然后突然加载出页面。每次加载页面都是直接展示，用户突然就看到了，这不是一个好的本地应用使用体验。官方文档中也提及了这个问题，并提供了两种解决方案作为参考。

参考资料：链接

const { app, BrowserWindow } = require('electron')
let win
app.on('ready', () => {
  win = new BrowserWindow()
  win.loadURL('https://www.electronjs.org/')
})

{
  "name": "22-10-25",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^21.2.0"
  }
}

解决白屏问题

白屏原因分析：
应用启动的耗时＜页面资源的请求耗时
我们的应用启动之后，HTTP 请求的资源还没拿到呢，此时页面上只能是一片空白。

方案1：
思路：在加载的过程中，不展示窗口，等加载完之后，再展示窗口。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
  win.show()
})

参考资料：链接

方案2：
思路：即便请求的资源还没拿到，页面也要展示出来，为了接下来的渲染显得不那么突兀，先使用一个与请求的页面相进的背景色来填充页面。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')

参考资料：链接

两种方案对比：

方案1：虽然用户看到页面内容的时候，都是已经渲染好的页面，不存在白屏。但是白屏的等待时间，依旧是存在的，在这段时间内，用户将啥也看不到。夸张一些假设，应用启动需要 10s，请求到资源需要 50s，那么用户启动应用，需要等一分钟页面才显示出来。
方案2：白屏等待时间，依旧令应用可见，只不过变更了一下页面背景，让接下来的页面首次渲染显得不那么突兀。对比方案1，该方案的好处就在于，用户点击了应用之后，立刻就能得到响应。
nodeIntegration、contextIsolation

let win
app.whenReady().then(() => {
  new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })
})

这两个配置选项是在 Electron 应用程序的 webPreferences 设置中定义的，它们主要控制了渲染进程中 JavaScript 环境的行为。

nodeIntegration

nodeIntegration（布尔值）：

默认情况下，nodeIntegration 的值为 false。当将其设置为 true 时，渲染进程将可以访问 Node.js 的功能。这意味着在渲染进程中的 JavaScript 代码可以使用 require() 导入 Node.js 模块，以及访问全局的 process 和 Buffer 等对象。

这在某些情况下可能很有用，例如在渲染进程中直接访问文件系统或执行其他与操作系统相关的任务。但是，启用 nodeIntegration 会导致潜在的安全风险，因为渲染进程中的 JavaScript 代码具有更高的权限。如果你的应用程序加载了不受信任的第三方代码，这可能导致安全漏洞。

因此，建议仅在确保应用程序安全的情况下启用 nodeIntegration，并在可能的情况下使用 Electron 的主进程和 IPC（Inter-Process Communication）来处理需要 Node.js 功能的任务。

contextIsolation

contextIsolation（布尔值）

contextIsolation 的默认值为 true。当设置为 true 时，Electron 会在一个单独的 JavaScript 上下文中运行渲染进程的预加载脚本。这意味着预加载脚本和网页中的 JavaScript 代码不能直接访问彼此的全局变量和函数。

启用 contextIsolation 可以增强应用程序的安全性，因为它可以防止渲染进程中的潜在攻击者修改 Electron API 或 Node.js 功能。尤其是在使用 nodeIntegration: true 的情况下，启用 contextIsolation 可以降低安全风险。

然而，将 contextIsolation 设置为 false 时，预加载脚本和网页中的 JavaScript 代码将共享同一个上下文。这可能导致安全问题，因为网页中的代码可能篡改或利用预加载脚本中的功能。

总之，建议保持 contextIsolation: true，并根据需要使用预加载脚本来暴露安全的 API，以便在渲染进程中使用。同时，在确保应用程序安全的前提下，谨慎使用 nodeIntegration: true。

小结

nodeIntegration、contextIsolation 这两个配置其实就是“自由”和“安全”的权衡问题

最自由 👉🏻 { nodeIntegration: true, contextIsolation: false }
最安全 👉🏻 { nodeIntegration: false, contextIsolation: true } 这都是默认值，不写这俩配置，其实就是最安全的

electron BrowserWindow

nodeIntegration、contextIsolation

nodeIntegration

contextIsolation

小结