# 打造多視窗跨平台應用：一個基於 Electron + React 的企業實戰案例 - 楊騏（Jason Yang）

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

Slido：https://app.sli.do/event/bWV4bApMr6NtpLccBnQjM6

> 開始做筆記

## class swift 課堂互動管理工具
https://www.classswift.viewsonic.io/

加入班級: https://learn-swift.aps1.classswift-stg.com/?roomId=50a42ccb-89da-45d9-9d50-014703375fc5

為何要跨平台
市場使用os 產品不同 為搶市場不影響產品

多視窗螢幕截圖 -> electron支援功能成熟

## 技術棧總覽
1.狀態管理 => Electron : Redux + Reduxtron
2.即時通訊 => React : Socket\.IO
3.打包工具 => TypeScript : electron-builder
4.Vite => 自動更新 : electron-updater

## 特色技術
### 多視窗，且狀態同步
- 選型分析 : Electron / Tauri / Flutter Desktop / React Native
- 主要在Main proccess管理狀態，再Renderer Proccess同步更新到所有視窗
真正的狀態存在Main；而 Renderer 只用hook、不存狀態。

- 狀態更新的處理流程:
(1) getState: 取得狀態
(2) dispatch: 單向派發action
(3) subscribe: 訂閱變化，廣播給所有視窗。
視窗顯示/隱藏 = 改變Redux狀態
=> 達到: 狀態一致性、可預測性、易於除錯。

- 設定Window(視窗)縮放
- 當狀態改變，視窗自動響應

### Toolbar 浮動置頂
老師瀏覽教材時，工具列始終可見，隨時可開啟截圖、計時器等功能。

### 截圖
做了兩層視窗，一層負責接收滑鼠事件，一層負責繪製。

- Overlay Window設定:
1.設為最上層(螢幕保護程式等級)
2.在所有工作區可見
3.滑鼠事件穿透
4.防止被螢幕錄影捕捉(避免錄到選取框)
作業系統 macOS 和 Windows對於 螢幕擷取/錄製 權限的處理不同 : macOS不會主動彈出權限請求對話框。

- 權限處理最佳實踐:
1.提前告知用戶: 在觸發系統對話框前，先用自己的對話框說明原因。
2.處理拒絕情況 : 若用戶拒絕，提供引導到系統設定的選項。
3.只在需要時請求 : 不要在應用程式啟動時就請求所有權限。
4.開發模式繞過權限設定、用Mock圖片代替真實截圖 : 加速開發流程。

- 權限狀態檢查
1.從未請求過權限 not-determined
2.已授權 granted
3.被拒絕 denied
4.被系統限制 restricted

- 使用desktopCapturer
1.找到滑鼠所在的螢幕
2.獲取所有螢幕源
3.找到對應的源

### 用戶登入
- 選型分析: 外部瀏覽器+DeepLink / WebView
- 跨平台差異: Windows用second-instance; macOS用open-url
- 開發模式繞過 : 但要確保不會進入正式環境、定期測試完整登入流程。
- App → 瀏覽器 → 登入 → DeepLink → App

### 軟體自動更新
- electron-updater 設定
- 清理更新快取 : 下載失敗的殘留檔案會導致後續更新出錯，故 於啟動時清理 是必要的。
- 軟體更新時的錯誤處理。

### 跨平台差異
| 功能 | Windows | macOS |
| -------- | -------- | -------- |
| Deep Link | second-instance事件 |open-url事件|
|權限管理|較少限制|需要Entitlements|
|視窗控制|右上角|左上角|
|檔案路徑|`\`分隔符|`/`分隔符|
|快取位置|AppData|Library/Caches|

## 經驗建議 :
1.提早處理跨平台差異 : 不要等到最後才測試另一個平台。
2.狀態管理很重要 : 多視窗更需要 Single Source of Truth。
3.用戶體驗優先 : 權限請求、更新流程都要考慮UX。
4.錯誤處理不能省 : 特別是更新功能，用戶無法自行修復。
5.開發前需要先”定義最低支援版本” : 將會影響技術選型。

> 聊天區

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}