「FlyWeb」純正的 Web 跨裝置互動 (下)

Mozilla Taiwan
4 min readNov 14, 2016

--

看過了〈「FlyWeb」純正的 Web 跨裝置互動 (上)〉對「FlyWeb」的簡介,以及〈(中)〉說明瀏覽器之間的互動之後,接著再稍微解說「FlyWeb」將如何用於智慧型硬體、物連網 (IoT),以及未來的可能潛能。

智慧型硬體

假設你現正打造硬體裝置,可能是新的恆溫器,或是自己的家用無人機,但不論怎樣都需要 UI 來控制硬體對吧?現在你有幾個方式:

寫個智慧型手機的 App

這應該是目前大家想到的第一個方法,但還是有幾個問題,像是開發智慧型手機 App 的門檻仍不算低。你必須先設定開發環境,接著下載該環境專屬的 SDK\開發工具。寫完 App 並編譯成「組合 (Bundle)」,再載入到手機之中。如果你想讓其他人也能輕鬆用你的 App,就還要將之發佈到商城裡 (App 還得通過審核) 並維護。反正很費工啦!

此外,你還必須針對不同平台打造各種版本的 App。還想在自己的 Windows 或 Mac 筆電上使用 App 嗎?再寫另個版本的 App 吧!無論如何,這絕對不是最方便的開發體驗。

在自己的裝置上打造 Web UI

這方法簡單多了。你不須寫個原生 App,且 UI 可用於不同的平台之中,更不須將 App 提交到商城裡,還不用包成 App 組合才能給他人使用。但是,存取 UI 就不方便了:你要先開啟瀏覽器,找到裝置的 IP 位址並輸入才能使用。

這個方式也容易出錯。如果你稍晚正好用相同的私人 IP,也在同樣的區域網路 (例如 192.168.1.1:80) 上存取其他服務,則第一項服務所儲存的 cookies 就會遭到第二項服務所竊取。另外,當你使用第二項服務時,也可能進入第一項服務的快取頁面,所以必須謹慎使用快取機制。

用 FlyWeb

FlyWeb 的方式基本上類似上述第二種方法,但另外加入了某些魔法。首先就是透過 mDNS 達到宣告的目的,且瀏覽器 UI 會依照名稱找到服務,而非手動輸入 IP 位址。再來就是能產生專屬的主機名稱。目前只要連上任一服務,瀏覽器就會產生 1 組 UUID 作為該服務的主機名稱。兩項服務之間絕不會共用兩組 UUID,因此可避免如 cookies 外洩或快取交叉污染的問題。

在強者 Kate Glazko 的協助之下,我們以 Parrot AR 無人機搭配 Raspberry PI (用來控制無人機並作為 FlyWeb 伺服器) 設計出了展示程式,也在 2016 年 6 月的 Mozilla All-Hands 會議中亮相:

你可到我們的範例 repo (在「flyweb-quadcopter」資料夾裡面) 找到此展示的原始碼。我們也針對如 ESP8266 (僅要價 $5 的 WiFi 晶片,還搭載 1 組嵌入式微控制器) 的簡易硬體,設計出展示程式。FlyWeb 伺服器可在極小型的硬體中執行。由於 Web 平台可動態的將控制 UI 連上功能更完整的手機或電腦,因此即便是低功耗的小型裝置也能提供完整 UI。

「FlyWeb」的下一步

目前此功能剛實作完畢,並僅能用於 Firefox Nightly 之上,偏好設定亦預設為關閉。目前仍屬於「版本 0」的實作,已可設計某些酷炫展示並體驗 FlyWeb 的潛力。

我們團隊的現有目標,是讓早期開發者與熱血貢獻者能搶先賞玩此實作,提供未來「真正」Web 標準功能的意見。不論你是想在區域網路上提供多人體驗的 Web 開發者,或是想為自己產品提供簡易 UI 的硬體開發者,都歡迎來試看、試玩我們的 FlyWeb,提供寶貴意見給我們。

如果你認為此功能深具潛力,想藉著打造某些產品,或協助我們後續實作 (我們只是 2 人的小團隊,進行著此仍屬實驗性質的專案),可前往 flyweb.github.io 了解進一步資訊。另可在 Slack 的 mozflyweb.slack.com (到這裡註冊) 上找我們聊天;亦可透過 Twitter 的 @MozFlyWeb 知道最新消息。

小小警告

還是得提醒大家一點:目前 FlyWeb 仍是極為草創的實作,其中有很多錯誤與安全問題。如果你想體驗 FlyWeb,建議你應該建立新的 Firefox 設定檔,並請不要透過此設定檔瀏覽一般網頁。此獨立的設定檔僅用來執行 FlyWeb 展示程式或自己的程式碼。

祝開發愉快!

原文連結:FlyWeb — Pure Web Cross-Device Interaction

--

--

Mozilla Taiwan

我們是Mozilla 美商謀智台灣分公司,由非營利組織 Mozilla 基金會所擁有,在台灣為自由開放的網路未來而努力。