특정 화면의 밝기만 다르게 적용하기

기획 요구사항에 따라 앱 내부 페이지 중 특정 페이지의 밝기는 강제로 밝게 적용해야 했다.

간단히 보기

사용한 플러그인	cordova-plugin-brightness [사용방법] // After device ready, create a local alias var brightness = cordova.plugins.brightness; // value should be float in range from 0 to 1. brightness.setBrightness(value, success, error); // success([-1,0-1]) float 0-1 is a brightness level, -1 represents a system default brightness.getBrightness(success, error); // prevents sleep brightness.setKeepScreenOn(true);
상태	특정 페이지로 IN	특정페이지에서 OUT
이용한 IONIC cycle	ionViewDidLoad()	ionViewDidLeave()
함수 내부 동작	디바이스 밝기 밝게 ← 이벤트 추가 Android  addEventListner: pause, resume  iOS addEventListner: resign, active	디바이스 밝기 밝게 ← 이벤트 제거 Android  removeEventListner: pause, resume  iOS removeEventListner: resign, active

상세설명

페이지 내 전환에서 밝기조절은 문제없었다.

처음의 디바이스 밝기를 A변수에 저장해두고, 가장 밝은 밝기의 값을 B변수에 저장하여 ionViewDidLoad(), ionViewDidLeave() 내에서 setBrightness() 로 세팅해주면 됐다.

문제가 된 상황은 B변수의 밝기가 적용된 상태에서 앱이 일시중지 상태로 전환될 때였다.

디바이스의 밝기 자체가 B로 변경되어버렸다.

특정 화면에서만 밝게하고 다른 페이지, 다른 앱을 이용할 때는 디바이스의 화면 밝기를 기존 설정대로 유지해야 했다.

이것을 컨트롤 하기 위해 resume, pause 이벤트를 사용했다.

pause

실행 중인 애플리케이션이 일시중지 상태로 전환되면 발생하는 이벤트 (홈버튼 클릭, 다른 애플리케이션으로 이동)

resume

일시중지 상태였던 앱이 애플리케이션이 실행 상태로 전환되면 발생하는 이벤트 (애플리케이션으로 다시 이동)

IONIC API 제공

https://ionicframework.com/docs/api/platform/Platform/

[ISSUE1]

IONIC에서 제공하는 API가 iOS 커버하지 못했다.

pause 이벤트 핸들러가 앱이 일시중지상태로 넘어갈 때 발생하는게 아니라 resume 이벤트 핸들러 동작한 다음에 발생했다.

원인

pause 핸들러에서, Cordova API나 Object-C를 이용하는 네이티브 플러그인에 대한 호출은 동작하지 않는다. alert(), console.log() 같은 인터렉티브 호출도 동작하지 않는다. 이 호출들은 앱 resume 이벤트가 다시 발생할 때에 동작한다.

해결

resume: 대안으로 active 이벤트 사용

pause: 대안으로 resign 이벤트 사용

[ISSUE2]

removeEventListener가 동작하지 않았다. 

원인

ES6문법대로 쓰지 않고 기존에 쓰던 방식대로 사용해서 발생한 문제였다.

해결

바인딩 작업이 필요했고, 추가했다.

constructor 내부에서 this.onActive = this.onActive.bind(this); 와 같은 방식으로 사용하려는 함수들의 바인딩 작업을 해주었더니 해결되었다.

참고

https://github.com/mgcrea/cordova-plugin-brightness

https://cordova.apache.org/docs/en/latest/cordova/events/events.html

https://issues.apache.org/jira/browse/CB-115?jql=project%20%3D%20CB%20AND%20text%20~%20pause

https://github.com/facebook/react/issues/6007