HTML 在瀏覽器之外的延伸應用 (上)

我的朋友幾乎都知道我是《星際大戰 (Star Wars)》的重度阿宅粉絲。我長期使用的網路代號是「cfjedimaster」;也就是「cf」與「絕地大師 (Jedi master)」的組合。是的,我熱愛的另一樣東西就是「ColdFusion」。我工作的房間堆滿了星際大戰玩具,還在身上弄了兩個有關星際大戰的刺青。而目前對我職涯影響最深的電影,就必須提到《創:光速戰記 (Tron)》。

Tron_poster-250x373

我之前就對電腦很有興趣,但要到《創》這部電影才真正讓我的想法具體化。我突然幻想著自己是個程式設計師,建立智慧型程式並開始控制整個網格。對啦!我知道你看到這心裡會想著:「又在講宅言宅語了」。

我大學時代主修電腦科學 (Comp Sci) 時,就發現自己心中的夢想撞上了「現實」這面牆。首先,一開始修《微積分 (三)》時,本來以為自己數學程度有多好根本都是假相。其次,我發現自己其實對「哪個的效能比較好」沒那麼感興趣,結果我雖然改主修英文 (往往是很好的策略),但沒完全放掉電腦的相關課程。我也正好在這段期間遇上「Mosaic」瀏覽器和早期剛萌芽的 Web。

我很快的又一頭栽進網路。說得直接一點,我發現寫程式比之前要簡單許多。我還對「LiveScript」有印象,也記得我的第一組 Perl CGI 指令碼。這當然不是在寫《創》中的光輪,但在當時來說已經比較簡單、有趣,而且走在時代尖端了。我當 Web 開發者的時間還不算短,而且我還抱著「Web 屬於原始環境」的錯覺,但對我 (還有其他許多人) 來說已經是不錯的環境了。我更期待能看到 Web 能持續進化到哪種地步。

說到最有趣的現象之一,就是 Web 技術都在網路以外的地方發展茁壯。透過這篇文章,我要談談可在非網路環境中重新使用的網路技術 (如 HTML、JavaScript、CSS)。如果要說一個人完全不用再學其他技術,或說網路標準可用在任何情境或任何條件下,其實都有點荒謬。我自己認為:網路背後的技術,其實就是要開放給許多不同領域的人所用 ─ 就算你沒唸到電腦科學博士應該也能運用自如!

行動裝置

一般文章到這裡應該要先討論行動裝置的重要性,但現在都已經 2014 年了,重要性應該不需要我多提。目前行動裝置主要在 Java (Android) 或 Objective-C (iOS) 上發展。當然,開發者也能用 Web 標準建立原生 App,而其中一個解決方案就是 Apache Cordova;也就是 PhoneGap。

Cordova 是以原生 App 來包裝一個 Web view,讓開發者能建構出所謂的「混合式 (hybrid)應用程式。而Cordova 除了可輕鬆將 HTML 轉為 App 之外,也具備多樣的外掛程式。讓你能執行一般網頁在行動裝置上所達不到的功能。以下範例就能讓你輕鬆存取相機:

你當然也能搭配 GPS、加速規、檔案系統、聯絡人資訊,還有更多功能。Cordova 另提供一組 JavaScript API,可於後端和原生程式碼溝通。另外最棒的一點,就是相同一組程式碼就能建構不同平台的原生 App (Cordova 與 PhoneGap 現也支援 Firefox OS)。

說得明白點,這裡可不是封裝個現成網站而已。從定義上來說,行動 App其實與一般單純的網站完全不同。但因為開發者可運用現有的 Web 知識,所以一開始就擁有優勢。

另一個本站讀者應該已經很熟悉的範例就是 Firefox OS。與 Cordova 不同的是,開發者不需將自己的 HTML 包裝到 Web view 之中。整個 Firefox OS 都是以 Web 標準為架構。讓 Firefox OS 更迷人的一點,就是可支援架設/托管式 (Hosted) App。目前 Firefox OS 仍屬於新平台,所以使用者還不是很多。但有了架設/托管式 App,我能針對 Firefox OS 裝置輕鬆支援安裝作業,同時又能以傳統 URL 提供 App 的服務。

這裡用我建構的簡易《INeedIt》做示範。如果你用 Chrome 瀏覽,INeedIt 應用程式就會平順執行;用Android 或 iOS 的行動瀏覽器也是一樣運作。但如果是用 Firefox,就會觸發程式碼並詢問你是否要安裝 App。以下就是可處理此作業的程式碼。

看起來真的很簡單對吧?我之所以喜歡這組程式碼,就是因為它在 Firefox OS 以外的平台上就會完全被忽略,但又可提供給 Firefox OS 使用者運用。我不用冒任何風險,就能在裝置螢幕上提示消費者決定是否下載我的 App。

Firefox_OS_Simulator

 

看到這裡,是否讓你對 HTML 有更深一層的認識了呢?接著會跟大家說明桌機上的延伸應用。可別錯過《HTML 在瀏覽器之外的延伸應用 (下)》。

 

原文連結:HTML out of the Browser

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *