轶哥博客

妄图改变世界的全栈程序员。

Electron 预加载远程页面提升用户体验

使用场景

Electron 内置 ChromiumNode.js,为了提升用户体验,通常 Electron 封装的前端静态文件存储在客户端本地。但总有一些特殊情况,会使用到部分远程页面。

比如微信扫码登录,需要远程访问微信的登录站点,获得扫码结果后跳转到我们自己的服务器,然后通知到主进程来关闭对应的渲染进程。目前这个问题有更高效的解决方案,详见博文《无刷新微信扫码登陆解决方案》

再比如,部分页面还没有实现前后端分离,为了产品尽快上线,也需要嵌入远程URL。

直接在Electron中访问远程地址是有风险的,控制远程地址切回本地页面也是较为繁琐的。

以上需求可以使用webview标签实现。这是Electron为我们提供的一个特殊组件,类似于iframe但跟iframe不同,确保了应用的安全性。类似于AndroidioswebviewCrosswalk,Electron中的webview也支持和渲染进程相互通讯。

具体实现示例

载入父级页面的时候,将此webview悄悄放入。这样就实现在后台加载webview里面链接的内容了。

// 示意代码 (Vue)
<template v-for="(item, index) in list">
  <webview :key="index" :id="'webview' + index" :src="'https://' + item" class="hidden"></webview>
</template>
webview.hidden {
  width: 0px;
  height: 0px;
  flex: 0 1;
}

webview.show {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999999999;
  right: 0;
  bottom: 0;
}

webview.backhome {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 160px;
  z-index: 999999999999;
}

对应的显示和隐藏事件:

// 示意代码
buttomClick (id) {
  this.nowWebviewId = id
  document.getElementById(id).classList.remove('hidden');
  document.getElementById(id).classList.add('show');
}

backToHome (id) {
  document.getElementById(id).classList.remove('show');
  document.getElementById(id).classList.add('hidden');
  this.nowWebviewId = null
}

当用户点击对应按钮的时候,页面可能已经加载完毕,用户体验极佳。

  上一篇 (JS推测Base64图片类型)
下一篇 (Node.js 网页截图服务 - 网页快照API)