整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
信不只是我，用过（或看过）macOS 和 Windows 两个版本 Notion 客户端的同学，应该都会觉得 Windows 上的 Notion 用户「处于水深火热」之中。
Notion 的桌面客户端是「网页套壳」的成果，受限于 Windows 上的 Electron API，Notion 官方的 Windows 客户端拥有 Windows 桌面应用的一切特征：
不过 Notion 客户端是用 Electron 封装的，其样式、布局等和网页的定义方法一致。因此我们可以通过一些手段对 Notion 的 Windows 客户端进行定制，使之更符合我们的审美与使用习惯。比如下面这样：
魔改之后的 Notion Windows 客户端
这里用到的是来自乌克兰的开发者 @Uzver 的 Notion Enhancer，借助这款工具，我们可以对 Notion 的 Windows 桌面客户端进行一系列魔改和美化。
在开始美化 Notion 客户端之前我们需要安装一些工具，为接下来的魔改进行准备工作。下面的步骤在 Windows 10 Pro 19041.25 版本下进行，使用 Windows 上的软件包管理工具 Scoop 进行安装。
关联阅读：「一行代码」搞定软件安装卸载，用 Scoop 管理你的 Windows 软件
首先，Notion Enhancer 本身是一个 Python 脚本，我们需要安装 Python 环境。打开 PowerShell，在其中输入：
scoop install python
等待安装完成即可。
接下来，由于 Notion 的桌面客户端是 Electron 套壳应用，用 Node.js 作为其运行环境，因此我们需要安装 Node.js 与 npm 包管理工具。在 PowerShell 中继续输入：
scoop install nodejs
等待安装完成即可。
最后，我们需要使用 npm 包管理工具安装 asar 工具，用来解密 Electron 应用包，从而改造 Electron 应用（也就是 Notion 客户端）的内部代码。在 PowerShell 中继续输入：
npm install -g asar
在 PowerShell 中输入 asar，如果出现如下的结果，那么我们的 asar 工具就安装成功了。
验证 asar 工具安装成功
至此，准备工作就基本完成了。
接下来，我们下载「美化」套装：Notion Scripts V4。解压之后我们会得到这样的几个文件：
Notion Enhancer 下载得到的文件
我们将 NotionScriptsV4 文件夹放置妥当（可以放在云存储同步文件夹中，方便后续保管），在 PowerShell 中定位至这一文件夹，进行接下来的「安装」操作。
关掉所有 Notion 客户端，在 PowerShell 中输入下面的命令，执行 Python 脚本：
python 'Customization Patcher.py'
执行 Customization Patcher 脚本
在这一步骤中，Customization Patcher.py 实际上为我们做了以下的事情：
随后重启 Notion 客户端就可以看到样式已经生效，客户端被我们成功魔改。
另外，如果后续希望将 Notion 客户端恢复原样，我们同样直接运行移除样式脚本 Customization Remover.py 即可：
python 'Customization Remover.py'将 Notion 客户端恢复原样
事实上，Notion Enhancer 为我们添加、修改并自定义了很多 Notion 客户端的功能与样式。
首先 Notion Enhancer 最大、最值得使用的功能特性就是将 Notion 原有的 Windows 菜单栏、工具栏与滚动条全部去掉，修改成了更符合 Notion 整体风格的样式。下面是一个对比：
Notion Enhancer 修改效果
可以看到，Notion Enhancer 将 Windows 原生的与 Notion 界面风格不匹配的控件全部隐藏了起来，并重绘了右上角的「最小化」、「最大化」和「关闭窗口」的控件，并将「滚动条」也重新绘制，使之与无论在深色主题还是浅色主题下都能完美契合。
另外，Notion Enhancer 还在右上角添加了一个实用的新控件 ↑，用于置顶 Notion 窗口。
Notion Enhancer 将 Notion 表格、看板视图左右两侧的「空白区域」去掉，从而让二者能显示更多的横向内容。
去掉表格视图两侧的空白部分
这部分样式在文件 custom_style.css 的 87 行往下开始定义的，如果不希望开启这一功能，我们直接删掉或注释掉 87 行至 97 行与 103 行至 107 行的代码内容（即下图中蓝色框中代码内容）即可。另外也可以在 Notion 客户端里面用快捷键 Ctrl + R 重新加载样式。
表格与看板视图的 CSS 样式定义
Notion Enhancer 将带有头图的页面也进行了相应的调整。为了使纵向空间充分利用，Notion Enhancer 将图标向上移动至头图中央，并调整了头图的显示区域。
调整图标与头图的位置
需要注意这部分样式定义是作者针对 15.6 寸与 24 寸显示器进行的参数调整，如果发现自己的 Notion 客户端显示出现了问题，那么我们需要手动调整这部分参数，也就是 custom_style.css 的第 109 行下面的部分。
这里我们需要调整两个 height 参数，其中 12vh、20vh 分别代表 Notion 页面内容距离顶端的高度与头图的显示高度，我们适当进行调整，使得图标在头图里面垂直居中即可。
修改头图与图标垂直高度
在上面的两个例子中可以看到，无论是桌面客户端的 Notion 还是网页版本的 Notion，其样式实际上是完全可以很大程度上进行自定义的。我们直接在 custom_style.css 里面添加或修改相应的 CSS 样式定义内容即可让 Notion 界面按照我们希望的样子显示。
添加自定义 Notion 样式
Notion Enhancer 还为我们添加了隐藏/显示 Notion 窗口的快捷键定义。
默认的隐藏 / 显示 Notion 快捷键是 Ctrl + Shift + A，不过我们也可以自定义这一功能。在 Customization Patcher.py 中，第 34 行定义了快捷键 windowToggleHotkey 的变量，这里我们就可以将默认定义的：
windowToggleHotkey="'ctrl+shift+a'"
修改为我们自己的快捷键，比如 Win + Shift + N：
windowToggleHotkey="'super+shift+n'"
这里的修改需要重新运行 Customization Patcher.py，再次给 Notion 客户端打补丁，才能让快捷键生效。
最后，为了方便设置 Notion 开机自启以及启动的窗口样式，Notion Enhancer 还添加了一个任务栏设置区域，方便我们设置 Notion 开启启动、自动隐藏窗口、自动最大化窗口与最小化到托盘等选项。
添加 Notion 任务栏设置图标
为了拯救 Notion 的 Windows 用户于水深火热之中，Notion Enhancer 的作者也是煞费苦心，为我们修改了 Notion 的界面并提供了诸多增强功能，包括能够任意自定义 Notion 页面样式的入口：custom_style.css。
Notion Enhancer 目前已经更新至第四个版本，作者将在 Notion Enhancer - Notion 这一页面持续更新工具及其相应的功能和配置方法，感兴趣的同学可以持续关注。本文的介绍就到这里，感谢阅读。
文由vivo技术团队Yang Kun分享，原题“electron 应用开发优秀实践”，本文有修订。
在上篇《Electron初体验(快速开始、跨进程通信、打包、踩坑等)》的分享中，我们已经对Electron跨端框架的开发有了大概的了解。
本篇将基于vivo技术团队的技术实践，详细阐述了vivo在使用Electron进行跨端桌面开发时的技术栈选型考量，同时分享了在打包构建、版本更新、性能优化、质量保障、安全性等方面的实践方案和踩坑总结。
本文是系列文章中的第3篇，本系列总目录如下：
因业务发展，我们需要用到桌面端技术，技术特性涉及离线可用、调用桌面系统能力等要求。
那么什么是桌面端开发？一句话概括就是：以 Windows 、MacOS 和 Linux 为操作系统的桌面软件开发。
对此我们做了详细的技术调研：桌面端的开发方式主要有 Native 、 QT 、 Flutter 、 NW 、 Electron 、 Tarui 。
这些技术各自优劣势如下表格所示：
我们最终的桌面端技术选型是 Electron，Electron 是一个可以使用 Web 技术来开发跨平台桌面应用的开发框架。
其技术组成如下：
Electron=Chromium + Node.js + Native API
各技术能力如下图所示：
整体架构如下图所示：
Electron 是多进程架构，架构具有以下特点：
这里回顾一下 Electron 进程间通信技术原理。
electron 使用 IPC （interprocess communication） 在进程之间进行通信。
如下图所示：
其提供了 IPC 通信模块，主进程的 ipcMain 和渲染进程的 ipcRenderer。
从 electron 源码中可以看出， ipcMain 和 ipcRenderer 都是 EventEmitter 对象。
源码如下图所示：
看到源码实现，是不是觉得 IPC 不难理解了。知其本质，方可游刃有余。
限于篇幅，这里对Electron的基础知识就不再展开，有兴趣的读者可回顾一下本系列的前两篇《快速了解新一代跨平台桌面技术——Electron》、《Electron初体验(快速开始、跨进程通信、打包、踩坑等)》（这篇中的“5、进程详解”特别介绍了Electron进程间的关系以及通信原理）。
我们最终选择的是Typescript，理由如下。
针对开发者：
针对工具：
社区支持：大量的社区的类型定义文件 提升开发效率。
我们选择的是 Electron-Forge。
理由很充分：Electron-Forge简单而又强大，目前 electron 应用最好的构建工具之一。
这里提一下 electron-builder 其和 electron-forge 的介绍和区别。
看下图所示：
两者最大的区别在于自由度，两者在能力上基本没什么差异了，从官方组织中的排序看，有意优先推荐 electron-forge 。
我们采用的是 Vue3 ，同时使用 Vite 作为构建工具，具体优点，大家可以查看官网介绍，这套组合是目前主流的 Web 开发方案。
目前的 monorepo 生态百花齐放，正确的实践方法应该是集大成法，也就是取各家之长，目前的趋势也是如此，各开源 monorepo 工具达成默契，专注自己擅长的能力。
如 pnpm 擅长依赖管理， turbo 擅长构建任务编排。遂在 monorepo 技术选型上，我选择了 pnpm 和 turbo 。
以下是pnpm的官网：
pnpm 理由如下：
相比于 vue 官网，在使用 pnpm 上，我加了 workspace 。
turbo 理由如下：
Electron 应用数据库有非常多的选择如 lowdb 、 sqlite3 、 electron-store 、 pouchdb 、 dedb 、 rxdb 、 dexie 、 ImmortalDB 等。
这些数据库都有一个特性，那就是无服务器。
Electron本地数据库技术选型考虑因素主要有：
我们通过以下渠道进行了相关调研：
给出四个最优选择，分别是 lowdb 、 sqlite3 、 nedb 、 electron-store 。
我们的理由如下：
我们使用的数据库最终选型是 lowdb 方案。
PS：提一下 pouchdb ，如果需要将本地数据同步到远端数据库，可以使用 pouchdb ，其和 couchdb 可以轻松完成同步。
软件开发过程中，将一些流程和操作通过脚本来完成，可以有效地提高开发效率和幸福度。
依赖 node runtime 的优秀选择就两个：shelljs 和 zx 。
选择 zx 的理由如下：
至此，技术选型就介绍完了。
不同尺寸图标的生成有以下方法。
Windows：
MacOS：
本章节内容是基于 electron-forge 阐述的，不过原理是一样的。
在开发桌面端应用时，会有场景要用到第三方的二进制程序，比如 ffmpeg 这种。
在构建二进制程序时，要关注以下两个注意项。
1）二进制程序不能打包进 asar 中 可以在构建配置文件（forge.config.js）进行如下设置：
const os=require('os')
const platform=os.platform()
const config={
packagerConfig: {
// 可以将 ffmpeg 目录打包到 asar 目录外面
extraResource: [`./src/main/ffmpeg/`]
}
}
2）开发和生产环境，获取二进制程序路径方法是不一样的 可以采用如下代码进行动态获取：
import { app } from 'electron'
import os from 'os'
import path from 'path'
const platform=os.platform()
const dir=app.getAppPath()
let basePath=''
if(app.isPackaged) basePath=path.join(process.resourcesPath)
elsebasePath=path.join(dir, 'ffmpeg')
const isWin=platform==='win32'
// ffmpeg 二进制程序路径
const ffmpegPath=path.join(basePath, `${platform}`, `ffmpeg${isWin ? '.exe':
如何对跨平台二进制文件进行按需构建呢？
比如桌面应用中用到了 ffmpeg ， 它需要有 windows 、 mac 和 linux 的下载二进制。
在打包的时候，如果不做按需构建，则会将 3 个二进制文件全部打到构建中，这样会让应用体积增加很多。
可以在 forge.config.js 配置文件中进行如下配置，即可完成按需构建。
代码如下：
const platform=os.platform()
const config={
packagerConfig: {
extraResource: [`./src/main/ffmpeg/${platform}`]
},
}
通过 platform 变量来把对应系统的二进制打到构建中，即可完成对二进制文件的按需构建。
主要是构建速度和构建体积优化，构建速度这块不好优化。这里重点说下构建体积优化，拿 mac 系统举例说明， 在 electron 应用打包后，查看应用包内容。
如下图所示：
可以看到有一个 app.asar 文件。
这个文件用 asar 解压后可以看到有以下内容：
可以看出 asar 中的文件，就是我们构建后的项目代码，从图中可以看到有 node_modules 目录， 这是因为在 electron 构建机制中，会自动把 dependencies 的依赖全部打到 asar 中。
结合上述分析，我们的优化措施有以下4点：
这里提下第 4） 点，如何对 node_modules 进行清理精简呢？
如果是 yarn 安装的依赖：我们可以在根目录使用下面命令进行精简：
yarn autoclean -I
yarn autoclean -F
如果是 pnpm 安装的依赖：第 4）点应该不起作用了。我在项目中使用 yarn 安装依赖，然后执行上述命令后，发现打包体积减少了 6M ， 虽然不多，但也还可以。
全量更新就是通过下载最新的包或者 zip 文件，进行软件更新，需要替换所有的文件。
整体设计流程图如下：
按照流程图去实现，我们需要做以下事情：
增量更新是通过拉取最新的渲染层打包文件，覆盖之前的渲染层代码，完成软件更新，此方案只需替换渲染层代码，无需替换所有文件。
按照流程图去实现，我们需要做以下事情：
打包构建优化在上节内容中已经详细介绍过了，这里不再介绍，下面将介绍我们对“启动时优化”和“运行时优化”的实践。
主要从以下几个方面着手：
使用 V8 缓存数据，为什么要这么做呢？
因为 electorn 使用 V8 引擎运行 js ， V8 运行 js 时，需要先进行解析和编译，再执行代码。其中，解析和编译过程消耗时间多，经常导致性能瓶颈。而 V8 缓存功能，可以将编译后的字节码缓存起来，省去下一次解析、编译的时间。
主要使用 v8-compile-cache 来缓存编译的代码，做法很简单：在需要缓存的地方加一行。
1require('v8-compile-cache')
其他使用方法请查看此链接文档 ：https://www.npmjs.com/package/v8-compile-cache
伪代码如下：
export functionshare() {
const kun=require('kun')
kun()
}
主要从以下几个方面着手：
用一个思维导图来完整阐述如何进行 Web 性能优化，如下图所示：
上图基本包含了性能优化的核心关键点和内容，大家可以以此作为参考，去做性能优化。
核心方案就是将运行时耗时、计算量大的功能交给新开的 node 进程去执行处理。
伪代码如下：
const { fork }=require('child_process')
let { app }=require('electron')
functioncreateProcess(socketName) {
process=fork(`xxxx/server.js`, [
'--subprocess',
app.getVersion(),
socketName
])
}
const initApp=async ()=> {
// 其他初始化代码...
let socket=await findSocket()
createProcess(socket)
}
app.on('ready', initApp)
通过以上代码，将耗时、计算量大的功能，放在 server.js ，然后再 fork 到新开 node 进程中进行处理。
至此，性能优化实践就介绍完了。
质量保障的全流程措施如下图所示：
本节主要从以下3个方面分享：
下面将会依次介绍上述内容。
自动化测试是什么？
上图是做自动化测试一个完整步骤，大家可以看图领会。
自动化测试主要分为 单元测试、集成测试、端到端测试。
三者关系如下图所示：
一般情况下：作为软件工程师，我们做到一定的单元测试就可以了。而且从我目前经验来说，如果是写业务性质的项目，基本上不会编写测试相关的代码。
自动化测试主要是用来编写库、框架、组件等需要作为单独个体提供给他人使用的。
electron 的测试工具推荐 vitest 、 spectron 。具体用法参考官网文档即可，没什么特别的技巧。
对于 GUI 软件，尤其桌面端软件来说，崩溃率非常重要，因此需要对崩溃进行监控。
崩溃监控原理如下图所示：
崩溃监控技巧：
崩溃监控做好后，如果发生崩溃，该如何治理崩溃呢？
崩溃治理难点：
崩溃治理技巧：
俗话说的好，安全大于天，保证 electron 应用的安全也是一项重要的事情。
本章节将安全分为以下 5 个方面：
下面将会依次介绍上述内容。
目前 electron 在源码安全做的不好，官方只用 asar 做了一下很没用的源码保护，到底有多没用呢？
你只需要下载 asar 工具，然后对 asar 文件进行解压就可以得到里面的源码了。
如下图所示：
通过图中操作即可看到语雀应用的源码。上面提到的 asar 是什么呢？
asar 是一种将多个文件合并成一个文件的类 tar 风格的归档格式。Electron 可以无需解压整个文件，即可从其中读取任意文件内容。
可以直接看 electron 源码，都是 ts 代码，容易阅读，源码如下图所示：
避免源码泄漏，按照从低到高的源码安全，可以分为几个程度。
具体如下：
其中：Language bindings 是最高的源码安全措施，其实使用 C++ 或 Rust 代码来编写 electron 应用代码，通过将 C++ 或 Rust 代码编译成二进制代码后，破译的难度会变高。
这里我说下如何使用 Rust 去编写 electron 应用代码。
方案是：使用 napi-rs 作为工具去编写，如下图所示：
我们采用 pnpm-workspace 去管理 Rust 代码，使用 napi-rs 。
比如我们写一个 sum 函数，rs代码如下：
fn sum(a: f64, b: f64) -> f64 {
a + b
}
此时我们加上 napi 装饰代码，如下所示：
use napi_derive::napi;
#[napi]
fn sum(a: f64, b: f64) -> f64 {
a + b
}
在通过 napi-cli 将上述代码编译成 node 可以调用的二进制代码。
编译后，在electron使用上述代码，如下所示：
import { sum as rsSum } from '@rebebuca/native'
// 输出 7
console.log(rsSum(2, 5))
napi-rs 的使用请阅读官方文档，地址是：https://napi.rs/
至此，language bindings 的阐述就完成了。我们通过这种方式，可以完成对重要功能的源码保护。
目前熟知的一个安全问题是克隆攻击，此问题的主流解决方案是将用户认证信息和应用设备指纹进行绑定。
整体流程如如下图所示：
如上图所示：
主要有以下措施：
以上具体细节不再介绍，自行搜索上述方案。
除此之外，还有个官方推荐的最佳安全实践，有空可以看看，地址如下：https://www.electronjs.org/docs/latest/tutorial/security。
至此，安全性这块实践就介绍完了。
本文介绍了我们对跨系统桌面端技术的调研、确定技术选型，以及用 electron 开发过程中，总结的实践经验及踩坑填坑过程，如构建、性能优化、质量保障、安全等。
希望对读者在开发跨端桌面应用过程中有所帮助，文章难免有不足和错误的地方，欢迎读者评论。
[1] Electron官方开发者手册
[2] 快速了解新一代跨平台桌面技术——Electron》
[3] Electron初体验(快速开始、跨进程通信、打包、踩坑等)
[4] Electron 基础入门 简单明了，看完啥都懂了
[5] 网易云信Web端IM的聊天消息全文检索技术实践
学习交流：
- 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM》
- 开源IM框架源码：https://github.com/JackJiang2011/MobileIMSDK（备用地址点此）
（本文已同步发布于：http://www.52im.net/thread-4044-1-1.html）
本系列文章的前面几篇主要是从Electron技术本身进行了讨论（包括：第1篇初步了解Electron、第2篇进行了快速开始和技术体验、第3篇基于实际开发考虑的技术栈选型等），各位读者也应该对Electron的开发有了较为深入的了解。
本篇将回到IM即时通讯技术本身，根据蘑菇街的实际技术实践，总结和分享基于Electron开发跨平台IM客户端的过程中，需要考虑的典型技术问题以及我们的解决方案。希望能给你带来帮助。
学习交流：
- 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM》
- 开源IM框架源码：https://github.com/JackJiang2011/MobileIMSDK（备用地址点此）
（本文已同步发布于：http://www.52im.net/thread-4051-1-1.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
