B2G並未一定要開發者把應用程式發表到一個特別的app store, 網站也可以自行加一個install按鍵, 讓使用者把你的網站當應用程式裝到手機內

首先, 你必須要先有個manifest, 目前manifest並沒強制的檔名, 但文件裡建議叫 xxxx.webapp, 以下是範例內容:

{ "name": "MyTestApp", "description": "test app", "launch_path": "/", "icons": { "128": "/img/icon.png" }, "developer": { "name": "Julian Shen" } }

 

然後在網頁內加上檢查是否安裝, 以及安裝的程式碼, 範例如下:

var manifestUrl = 'http://localhost:3000/manifest.webapp'; var app = navigator.mozApps;  function checkInstalled() { var request = app.getSelf(); request.onsuccess = function() { if(request.result) { //installed console.log('installed'); document.getElementById('installmsg').style.display='none'; } else { //not installed console.log('not installed'); } }; }  function install(cb) { var request = app.install(manifestUrl); request.onsuccess = function() { alert('installed'); };  request. function() { alert('Not installed'); } }
這邊要注意的是manifestUrl必須是full path而不是只有相對位置, 寫相對位置, 它還是讀的到, 但會出parse error, 之前害我搞半天一直以為是格式問題, trace了一下Webapps.js, 發現可能是判斷install origin有問題
目前安裝介面很醜:
_2012-05-08_2
安裝完就可以在Home screen看到它的存在了:
_2012-05-08_2

Source: https://bitbucket.org/julianshen/videomag/overview

Demo URL: http://growing-wind-8625.herokuapp.com/top

Server: Play framework 2.0 on Heroku

Open graph object: Youtube video, Action: watch

It’s not a problem to add youtube video since it already contains open graph meta data in page. All we have to do is call “/me/video.watches?video=youtube_link” with POST.

To post activity to timeline, the permission “publish_actions” is required. 

The result on timeline:

_2012-04-13_2

The following example shows how to create a simple Facebook login button with Facebook javascript API:

Normally, this page would be reloaded if user finished authorized your app. But it won’t be reloaded in Chrome due to the follwing error:

Unsafe JavaScript attempt to access frame with URL https://s-static.ak.fbcdn.net/connect/xd_proxy.php?version=3#cb=f363e58d9&origin=http%3A%2F%2Fwww.ab.com%2Ffcb27588&relation=opener&transport=postmessage&frame=fac4c0f18&access_token=AAAEHZBpoK3B0BALv8Cf96gaKEnn4ZBtXgjCOQCFFhVDL4K0rZAE2NGDcqZCPlZByNNKEDmYSGKHQv8jAUM2yGZCHkOcyXUKhoZD&expires_in=0&signed_request=g7sYd_XQx-EBPtQQGk-0ISRMrUDnT4L4WHAmlNsVFBU.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUURKYkZBNjZuemduSDBBN0dXWmd2SGxZZkQxQVp4Qm1MSnc0Z3ppUV9FQ25VeEYyZmcyTmJGcFh3UHZDeWhyYnFrT1RxNmRVc2xsb0d4dlFCd290UjRyV0ZsSnJtVjFoNy1QUTlJbTRROXh3MmNKMGU1b0NReWtmT1ZZcXhMUDRVRldVSDgwVU5ic1BLTHdyNk80cFlSVVItQzNIYjhyRWgxek40ZFEzSkpreXhBcU1KSHljcWxETzh2dF96T3ZpN0EiLCJpc3N1ZWRfYXQiOjEzMzExMzg3MjQsInVzZXJfaWQiOiIxMTI5MjgzNDM3In0 from frame with URL http://www.ab.com/login.html. Domains, protocols and ports must match.

Some people use FB.getLoginStatus() to check if user authorized app at page loaded. If page could be reloaded, it’s no problem. However, in this case, it’s not. 

There are several questions on StackOverflow related to this:

http://stackoverflow.com/questions/3577947/facebook-gives-unsafe-javascript-attempt-to-access-frame-with-url-error-in-chr

http://stackoverflow.com/questions/8013008/facebook-authentication-unsafe-javascript-attempt-to-access-frame-with-url

http://stackoverflow.com/questions/3010170/unsafe-javascript-attempt-to-access-frame-with-url-error-being-continuously

But none of these solves my problem. I don’t want to solve this with introduce PHP sdk. I would like to solve it with pure front end codes. 

Therefore, I find 3 solutions:

  1. Ignore the error and register login event to solve the problem:
  2. Add attribute “show-faces="true”“ to <fb:login-button> to solve
  3. Add attribute "render-in-iframe="true”“ to <fb:login-button> to solve. This is a bad idea since this is an undocumented attribute.

In solution 2 and 3, login-button seems to be placed into an iframe. And 3 would display an incomplete login button (bug?)

    Thrift是由Facebook開發的一套RPC system, 廣泛的被很多軟體應用, 像是HBase, Hadoop, Cassandra… 也支援了許多語言 , 可以跨語言做RPC

    但….Thrift的document真是么壽的少…少的實在有夠可憐….本來想說實作一個java client連到node.js寫的server, 搞半天東挖挖西挖挖後才搞定…..

    首先是安裝到我的mac就把我搞暈了(加上感冒本來就暈), 一開始我用macport裝, 但裝完後, 找不到libthrift.jar, 所以只好上網站抓source來build, 所幸可以只build java library的部份, 不用整個thrift都build, 這部份倒不難, 用ant就搞定了

    裝完thrift後, 寫好程式, build java版本時就出了問題了, javac說TClient不是個interface, 追進code才發現, 我自己build的jar是最新版的 (0.8), 但port幫我裝的是0.6, 產生的codes完全不相容, 後來改用brew裝(就是不想從頭從Source build), 終於是0.8版的了(port上的也太舊了吧)

    這邊實作一個簡單的加法器, Server side是跑node.js, Client是java, 有空在來試試別的組合, 建一個新檔"computer.thrift", 內容如下:

    這邊定義一個簡單的Service - “Computer”, 只含有一個方法"add", 內容很簡單, 就是用來回傳a+b的值, “namespace java com.thrift.gen"的用途就是指定產生的java code的package, 如果沒指定就是沒package, i64指得就是64bit integer

    接下來就是要用thrift產生對應的程式碼:

    thrift –gen js:node –gen java computer.thrift

    這行指令同時產生for node.js的版本(在gen-nodejs目錄), 跟java版本

    Server implementation

    先安裝thrift module (for node.js)

    npm install thrift

    實作server.js:

    https://gist.github.com/1523666.js?file=gistfile1

    在Server裡面實作add, 由於是asynchronous的, 所以結果由callback回傳

    至於Client端的部份也蠻簡單的:

    在網路上找到的sample, 都使用TSocket, 但用TSocket在這範例, client/server都會掛掉, 追了server code發現, node.js server default應該是用Framed transport, 所以在Client端加上TFramedTransport就OK了

    Sencha Touch 2.0在OO的包裝上做的還算不錯, 把MVC的角色切分的還蠻清楚的, 以List為例, 大概就像這樣:

    _2011-11-05_5
    但它的document實在很糟糕, 光看他的document大概僅知道, Proxy可分為兩類Client(Memory, Local Storage … )與Server (AJAX, JSONP …)

    但如果是要用Facebook Java script SDK去存取Facebook Graph API這類, 似乎就不知道怎歸類了, 如果直接用JSONP去存取Graph API, 則碰到Authentication error.. orz

    那…就只好寫一個Proxy了, 像這樣:

    https://gist.github.com/1341345.js?file=gistfile1

    以下是一個使用這範例存取使用者自己的Facebook Group的範例:

    https://gist.github.com/1341348.js?file=gistfile1