B站PC客戶端-架構(gòu)設(shè)計(jì)
眾所周知，B站是個(gè)學(xué)習(xí)的網(wǎng)站，網(wǎng)頁端和粉版移動(dòng)端都非常的好用，不過，相對其它平臺(tái)來說B站的PC客戶端也算是大器晚成了。在有些場景PC客戶端的優(yōu)勢也是顯而易見的，比如，跓留電腦桌面的快捷、獨(dú)立的應(yīng)用窗口、特有的交互方式等，因此就有了很多喜歡B站的技術(shù)大佬整出了不少體驗(yàn)不錯(cuò)的第三方PC應(yīng)用，比如云之幻版、逍遙橙子版等。
當(dāng)然我站也有一個(gè)源自三方的UWP客戶端，但是由于歷史原因一直沒有得到很好的維護(hù)，在21年底，一個(gè)需要在電腦端預(yù)裝的需求讓我們有了開發(fā)一個(gè)全新的PC客戶端的想法。
一、PC客戶端的技術(shù)選型
選擇一個(gè)什么樣的技術(shù)，可以在降本增效的大背景下實(shí)現(xiàn)一個(gè)體驗(yàn)相對較好、易維護(hù)、跨平臺(tái)且能快速推進(jìn)的PC應(yīng)用呢？
圖2 PC端開發(fā)技術(shù)對比
調(diào)研了一些PC端應(yīng)用開發(fā)的技術(shù)方案之后，基于開發(fā)效率、跨平臺(tái)和成熟度等因素考慮，最終我們選擇了使用WEB技術(shù)棧的Electron做為新PC客戶端的開發(fā)框架。
圖3 Electron框架的優(yōu)勢
在確定了開發(fā)框架后，我們先來看看Electron到底是什么。我們知道Electron是背靠微軟基于WEB技術(shù)的開源項(xiàng)目，最初源自GitHub團(tuán)隊(duì)的Atom Shell項(xiàng)目，結(jié)合NodeJs和Chromium實(shí)現(xiàn)，并對系統(tǒng)API做了封裝，比如系統(tǒng)對話框、系統(tǒng)托盤、系統(tǒng)菜單、剪切板等，開發(fā)者可以直接通過js訪問這些API。
圖4 Electron的構(gòu)成
圖5 一般Electron應(yīng)用的運(yùn)行時(shí)
我們知道Electron程序主要分為主進(jìn)程(Main Process)和渲染進(jìn)程(Render Process)，主進(jìn)程主要為NodeJs和原生API，渲染進(jìn)程主要為前端技術(shù)，主進(jìn)程和渲染進(jìn)程之間通過IPC進(jìn)行通信。
為了易維護(hù)、好拓展、可復(fù)用等目的，我們選擇了NodeJs+NestJs+Esbuild的方案來開發(fā)主進(jìn)程，選擇了和WEB首頁Laputa項(xiàng)目相同的技術(shù)棧Vue3+Vite2+TypeScript開發(fā)渲染進(jìn)程。
圖6 PC客戶端技術(shù)選型
主進(jìn)程的NestJs是一個(gè)受Angular啟發(fā)的NodeJS后端框架，風(fēng)格有點(diǎn)像SpringBoot，結(jié)合OOP (Object Oriented Programming)、FP (Functional Programming)和 FRP (Functional Reactive Programming)等編程范式，能夠開發(fā)出高可測、好拓展、松耦合、易維護(hù)的應(yīng)用。Esbuild是使用go語言實(shí)現(xiàn)的js極速打包工具，可以助力更高效的開發(fā)主進(jìn)程。
圖7 Esbuild官網(wǎng)展示的構(gòu)建性能對比
渲染進(jìn)程使用和WEB相同的技術(shù)棧，除了方便復(fù)用WEB現(xiàn)成的很多組件之外，同時(shí)WEB業(yè)務(wù)線的開發(fā)人力也可以無障礙的投入到PC客戶端的業(yè)務(wù)開發(fā)中來，因此可以最大限度的降低開發(fā)成本、提高開發(fā)效率。另外，我們還在項(xiàng)目中實(shí)踐和應(yīng)用了我們自研的Vue3組件庫vivid-ui、函數(shù)庫@bilibili/b-utils和樣式庫@bilibili/b-style等工具庫。
圖8 PC客戶端自研工具庫
二、PC客戶端的整體架構(gòu)
PC客戶端是B站的一個(gè)全新的端，除了推薦、直播、熱門、OGV、動(dòng)態(tài)、空間、搜索等常規(guī)功能之外，還需具備電腦端本地軟件的其它能力，包括安裝升級、托盤隱藏、本地存儲(chǔ)、專有窗口、離線緩存、自定義配置、喚端拉活等等。
圖9 下載中心
（其中Windows版、MacOS版、微軟商店版都是PC客戶端）
我們先來看看PC客戶端的業(yè)務(wù)功能設(shè)計(jì)，在1.0的版本我們其實(shí)就已經(jīng)實(shí)現(xiàn)了安裝卸載、開屏頁、首頁、動(dòng)態(tài)、搜索、我的和空間、播放頁、登錄、主題和設(shè)置等功能，隨著版本迭代，我們陸續(xù)完成了一鍵三連安裝界面、離線緩存、播單、消息等功能。
圖10 PC客戶端業(yè)務(wù)功能設(shè)計(jì)
在明確業(yè)務(wù)功能后，結(jié)合框架和技術(shù)棧，我們設(shè)計(jì)了PC客戶端的整體架構(gòu)：由渲染進(jìn)程實(shí)現(xiàn)業(yè)務(wù)功能的UI和交互，由主進(jìn)程實(shí)現(xiàn)本地日志、存儲(chǔ)、下載、上報(bào)、升級等服務(wù)和支持的功能，渲染進(jìn)程和主進(jìn)程之間封裝IPC為統(tǒng)一的JSB接口進(jìn)行通信。
圖11 PC客戶端整體架構(gòu)設(shè)計(jì)
在渲染進(jìn)程中，賬號登錄、大會(huì)員充值、直播間和開播頁都是使用webview嵌WEB頁的方式接入的，其它業(yè)務(wù)模塊均為本地應(yīng)用頁面；在主進(jìn)程中，本地日志、本地存儲(chǔ)和下載SDK都是引入的模塊，其它各個(gè)模塊和服務(wù)之間通過依賴注入和rxjs主題訂閱的方式實(shí)現(xiàn)相互調(diào)用；JSB則由主進(jìn)程通過preload的方式注入到渲染進(jìn)程各頁面的window對象中，渲染進(jìn)程不論是外嵌還是本地頁面都能訪問到JSB對象實(shí)現(xiàn)和主進(jìn)程通信。
由于客戶端基于Electron和WEB技術(shù)開發(fā)，一個(gè)窗口頁面其實(shí)本質(zhì)上就是一個(gè)HTML頁面。當(dāng)然，我們的主頁面都是從由主進(jìn)程創(chuàng)建的本地服務(wù)器上拉取的Local頁面，因此斷網(wǎng)的情況也能響應(yīng)，像首頁、動(dòng)態(tài)網(wǎng)絡(luò)強(qiáng)相關(guān)的頁面，在斷網(wǎng)時(shí)會(huì)顯示失敗提示，而離線緩存、設(shè)置等功能都能正常使用。
由于我們渲染層是基于Vue開發(fā)的SPA應(yīng)用，主窗口和播放窗口在打開時(shí)會(huì)有一個(gè)比較耗時(shí)的加載過程，為了提升用戶體驗(yàn)我們專門針對窗口創(chuàng)建和打開過程做了優(yōu)化。
在啟動(dòng)時(shí)（首次打開主窗口），會(huì)先創(chuàng)建一個(gè)隱藏的主窗口，加載一個(gè)相對簡單的開屏頁。
當(dāng)開屏頁渲染完成后，調(diào)用主進(jìn)程splashPageReady接口，主進(jìn)程控制顯示主窗口。（防止開屏頁白屏）
主窗口和開屏頁顯示之后，在主窗口開屏頁下方加載和渲染比較大的主頁面。
主頁面渲染完成時(shí)，調(diào)用主進(jìn)程mainWindowReady接口，并關(guān)閉蓋在主頁面上面的開屏頁。
主進(jìn)程收到mainWindowReady后，創(chuàng)建一個(gè)隱藏的播放窗口。
當(dāng)用戶點(diǎn)擊播放視頻時(shí)，顯示已渲染好的播放窗口，并加載和播放視頻。
關(guān)閉主窗口和播放窗口時(shí)，只將窗口隱藏并不真實(shí)銷毀窗口實(shí)例，當(dāng)再次打開或播放視頻時(shí)，就可以快速打開窗口，提升用戶體驗(yàn)。
圖12 PC客戶端執(zhí)行過程
圖13 窗口創(chuàng)建和打開流程
事實(shí)上，采用隱藏的窗口進(jìn)程做預(yù)渲染和并行處理是提升Electron應(yīng)用體驗(yàn)的常用方法，在Electron中可以用ChildProcess、BrowserWindow、BrowserView、webview等方式開啟子進(jìn)程，突破進(jìn)程限制，充分利用機(jī)器的性能。
可以通過主進(jìn)程app.getAppMetrics()方法獲取APP各進(jìn)程的CPU和內(nèi)存數(shù)據(jù)統(tǒng)計(jì)，PC客戶端主要包含7個(gè)常跓進(jìn)程：1個(gè)瀏覽器(Browser)進(jìn)程、1個(gè)GPU進(jìn)程、1個(gè)網(wǎng)絡(luò)服務(wù)(Network Service)進(jìn)程、1個(gè)音頻服務(wù)(Audio Service)進(jìn)程和3個(gè)頁面(Tab)進(jìn)程。
圖14 PC客戶端的進(jìn)程
由于渲染進(jìn)程占用資源比較大，如果用戶長時(shí)間未使用又沒有關(guān)閉的話就會(huì)造成資源浪費(fèi)，因此我們還為APP設(shè)計(jì)了“節(jié)能模式”，當(dāng)APP隱藏到托盤超過一定時(shí)間未點(diǎn)開后會(huì)進(jìn)入到此模式，這時(shí)程序會(huì)殺掉主窗口和播放窗口對應(yīng)的渲染進(jìn)程，釋放資源占用。進(jìn)入節(jié)能模式之后，如果用戶再打開APP則會(huì)進(jìn)入前面提到的窗口創(chuàng)建和打開流程，不過這個(gè)過程沒有APP初始化的任務(wù)，速度會(huì)比冷啟動(dòng)時(shí)要快很多。
圖15 PC客戶端節(jié)能模式
PC客戶端使用Fawkes平臺(tái)打包構(gòu)建、使用北極星進(jìn)行數(shù)據(jù)上報(bào)并在觀遠(yuǎn)建立數(shù)據(jù)報(bào)表、使用魔鏡平臺(tái)進(jìn)行自動(dòng)化巡檢測試、在info上建有專門的產(chǎn)品和開發(fā)文檔，開發(fā)方面也有明確的代碼規(guī)范要求
圖16 項(xiàng)目設(shè)計(jì)開發(fā)平臺(tái)工具
三、PC客戶端工程化構(gòu)建
PC客戶端渲染進(jìn)程和主進(jìn)程都是基于TypeScript進(jìn)行開發(fā)的，Ts提供的類型定義和規(guī)范可以大幅度提高代碼的可讀性，在主進(jìn)程和渲染進(jìn)程的中間，我們還設(shè)計(jì)了一個(gè)common共享層，用來實(shí)現(xiàn)Ts類型和常量的共享。
PC客戶端項(xiàng)目結(jié)構(gòu)：
PC客戶端項(xiàng)目運(yùn)行和構(gòu)建都基于NPM Script，構(gòu)建release包只需要運(yùn)行: yarn build:prod。構(gòu)建代碼位于app目錄下，由于構(gòu)建產(chǎn)物也是js代碼，很容易被人拿去套殼、植入或篡改。為了防范這些所知的風(fēng)險(xiǎn)，增加被篡改和攻擊的難度，我們需要對構(gòu)建包進(jìn)行加密處理。經(jīng)過不斷的迭代優(yōu)化，我們實(shí)現(xiàn)了一套使用結(jié)合代碼混淆、對稱加密、字節(jié)碼處理、WASM解密和啥希校驗(yàn)的組合式客戶端加密防破解方案。
在打Release包時(shí)，會(huì)把構(gòu)建生成的代碼先進(jìn)行混淆、壓縮處理，再將主進(jìn)程主程序代碼使用AES-256對稱加密生成/app/main/.biliapp文件，將解密和執(zhí)行入口使用字節(jié)碼處理，最后計(jì)算出APP的哈希值。
圖17 PC客戶端主程序加密
當(dāng)PC客戶端啟動(dòng)時(shí)，會(huì)先根據(jù)操作系統(tǒng)和系統(tǒng)架構(gòu)找到對應(yīng)字節(jié)碼入口、解密并運(yùn)行主程序、主程序中校驗(yàn)APP的哈希值，在確定運(yùn)行環(huán)境安全后再正常啟動(dòng)程序。
圖18 pc客戶端運(yùn)行流程
PC客戶端基于electron-builder進(jìn)行打包，Mac的安裝窗口通過electron-builder配置可以直接生成，Windows的專屬一鍵三連安裝程序則是使用NSIS + QT獨(dú)立開發(fā)的。
圖19 PC客戶端安裝引導(dǎo)界面
圖20 基于NSIS+QT的專屬一鍵三連界面
PC客戶端前期版本基于electron-updater進(jìn)行升級更新，每次進(jìn)行版本升級后，都需要用戶重新下載完整的安裝包進(jìn)行覆蓋安裝，由于安裝包體積比較大在網(wǎng)絡(luò)比較差的情況下，升級過程會(huì)比較耗時(shí)影響用戶體驗(yàn)。
在1.9.x版本之后，我們已集成增量更新的功能，只需對app.asar代碼包進(jìn)行更新而不是包含框架的完整安裝包，因此可以提高了升級更新效率和體驗(yàn)。
圖21 PC客戶端升級更新流程
四、PC客戶端的播放體驗(yàn)
類似愛奇藝和騰訊視頻，我們的PC客戶端也是雙窗口模式，即主窗口和播放窗口是獨(dú)立的，可以讓用戶一邊播放視頻一邊刷動(dòng)態(tài)、逛空間、看消息。
得益于PC客戶端渲染進(jìn)程使用WEB技術(shù)開發(fā)，稍加適配，PC客戶端的播放器直接用上了WEB強(qiáng)大的Nano播放器，這使得PC客戶端也擁有了高級彈幕、播放設(shè)置、播放器快捷鍵等功能。PC客戶端還將UGC和OGV播放器集成在同一個(gè)播放窗口，讓視頻類型切換更加順暢，還可以通過前進(jìn)后退播放歷史紀(jì)錄。
PC客戶端的播放質(zhì)量對比WEB播放頁來說，首幀和VV卡頓率會(huì)優(yōu)于WEB，主要原因?yàn)槟芨囝A(yù)載，單實(shí)例，編碼支持統(tǒng)一；而百分鐘卡頓率和錯(cuò)誤率相對WEB來說要略高一些，新平臺(tái)有更多case需要處理，此項(xiàng)會(huì)略高但重試機(jī)制盡量不影響體驗(yàn)。
圖22 PC客戶端和WEB播放頁質(zhì)量對比
對比B站其它端來說，PC客戶端的人均播放時(shí)長是最高的，目前均值已超80分鐘，峰值可達(dá)100分鐘。
另外，PC客戶端還實(shí)現(xiàn)了貼心的“小窗”播放模式，當(dāng)點(diǎn)擊播放窗口右上角的小窗模式按鈕時(shí)或拖動(dòng)改變播放窗口到小尺寸時(shí)便會(huì)進(jìn)入小窗模式。
在小窗模式下：
- 播放窗口可以適配視頻大小比例，實(shí)現(xiàn)無黑邊播放。
- 搭配固定窗口在最前端的功能，可以讓用戶一邊看教程學(xué)習(xí)，一邊實(shí)際動(dòng)手操作。
- 相對網(wǎng)頁的畫中畫，PC客戶端的小窗不僅可以顯示彈幕，而且還沒有原畫頁面的各種限制。
- 這里小窗其實(shí)指的是一種簡潔播放模式，因?yàn)樾〈耙部梢酝蟿?dòng)邊緣調(diào)整大小，變成比“大窗”還大。
圖23 極致的小窗播放體驗(yàn)
圖24 固定小窗在最前端
五、PC客戶端的質(zhì)量保證
PC客戶端在每次上線之前都需要經(jīng)過嚴(yán)格的測試流程，一般在官網(wǎng)上線前4個(gè)工作日需要進(jìn)行集成測試，前2個(gè)工作日出總包并進(jìn)行總包回歸測試。
除了功能測試之外，構(gòu)建也需要保證準(zhǔn)確性，PC客戶端使用Fawkes打包構(gòu)建，但是人工構(gòu)建每次都需要根據(jù)不同的渠道選擇不同的環(huán)境變量，渠道也比較多構(gòu)建容易出錯(cuò)，因此我們開發(fā)了CLI打包工具。
命令行打包工具打通了Fawkes構(gòu)建平臺(tái)和魔鏡測試平臺(tái)，通過命令行選擇渠道、類型和其它參數(shù)，并使用配置列表發(fā)起構(gòu)建。
- 快速發(fā)起Fawkes構(gòu)建，提高打包配置效率。
- 多種模式可選，快速發(fā)起debug/release、簽名、推CD的包。
- 可以避免渠道包打了debug或未簽名的情況。
- 可以避免環(huán)境變量配錯(cuò)、渠道號和渠道名對不上的問題。
- 接入魔鏡自動(dòng)化測試平臺(tái)，保證構(gòu)建包可靠性，不用人力挨個(gè)校驗(yàn)，提高構(gòu)建效率。
圖25 通過命令行工具發(fā)起構(gòu)建
圖26 魔鏡PC客戶端自動(dòng)化測試
六、PC客戶端發(fā)布和上線
PC客戶端于22年5月10日在官網(wǎng)正式上線，在B站W(wǎng)EB首頁頂導(dǎo)、B站下載中心和常用的PC的軟件平臺(tái)如：微軟商店、聯(lián)想商店、華為應(yīng)用市場、騰訊管家等搜索“嗶哩嗶哩”都能下載到最新版本。
PC客戶端的發(fā)布渠道較多，不同的渠道也有不同的要求，新版本會(huì)根據(jù)渠道ID來構(gòu)建并分別投放上架。
圖27 PC客戶端渠道匯總
上線以來，PC客戶端DAU穩(wěn)步增長，目前已達(dá)300萬+。
圖28 PC客戶端DAU數(shù)據(jù)穩(wěn)步增長
各渠道安裝量穩(wěn)步上長，對比官網(wǎng)包占比已達(dá)40%。
圖29 微軟商店~入選精選娛樂應(yīng)用
圖30 華為應(yīng)用市場~閑暇時(shí)光首選
圖31 聯(lián)想應(yīng)用商店~搜索“嗶哩嗶哩”
?本期作者
沈濤
嗶哩嗶哩資深開發(fā)工程師
