2015년 4월 21일 화요일

Firefox App 개념 대충 정리

MDN App Center
https://developer.mozilla.org/en-US/Apps

[Quickstart]
https://developer.mozilla.org/en-US/Apps/Quickstart

[Getting Started, 한글판]
https://developer.mozilla.org/ko/Apps/Getting_Started

[App Manifest]
 : https://developer.mozilla.org/en-US/Apps/Build/Manifest

- manifest.webapp (.webapp extension은 필수)
- root directory 내에 위치
- JSON format, Content-Type은 application/x-web-app-manifest+json 이어야 함.
- manifest 에서 참조되는 internal path들은 same origin내에 존재해야 함.

- Firfox marketplace 등록 시 필수 항목들
 : name, description, launch_path( for Packaged Apps), icons(128x128 필수, 512x512 옵션), developer, default_locale, type
- generic Open Web Apps
 : name, description, icons(128x128 required, 512x512 recommended)

- optional fields
 . activities
  : 타 app에서 사용가능한 기능을 제공하는 Web Activities의 조합이며 어떤 activity를 지원하는지 정의. 하단은 png, gif 이미지를 share' 하는 activity를 지원하며

"activities": {
  "share": {
    "filters": {
      "type": [ "image/png", "image/gif" ]
    },
    "href": "foo.html",
    "disposition": "window",
    "returnValue": true
  }
}
 . installs_allowed_from
  : app이 설치 가능한 하나 이상의 URL, 구입해야 할 필요가 있는 app이라면 유용하게 사용될 수 있을 듯. default 값는 "*".

"installs_allowed_from": [
  "https://marketplace.firefox.com"
]
 . messages
  : 지정된 message들에 대해서 해당 page가 보여지도록 할 때 사용 됨.

 . permissions
  : app에서 사용할 device api들을 명시함.
  : 상세 permission list
   . https://developer.mozilla.org/en-US/Apps/Build/App_permissions
   . 3단계의 permission level이 존재함.
    > Web apps : basic level의 permission만을 사용 가능
    > Privileged apps : web app의 permission이상을 가짐. Hosted app 포함 안됨.
    > Internal (certified) apps : web app과 privileged app의 permission을 모두 가짐.
      : system level app들이나 Mozilla/operators/OEM들에서 만들어짐 앱들.


[Same Origin Policy]
https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/App_manifest_FAQ
http://charlie0301.blogspot.kr/2013/12/jquery-ajax-same-origin-policy-jsonp.html


[App installation]
 . app 설치 여부 확인할 경우 navigator.mozApps.getSelf() 를 사용
  : 특정앱의 설치 여부를 보려면 navigator.mozApps.checkInstalled()로 확인

var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
  if (request.result) {
    // we're installed
  } else {
    // not installed
  }
};
request.onerror = function() {
  alert('Error checking installation status: ' + this.error.message);
};
 . app 설치를 위해서는 navigator.mozApps.install() 사용.

var request = navigator.mozApps.install("http://path.to/my/example.webapp");
request.onsuccess = function() {
  // great - display a message, or redirect to a launch page
};
request.onerror = function() {
  // whoops - this.error.name has details
};

[Device APIs]
https://developer.mozilla.org/en-US/Apps/Reference/Firefox_OS_device_APIs


[Simple Push]
 : https://developer.mozilla.org/en-US/docs/Web/API/Simple_Push_API
 : https://github.com/Redth/PushSharp/wiki/How-to-Configure-&-Send-FirefoxOS-Push-Notifications-using-PushSharp

Mozilla Push Notifications Flow
이미지  : https://camo.githubusercontent.com/2320ecab764e5493c5f3c1d28ef8e11430629de6/687474703a2f2f61726374757275732e6769746875622e696f2f6c6f6e646f6e5f6d65657475705f66697265666f786f732f696d672f706e735f6578616d706c652e706e67

 . Firefox OS에서만 지원.
 . App은 Simple Push를 사용하기 위해 unique한 endpoint를 Mozilla push 서버로 요청 함. 이후 전달받은 endpoint를 App은 자신의 server에 저장한 뒤 app을 wake 시키기 위해 사용함.
 . push시 endpoint와 version number도 함께 전달할 수 있어 이를 app에서 사용 가능함.
 . push를 unregister 하기 위해서는 PushManager.unregister()을 호출.
 . 사용하기 위해서는
  > manifest 파일 내 message로 "push", "push-register"로 event를 받을 page 등록.
  > manifest 파일 내 permissions에 "push" 등록.
  > PushManager.register()를 사용하여 endpoint 요청.
  > 수신 받은 endpoint를 추후 사용하기 위해 자신의 server에 등록하여 저장.

if (navigator.push) {
  // Request the endpoint. This uses PushManager.register().
  var req = navigator.push.register();
  
  req.onsuccess = function(e) {
    var endpoint = req.result;
      console.log("New endpoint: " + endpoint );
      // At this point, you'd use some call to send the endpoint to your server. 
      // For instance:
      /* 
      var post = XMLHTTPRequest();
      post.open("POST", "https://your.server.here/registerEndpoint");
      post.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      post.send("endpoint=" + encodeURIComponents( endpoint ) );
      */
      // Obviously, you'll want to add .onload and .onerror handlers, add user id info,
      // and whatever else you might need to associate the endpoint with the user.
    }

   req.onerror = function(e) {
     console.error("Error getting a new endpoint: " + JSON.stringify(e));
   }
} else {
  // push is not available on the DOM, so do something else.
}
  > app에 push notification 수신 시 처리할 handler들을 등록 (window.navigator.mozSetMessageHandler())
    : push message handler는 index.html, main.js 아님 message handler만을 가지는 특정 파일(push-message.html)에 위치해야 한다. app이 종료되고 push message를 받는다면 message handler에서는 background로 처리를 해야할 지 app을 실행시켜야 할지 판단해야 하기 때문.
    : push-register message handler는 push server 변경, 일시 중지 등의 이유로 device의 internal identifier(UAID, User Agent Identifier)가 변경될 경우 이를 알려 app들이 다시금 endpoint를 register하도록 하기 위해 호출 된다.

  > notification 보내기

curl -X PUT -d "version=5" https://updates.push.services.mozilla.com/update/abcdef01234567890abcdefabcdef01234567890abcdef

[Contacts API]
 : https://developer.mozilla.org/en-US/docs/Web/API/Contacts_API
 . Firefox OS와 Firefox mobile(Android)에서 지원
 . system의 address book에 저장된 contact들을 접근하려면 navigator.mozContacts property를 사용해야 한다.
 . 연락처 추가, 검색, 수정, 삭제 지원
 . 연락처 찾기
  : ContactManager.find(), ContactManager.getAll()을 사용함.

[Notification API]
 : https://developer.mozilla.org/ko/docs/Web/API/notification

 . HTML5 feature라 Firefox외 Android browser, Chrome desktop 에서 지원한다.
  : http://caniuse.com/#feat=notifications
 . 구현 방법
  : https://developer.mozilla.org/en-US/docs/Web/API/Notification/Using_Web_Notifications

댓글 없음:

댓글 쓰기