Shared Worker 開發記錄

Dian
Nov 2, 2024
Photo by Tim Mossholder on Unsplash

自從知道有 Shared Worker 這個好東西後,就很想實作看看。
有兩項吸引我的特色:

  1. 可以多分頁共享資源
  2. 不用 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 文件、組合各種資料。

開發時遇到的困難

  1. 不能解析 XML
    因為桌面的 CGI 回傳的內容大部份都是 XML 格式,沒想到在 shared worker 的執行環境無法呼叫 DOMParser 造成 XML 解析困難,又不想特別為了解析 XML 又從 NPM 包進其他第三方 lib(明明 browser 本身就可以處理了😠)。
    解法:我選擇的是把 XML 解析工作丟回 window 處理,因此多包了一層如果是 JSON 就沒有這個問題。
  2. 版本更新問題
    shared worker 的特色就是多個分頁可以共用同一個 worker,但是也帶來另一個問題。如果有某一個分頁一直沒有關閉那 worker 就會一直存在,後續開啟的分頁也就會使用舊版本的 worker 。造成無法有新版本但無法載入新版本 worker 的問題。
    解法:在路徑中加入版本號,可能是 firmware 版本或是自訂版號,例如 /shared_worker/v6.0.0/worker.js 或是 /shared_worker/v1/worker.js 但是引用方需要修正路徑蠻煩的。

實作

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Dian
Dian

Written by Dian

學習>吸收>實作>再學習

No responses yet

Write a response