Electron渲染進程與Webview：如何實現高效同步通信？

electron 渲染進程與 webview 高效同步通信方案探討

許多 Electron 開發者在使用 Webview 組件時，面臨渲染進程與 Webview 之間通信效率的挑戰。尤其在需要緊密協作的頁面功能中，傳統的異步事件監聽機制顯得力不從心。本文針對 Electron 渲染進程和 Webview 是否能實現同步通信這一問題，提出一種基于 ipcRenderer.invoke 的方案，以提升通信效率，簡化開發流程。

開發者希望在渲染進程與 Webview 間實現類似 await promise 的同步通信，替代現有的異步事件監聽方式。他們當前使用 preload 腳本和事件監聽進行通信，但在高協作場景下效率不足。

我們建議利用 Electron 的進程間通信機制 ipcRenderer.invoke。雖然底層仍為異步操作，但它能避免顯式編寫回調函數，達到類似同步調用的效果，并結合 async/await 語法，使代碼更簡潔易讀。

渲染進程代碼示例：

async function someFun() {   const data = await window.api.someFun();   console.log(data);   return data; }

preload 腳本代碼示例：

const { ipcRenderer } = require('electron');  window.api = {   someFun: async () => {     return await ipcRenderer.invoke('someFun');   } };

主進程代碼示例：

const { ipcMain } = require('electron');  ipcMain.handle('someFun', () => {   return '123'; });

通過此方案，渲染進程可像調用普通同步函數一樣調用 Webview 方法，無需處理回調函數，從而簡化代碼并提升開發效率。 需要注意的是，window.api 需要在 preload 腳本中正確定義，以便渲染進程訪問。 該方法利用異步操作的特性，通過 await 等待結果，在代碼層面模擬同步行為。