Skip to main content

(Firefox) WebApp自動偵測與安裝腳本

· 2 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 或網址。

Android書範例更新放到Github

· 2 min read

離上一版 Android 書的更新已經過一年多了,終於在最近改版的工作告一段落。 再過一陣子,就可以看到新版本上市了。

這次的所有範例改放到 Github 上。可以前往 https://github.com/gasolin/androidbmi5th/ 下載。

Github 使用 git 作為版本控制系統,並提供很方便使用的網頁介面。

例如我使用分支 (branch) 來管理不同章節的範例程式碼。要在 github 上查看不同章節的程式碼,只要點選 Github 左上角的分枝選單,選取對應的章節,即可查看範例程式碼。

選取對應的章節,查看範例程式碼

此外,也可以透過左上角的「zip」按鈕,下載對應的章節範例程式碼。

若想透過 git 命令下載,可以使用如

git clone https://github.com/gasolin/androidbmi5th.git -b CH36 CH36 命令來取得對應章節的範例程式碼。

本書提供的範例無授權問題,可自由用於各種場合。 若對範例有疑問,可以直接在 github 專案的 Issues 中提問。

從更新的範例中可以看到,第五版本終於做到全書只有「一個」 BMI 範例(包含配對的測試範例)。圍繞著設計 BMI 應用程式的過程,介紹各種 Android 系統的運作與常用功能。我覺得新的改版對第一次入門的讀者來說,學習的過程應該更有樂趣。

Firefox OS Overview簡報

· 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

The Web is the Platform - Firefox OS 動手玩

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

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

下一站, Mozilla, Firefox OS

· 2 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 相關的心得,敬請期待。