bilibili PC客户端架构设计——基于Electron

众所周知，bilibili是个学习的网站，网页端和粉版移动端都非常的好用，不过，相对其它平台来说bilibili的PC客户端也算是大器晚成了。在有些场景PC客户端的优势也是显而易见的，比如，跓留电脑桌面的快捷、独立的应用窗口、特有的交互方式等，因此就有了很多喜欢bilibili的技术大佬整出了不少体验不错的第三方PC应用，比如云之幻版、逍遥橙子版等。

当然bilibili也有一个源自三方的UWP客户端，但是由于历史原因一直没有得到很好的维护，在21年底，一个需要在电脑端预装的需求让我们有了开发一个全新的PC客户端的想法。

一、PC客户端的技术选型

选择一个什么样的技术，可以在降本增效的大背景下实现一个体验相对较好、易维护、跨平台且能快速推进的PC应用呢？

图2 PC端开发技术对比

调研了一些PC端应用开发的技术方案之后，基于开发效率、跨平台和成熟度等因素考虑，最终bilibili选择了使用WEB技术栈的Electron做为新PC客户端的开发框架。

图3 Electron框架的优势

在确定了开发框架后，先来看看Electron到底是什么。我们知道Electron是背靠微软基于WEB技术的开源项目，最初源自GitHub团队的Atom Shell项目，结合NodeJs和Chromium实现，并对系统API做了封装，比如系统对话框、系统托盘、系统菜单、剪切板等，开发者可以直接通过js访问这些API。

图4 Electron的构成

图5 一般Electron应用的运行时

我们知道Electron程序主要分为主进程(Main Process)和渲染进程(Render Process)，主进程主要为NodeJs和原生API，渲染进程主要为前端技术，主进程和渲染进程之间通过IPC进行通信。

为了易维护、好拓展、可复用等目的，我们选择了NodeJs+NestJs+Esbuild的方案来开发主进程，选择了和WEB首页Laputa项目相同的技术栈Vue3+Vite2+TypeScript开发渲染进程。

图6 PC客户端技术选型

主进程的NestJs是一个受Angular启发的NodeJS后端框架，风格有点像SpringBoot，结合OOP (Object Oriented Programming)、FP (Functional Programming)和 FRP (Functional Reactive Programming)等编程范式，能够开发出高可测、好拓展、松耦合、易维护的应用。Esbuild是使用go语言实现的js极速打包工具，可以助力更高效的开发主进程。

图7 Esbuild官网展示的构建性能对比

渲染进程使用和WEB相同的技术栈，除了方便复用WEB现成的很多组件之外，同时WEB业务线的开发人力也可以无障碍的投入到PC客户端的业务开发中来，因此可以最大限度的降低开发成本、提高开发效率。另外，我们还在项目中实践和应用了我们自研的Vue3组件库vivid-ui、函数库@bilibili/b-utils和样式库@bilibili/b-style等工具库。

图8 PC客户端自研工具库

二、PC客户端的整体架构

PC客户端是bilibili的一个全新的端，除了推荐、直播、热门、OGV、动态、空间、搜索等常规功能之外，还需具备电脑端本地软件的其它能力，包括安装升级、托盘隐藏、本地存储、专有窗口、离线缓存、自定义配置、唤端拉活等等。

图9 下载中心

（其中Windows版、MacOS版、微软商店版都是PC客户端）

我们先来看看PC客户端的业务功能设计，在1.0的版本我们其实就已经实现了安装卸载、开屏页、首页、动态、搜索、我的和空间、播放页、登录、主题和设置等功能，随着版本迭代，我们陆续完成了一键三连安装界面、离线缓存、播单、消息等功能。

图10 PC客户端业务功能设计

在明确业务功能后，结合框架和技术栈，我们设计了PC客户端的整体架构：由渲染进程实现业务功能的UI和交互，由主进程实现本地日志、存储、下载、上报、升级等服务和支持的功能，渲染进程和主进程之间封装IPC为统一的JSB接口进行通信。

图11 PC客户端整体架构设计

在渲染进程中，账号登录、大会员充值、直播间和开播页都是使用webview嵌WEB页的方式接入的，其它业务模块均为本地应用页面；在主进程中，本地日志、本地存储和下载SDK都是引入的模块，其它各个模块和服务之间通过依赖注入和rxjs主题订阅的方式实现相互调用；JSB则由主进程通过preload的方式注入到渲染进程各页面的window对象中，渲染进程不论是外嵌还是本地页面都能访问到JSB对象实现和主进程通信。

由于客户端基于Electron和WEB技术开发，一个窗口页面其实本质上就是一个HTML页面。当然，我们的主页面都是从由主进程创建的本地服务器上拉取的Local页面，因此断网的情况也能响应，像首页、动态网络强相关的页面，在断网时会显示失败提示，而离线缓存、设置等功能都能正常使用。

由于我们渲染层是基于Vue开发的SPA应用，主窗口和播放窗口在打开时会有一个比较耗时的加载过程，为了提升用户体验我们专门针对窗口创建和打开过程做了优化。

在启动时（首次打开主窗口），会先创建一个隐藏的主窗口，加载一个相对简单的开屏页。
当开屏页渲染完成后，调用主进程splashPageReady接口，主进程控制显示主窗口。（防止开屏页白屏）
主窗口和开屏页显示之后，在主窗口开屏页下方加载和渲染比较大的主页面。
主页面渲染完成时，调用主进程mainWindowReady接口，并关闭盖在主页面上面的开屏页。
主进程收到mainWindowReady后，创建一个隐藏的播放窗口。
当用户点击播放视频时，显示已渲染好的播放窗口，并加载和播放视频。
关闭主窗口和播放窗口时，只将窗口隐藏并不真实销毁窗口实例，当再次打开或播放视频时，就可以快速打开窗口，提升用户体验。

图12 PC客户端执行过程

图13 窗口创建和打开流程

事实上，采用隐藏的窗口进程做预渲染和并行处理是提升Electron应用体验的常用方法，在Electron中可以用ChildProcess、BrowserWindow、BrowserView、webview等方式开启子进程，突破进程限制，充分利用机器的性能。

可以通过主进程app.getAppMetrics()方法获取APP各进程的CPU和内存数据统计，PC客户端主要包含7个常跓进程：1个浏览器(Browser)进程、1个GPU进程、1个网络服务(Network Service)进程、1个音频服务(Audio Service)进程和3个页面(Tab)进程。

图14 PC客户端的进程

由于渲染进程占用资源比较大，如果用户长时间未使用又没有关闭的话就会造成资源浪费，因此我们还为APP设计了"节能模式"，当APP隐藏到托盘超过一定时间未点开后会进入到此模式，这时程序会杀掉主窗口和播放窗口对应的渲染进程，释放资源占用。进入节能模式之后，如果用户再打开APP则会进入前面提到的窗口创建和打开流程，不过这个过程没有APP初始化的任务，速度会比冷启动时要快很多。

图15 PC客户端节能模式

PC客户端使用Fawkes平台打包构建、进行数据上报并建立数据报表、平台进行自动化巡检测试、建有专门的产品和开发文档，开发方面也有明确的代码规范要求

图16 项目设计开发平台工具

三、PC客户端工程化构建

PC客户端渲染进程和主进程都是基于TypeScript进行开发的，Ts提供的类型定义和规范可以大幅度提高代码的可读性，在主进程和渲染进程的中间，我们还设计了一个common共享层，用来实现Ts类型和常量的共享。

PC客户端项目结构：

bilibili-electron├── app/*                              # 构建生成代码├── build/*                            # 构建资源目录├── dist/*                             # 安装包生成目录├── scripts/*    ├── build.main.ts                  # 主进程构建配置│├── src    ├── common/*                       # 共享类型    ├── main/*                         # 主进程    └── render/*                       # 渲染进程│├──  electron-builder.config.js        # 安装包打包配置├──  vite.config.ts                    # 渲染进程构建配置├──  pckage.json

PC客户端项目运行和构建都基于NPM Script，构建release包只需要运行: yarn build:prod。构建代码位于app目录下，由于构建产物也是js代码，很容易被人拿去套壳、植入或篡改。为了防范这些所知的风险，增加被篡改和攻击的难度，我们需要对构建包进行加密处理。经过不断的迭代优化，我们实现了一套使用结合代码混淆、对称加密、字节码处理、WASM解密 和啥希校验的组合式客户端加密防破解方案。

在打Release包时，会把构建生成的代码先进行混淆、压缩处理，再将主进程主程序代码使用AES-256对称加密生成/app/main/.biliapp文件，将解密和执行入口使用字节码处理，最后计算出APP的哈希值。