Web Activity

by Alive Kuo - - posted in mozilla,javascript,html5 | Comments

Web activity是由Mozilla設計並開發，用來使web app之間共享資源的框架。 在Firefox OS中已經存在Platform/UI上的實作，並且有一些內建的主要Web app已經利用Web activity來達成跨應用程式溝通的目的。 （如：Gallery使用它來讓其他程式從它挑選圖片，也用同一技術來實現圖片分享到不同應用）

以下介紹如何使用這個新穎的技術。

Request

假設今天E-mail應用程式需要從圖片集中挑選圖片來寄送， 那麼它必須新增一個Activity物件如下：

1
2
3
4
5
6
7

  var a = new MozActivity({
    name: 'browse',
    data: {
      type: 'image/png',
      url: '...'
    }
  });

type欄位是用來當filter用的 在data中的其他欄位可以傳你想要的資料給接收方。

當收到資料後，處理回呼函數的方式：

1
2
3
4
5
6

  a.onsuccess = function on_success() {
    var image = a.result;
  };
  a.onerror = function on_error() {
    console.warn('error when picking!');
  }

Reciever

接受某個Activity的App必須在Manifest.webapp中宣告：

1
2
3
4
5
6
7
8

"activities": {
   "pick": {
     "filters": {
       type: ["image/png", "image/gif"],
     },
     "disposition": "window"
   }
 }

並且在自己的javascript檔中寫好當Activity產生時的處理函式

1
2
3
4
5
6
7
8

navigator.setMozMessageHandler('activity', function(a) {
  var image = getImageToReturn();
  if (!image) {
    a.postError("NoImage");
    return;
  }
  a.postResult({ type: "image/png", url: image });
});

data/type的用法

如聯絡人程式可以接受同一個叫做pick的Activity， 但是電子郵件程式需要的是’email’這類資料， 而電話程式需要的是’號碼’這類資料， 對於這兩類資料需要呈現的UI與最後傳回去的資料當然會是不一樣的。

解決方法就是利用不同的data type來區分同種activity的不同需求：

1
2
3
4
5
6
7

  // Email app
  var a = new MozActivity({
      name: 'pick',
      data: {
        type: 'web-content/email'
      }
  });

1
2
3
4
5
6
7

  // Dialer app
  var a = new MozActivity({
      name: 'pick',
      data: {
        type: 'web-content/numbers'
      }
  });

在聯絡人程式中

1
2
3
4
5
6
7
8
9
10

navigator.setMozMessageHandler('activity', function(a) {
  switch(a.source.data.type) {
    case 'webcontacts/numbers':
      // ...
      break;
    case 'webcontacts/email':
      // ...
      break;
  }
});

如此一來就可以分開處理UI變化及後續回傳資料的部分。

多於一個可以處理的Reciever?

比如圖片應用程式可以分享的對象有兩個以上的時候， Firefox OS的系統UI便會自動列出可用的應用程式清單，如圖：

結論

Web activity是一個實驗中的新功能，雖然還有一些地方未盡完善， 但是看著它從spec到platform implementation到UI implementation， 就好像親身參與了網路/網頁進化的過程一樣。

Comments