Chrome App 개념 대충 살펴보기

그냥 찾아봄.

[Create Your First App]
: https://developer.chrome.com/apps/first_app

1. manifest 생성
 . chrome app에서는 background로 실행되는 script를 정할 수 있음.

2. background script 생성
 . background로 주기적으로 실행되며 event에 따라 app을 관리함.

3. window page 생성
 . 화면에 app을 보여주기 위해.
4. App icon 정하기
5. Chrome상에서 App launching
 . Chrome setting icon > Tools > Extension
   : Developer mode check 되어 있는지 확인
   : Load unpacked extension 버튼 클릭 후 app folder 선택

* 간단하네...


[Chrome App 관련 개념들]
: https://developer.chrome.com/apps/app_architecture

. Chrome App은 browser tab이 아닌 그냥 비어 있는 사각형에 표시되므로 특성에 따라 UI를 구성해야 함.
. Chrome App에서는 오프라인에서의 동작, 보안의 이유로 local상에서 main page를 위치하도록 하고 있음.



[App Life Cycle]

Life 설치 부터 삭제 까지의 주요 상황은 다음과 같음
- Instaillation : app 설치 시 permission을 사용자로부터 획득
- Startup : event page가 load되고 launch() event가 발생되면 app을 실행함.'
- Termination : app이 종료되면 종료 시 상태를 저장한다.
- Update : Chrome App은 언제나 업데이트 될 수 있지만 startup/termination 단계에서는 변경안됨.
- Uninstallation : 사용자가 app을 삭제하면 executing code와 private data는 모두 삭제 됨.

좀 더 자세히 풀어보면
: https://developer.chrome.com/apps/app_lifecycle



아래와 같이 event Script에서 onLaunched 시 window를 표시함을 볼 수 있음.

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('main.html', {
    id: 'MyWindowID',
    bounds: {
      width: 800,
      height: 600,
      left: 100,
      top: 100
    },
    minWidth: 800,
    minHeight: 600
  });
});

또한 설치, 중지, 재시작 되었을 때 chrome.runtime의 event listener로 처리할 수 있음.
=> https://developer.chrome.com/extensions/runtime#events


[Security Model]

Chrome App들은 CSP(Content Security Policy)를 따라야 한다고 하고 있음.

- Chrome App들은 사용하는 API들에 따른 permission을 명시적으로 알려야 함.
- Chrome App들은 분리된 storage, external content기반으로 분리된 process를 재사용함. 즉 다른 Chrome App들의 data, Chrome Browser의 Web page의 data를 접근할 수 없음. (cookie도 포함)

[Content Security Policy]
: https://developer.chrome.com/apps/contentSecurityPolicy
- 제약 사항들
 . inline scripting 사용 불허
 . video, audio를 제외한 external resources를 접근 불허
 . iframe 내 resource들을 embed 못함.
 . string-to-JavaScritp methods 사용 불가(eval(), new Function())

위 제약사항들에 대해서 대안으로 templating libraries, XMLHttpRequest를 사용한 external resoruce 접근, webview tag 사용을 말하고 있음.



[Chrome App Sample]
: https://github.com/GoogleChrome/chrome-app-samples

[Hello World]
: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/hello-world

예제의 진리.. hello world 

간단하다 화면에 Chrome icon과 hello world가 찍힌다.

manifest는 아래과 같고 background script는 main.js임.

{
	"manifest_version": 2,
	"name": "Hello World",
	"version": "2.1",
	"minimum_chrome_version": "23",
	"icons": {
	"16": "icon_16.png",
	"128": "icon_128.png"
	},
	"app": {
	"background": {
	"scripts": ["main.js"]
	}
	}
	}

background script에서는 

chrome app onLaunch event에서 화면에 index.html을 띄워주고 있음.

chrome.app.runtime.onLaunched.addListener(function() {
  // Center window on screen.
  var screenWidth = screen.availWidth;
  var screenHeight = screen.availHeight;
  var width = 500;
  var height = 300;

  chrome.app.window.create('index.html', {
    id: "helloWorldID",
    outerBounds: {
      width: width,
      height: height,
      left: Math.round((screenWidth-width)/2),
      top: Math.round((screenHeight-height)/2)
    }
  });
});

스크린샷은 직접 해서 보시라. :)