自從知道有 Shared Worker 這個好東西後,就很想實作看看。
有兩項吸引我的特色:
- 可以多分頁共享資源
- 不用 Https 也可以運作
想解決的痛點
因為在 QTS 環境中,除了桌面還有各種 QPKG ,時間久了自然就有顯示桌面或是 QPKG 個別服務狀態的需求。過往都是前後端想辦法自行引用對方資料。
A:後端呼叫對方 API ,看對方提供 API 類型實作
缺點:每個 Service/QPKG 提供的 API 方式不一致,在開發上並不友善,最慘就是後端要發 HTTP Request 來取得資料。
B:前端呼叫對方 HTTP API ,按自已需求解讀需要的資料
缺點:因為資料不共享,因此有多個 QPKG 都需要同一個 API 提供資訊,就有重覆呼叫的問題(痛點1),過往的解法通常是靠 QTS 桌面來暫存及分享資料,但是如果是可以獨立開啟的頁面就沒有 QTS 桌面可以靠(痛點2),以上兩個痛點是我想透過 shared worker 來解決的。
如果已經在對方 UI 已經有顯示的內容,最現想的情況是有一個 API 可以直接取得資訊,不該花大量時間閱讀 API 文件、組合各種資料。
開發時遇到的困難
- 不能解析 XML
因為桌面的 CGI 回傳的內容大部份都是 XML 格式,沒想到在 shared worker 的執行環境無法呼叫DOMParser
造成 XML 解析困難,又不想特別為了解析 XML 又從 NPM 包進其他第三方 lib(明明 browser 本身就可以處理了😠)。
解法:我選擇的是把 XML 解析工作丟回 window 處理,因此多包了一層如果是 JSON 就沒有這個問題。 - 版本更新問題
shared worker 的特色就是多個分頁可以共用同一個 worker,但是也帶來另一個問題。如果有某一個分頁一直沒有關閉那 worker 就會一直存在,後續開啟的分頁也就會使用舊版本的 worker 。造成無法有新版本但無法載入新版本 worker 的問題。
解法:在路徑中加入版本號,可能是 firmware 版本或是自訂版號,例如/shared_worker/v6.0.0/worker.js
或是/shared_worker/v1/worker.js
但是引用方需要修正路徑蠻煩的。