Skip to main content

20 posts tagged with "FirefoxOS"

View All Tags

· 3 min read

這陣子在了解如何開發 webapp,其實基本流程很簡單。 要把網頁變成 webapp,最基本的動作就是照著說明寫個 manifest.webapp 檔案,放到網站的根目錄,然後在 web server 的設定加入對應的 MIME type 即可。用 Github Page 放網站的話,最後的 MIME 設定他們都幫我們弄好了。

使用者在電腦上透過 Firefox 安裝 webapp 後,就會多出一個對應的應用程式圖示,開啓這個 WebApp 時不會出現瀏覽器框,感覺就像真的應用程式。在 Android 上透過 Firefox for Android (測試版) 安裝 webapp 後,在桌面上則會多出一個 bookmark 捷徑。

圖:在 Mac 桌面上打開 2 個 webapp,不特別講也分不出來是 Web 還是 App 吧

我在測試的時候,發現寫好了 webapp 之後,使用者連到網頁時並不會自動詢問使用者是否要安裝 webapp。於是寫了以下腳本。

在 Body 標簽中引用以下腳本,即可自動偵測使用者是否可安裝 webapp (現在只有 Firefox Aurora 和 Firefox OS 支援 webapp API)

<script type="text/javascript"> //check if app is installed if( navigator.mozApps != undefined ){var app_stat = navigator.mozApps.getSelf(); app_stat.onsuccess = function() {   if (app_stat.result) {         //instsalled   } else {         // not installed         var manifestUrl = location.href.substring(0, location.href.lastIndexOf('/'))+'/manifest.webapp';         var app_install = navigator.mozApps.install(manifestUrl);   }}; app_stat.onerror = function() {   alert('Error checking installation status: '+ this.error.message); }; } </script> 原始碼包含在 webapplate 專案中。

透過

location.href.substring (0, location.href.lastIndexOf ('/'))+'/manifest.webapp'; 可以自動取得目前的 IP 或網址。

· 2 min read

話說到職 1 個多月了,每天都在學習,用從來沒想過的技術去解決各種問題的感覺實在很不錯。

昨天剛好有機會到成大計中,和修課的同學介紹 Firefox OS。也剛好把過去幾個月來對 Firefox OS 的了解做了一次整理。

在 1 小時的簡報之後,還接著 2 小時的上機實作課程。

上機課程中我做了一個看來很眼熟的範例,搭配 Github 實際拿來教學的效果也很不錯。

同天西班牙剛好也有個App Days活動,用整天更深入介紹 Firefox OS,簡報也可以下載。

Firefox OS 整個系統運作可以到 http://www.mozilla-hispano.org/archivos/docs/fxosappdaysvall/arquitectura.pdf 查看。(工商服務一下,Firefox 已經內建 PDF viewer,網頁上直接開 PDF 不用先下載)

WebAPI 簡報 http://www.mozilla-hispano.org/archivos/docs/fxosappdaysvall/webapis.pdf

· One min read
(不知道為什麼影片解析度要用360p這麼低)

Mozilla Co. 的 VP of Products Jay sullivan 來展示「Firefox OS」目前的版本, 其中桌面有個「everything.me」功能,除了可以用來裝 Web App 外, 因為 Web 的特性,所以不用像其他平台需要先安裝好再試用 App,而可以直接點選開始使用 App (Web)。 把 web 變成不需安裝、反安裝,隨查隨用的一次性 app 的概念還蠻有趣的。

· 3 min read

一直以來,在業餘時間裡我做了不少 Mobile App,寫了本 Android 開發書籍,參與並研究了一些 Web 框架和服務。前年開始也直接將Play!Django等 Web 框架,和 Android 開發的經驗應用在工作上。

我相信整合 Web 與 Mobile,以雲為基礎建設,讓連網設備 / 使用者得以跨平台在各種終端使用的應用,會是接下來技術的趨勢。

在主持GTUG Taipei 活動的兩年時間裡,跟著學了很多新東西,從中我也發現,現在已經有許多企業級或跟 Mobile App 開發相關的技術,都可以歸類到 Web 技術範疇了:

  • 越來越多人使用 JSON 來取代 XML
  • 各種 RPC 紛紛改成使用 RESTFUL API* non-rel, 適應雲端架構的MongoDB也可直接將資料儲存成 JSON 格式
  • Web Server 端可以使用 node.js 寫,透過 Event callback 形式的呼叫,可以得到很好的效能
  • 可以使用PhoneGap/Cordova來封裝成各行動平台的 App
  • 最近名字跟 Microsoft 連在一起Titanium 也可以用網頁技術生成各行動平台的 App

因此當我知道 Firefox OS 在台灣有開發團隊時, 我告訴自己:這是個可以待在台灣,同時又有可能改變世界的機會。

我很幸運,待的前公司環境與同事也非常好,可以推薦給大家。 當然,也歡迎大家來和我作伙伴

接下來我的分享應該會多出不少 Firefox OS 相關的心得,敬請期待。

· 4 min read

Firefox OS 是 Mozilla 基金會的新產品,將行動裝置與瀏覽器做更緊密地結合。 號稱只要會寫 Web App,就能開發 Firefox OS App。

下午剛好看到介紹文章,裡面提到有提供跨平台能執行的模擬器,就決定動手來試裝看看。

開發環境設定

1. 安裝 FIrefox 15 + 版本 2. 前往 http://people.mozilla.org/~myk/r2d2b2g/ 下載並安裝對應版本插件 3. 裝完可以透過 選單 > 工具 > 網頁開發者 > Firefox OS Simulator 開啟類似 Chrome 的開發者頁面

4. 按下左側 Simulator 項目,將執行狀態變成 Running 狀態。等一陣子即可在另一個視窗上看到 Firefox Simulator

導覽

畫面上往右拉可以看到 App 列表。裡面已經附上不少 APP 了。包含行事曆、鬧鐘、Email、音樂、影片播放器、計算機、PDF 閱讀器、地圖、等等。這些都是用 WEB 相關技術寫的(酷!)。

當然瀏覽器附的是 Firefox。Android 的 Application 號稱 "All Applications are equal",亦即連官方應用也是用一樣的 Application API 寫成。不知在 Firefox OS 上,Firefox Browser App 本身算不算 Web App,開發者能不能簡單地為 Firefox 改頭換面寫一個瀏覽器 App?

由螢幕頂端往下拉可以看到通知欄,下方有快速設定工具列,感覺還不錯。

在首頁往左拉是一堆預載的網頁服務書籤(或是說... 網頁應用程式),點了 Facebook 圖示後半天沒載入畫面,看來還有些待改善之處。

整體看來完成度頗高。在可見的未來裡,學會了網頁技術,什麼都能做阿。

必須面對的問題:如何保護程式碼?

比起那些網頁版桌面項目,Firefox OS 更有實用價值。但是對開發者來說,使用 Web App 開發雖容易,但也容易遇到如 Web OS 遇到的相同問題:「如何保護我的離線 Web App 的程式碼?」

在 Web OS 上,開發者可以找到 App 的目錄,解開來裡面自然是不需編譯的 HTML 等資源,有心人可以拿來參考或簡單修改後再發佈。這也是 Web OS 開發者開發意願不高的原因之一。

雖然許多開發者並不在乎把原始碼攤開在陽光下,但大廠或部分開發者對此總是有所顧慮。 也許未來幾年持續連線的行動網路會便宜地和自來水一樣,到時那些把程式邏輯隱藏在伺服器端的「連網型 Web App」可能是個答案。

參考資料