모바일 Javascript API

모바일 Javascript API

모바일 기기(스마트폰, 태블릿 등)를 통해 웹에 액세스하는 사람ㄷ르은 데스크탑 또는 노트북을 통해 웹에 액세스하는 사람들을 따라 잡을 것이라는 전망이 새삼스럽지 않게 지면이여러가지 기술지표에서 나타나고 있습니다.
이제는 웹에서 무엇을 개발하든지 모바일을 고려해야만 되는것이죠

Battery Status API

Battery Status API

배터리 상태 API는 시스템의 배터리 레벨 또는 상태에 대한 정보를 제공합니다.
이 API로 배터리이 충전, 방전 여부를 확인 할 수 있습니다.
이 API는 widnow.navigator.battery 객체로 액세스 할 수 있습니다.

배터리 상태 API 지원여부는

if(window.navigator && window.navigator.battery) {
	// API 지원
	console.log("The battery is "+ (navigator.battery.charging ? "": "not") + " charging");
}else{
	// 지원되지 않음
}

Web Notifications API

Web Notifications API

Web Notifications API는 개발자가 사용자에게 메세지를 보내는 방법을 표준화하기 위한 목적으로 생성된 API입니다.
Notifications API는 이메일 전송과 같은 페이지의 컨텍스트 이벤트로 사용자에게 경고창을 보여줍니다.

varnotification = newNotification('Email received', {
	body: 'You received an email.'
});

현재 API는 크롬, 파이어폭스, 사파리에서 지원됩니다. Web Notifications API를 지원하는 모바일 웹 브라우저는 파이어폭스, 아드로이드 4.4+, 블랙베리가 지원을 합니다. 크롬은 모바일 API를 지원하지 않습니다.

if('Notification' in window) {
	// API 지원
}else{
	// 지원되지 않음
}

• Web Notifications API 소개
• Live Demo

Proximity API

Proximity API

Proximity API는 웹 페이지가 실행되는 디바이스로 물체가 접근할 경우 그것을 감지하는데 사용되는 Javascirpt AIP이다.
이 API는 메서드를 제공하지 않고 두가지 이벤트를 window 객체에서 제공합니다.
첫번째 이벤트는 deviceproximity, 두번째 이벤트 userproximity는 실제 물체와 디바이스간의 거리정보를 제공합니다.

이 API를 제공하는것은 테스크탑과 모바일 버전의 파이어폭스입니다. 하지만 데스크탑과 노트북은 근접센서가 없기 때문에 모바일에서만 지원된다고 보시면 됩니다.

if ('ondeviceproximity' in window) {
	// API 지원
	window.addEventListener('userproximity', function(event) {
	   console.log( (event.near ? '' : 'no ') + 'object detected nearby');
	});
}else{
	// 지원되지 않음
}

Vibration API

Vibration API

Vibration API는 모바일 디바이스가 진동을 할 수 있게 제공되는 하나의 기능만 제공되는 단순한 API입니다.
이 API는 MSIE와 사파리를 제외한 모든 주요 브라우즈에서 지원합니다.

if (window.navigator && window.navigator.vibrate) {
	// API 지원
	// 3초간 진동
navigator.vibrate(3000);
} else {
	// 지원되지 않음
}

• Device Orientation API

Device Orientation API는 장치의 방위를 검출하는 API입니다.
이 API는 장치의 물리적 방향과 장치의 움직임에 대한 정보를 제공하는 여러 이벤트를 제공합니다.
W3C에 정의 되어있지만 아직 표준이 안정되지 않아서 미래에 어떻게 변할지 예상할 수 없습니다.

이벤트는 deviceorientation, devicemotion 및 compassneedscalibration를 제공합니다.
이벤트는 디바이스의 가속도계가 장치의 방향변화를 감지할 때 시작되고, 장치가 가속하거나 감속할때마다 이벤트가 발생합니다.

이 API는 사파리를 제외한 모든 주요 브라우즈에서 지원되지만 지원이 불일치하는 부분이 있습니다.

if (window.DeviceOrientationEvent) {
   // 이벤트 지원
} else {
   // 지원되지 않음
}

if (!('ondeviceorientation' in window)) {
	// 이벤트 지원
} else {
	// 지원되지 않음
}

if (window.DeviceMotionEvent) {
	// 이벤트 지원
} else {
	// 지원되지 않음
}

• HTML5 Orientation 장치 사용
• 데모

Geolocation

브라우저의 Geolocation은 네이티브 장치에 있는 Geolocatin과는 많이 다르다. 브라우저의 Geolocation은 유저의 위치에서 사용할 수 있는 가장 적합한 방법을 이용해 위치정보를 얻게 된다.
이론상으로는 핸드폰의 GPS칩을 이용하는 것이 가장 정확안 방법이지만, 어떤 경우에는 브라우저가 기지국이나 Wi-Fi 정보를 이용하여 위치 정보를 얻기도 한다.

HTML5의 Geolocation Method

Method	설명
navigator.geolocation.getCurrentPosition(success, fail, options)	개발자가 유저의 혀재 위치 정보를 얻을 수 있게 해준다.
navigator.geolocation.watchPosition(success, fail, options)	개발자가 유저의 위치가 시간이 지남에 따라 변하는지 알 수 있게 해준다.

Location Method 옵션

개발자의 필요에 따르 getPosition과 watchPosition 사용 시에 특정한 옵션을 설정 할 수 있다.

• enableHighAccuracy(Boolean:true, false) : 이 속성을 true 값으로 설정하면, 가장 정확한 현재 위치를 얻을 수 있다.
• timeout(Integer, miliseconds) : Ceolocation에서는 기본 값으로 시간 제한 설정이 되어 있지 않다. 위치 ㅈ어보를 구 할 수 없는 경우를 대비해서 timeout 옵션에 Geolocation 함수가 동작할 시간을 제한 해주는 것이 좋다. 설정시간이 지나면 fail함수가 실행된다.
• maximum(Integer, miliseconds) : Geolocation으로 구한 위치정보를 얼마동안 사용할 것인지를 정할 수 있게 해준다. 캐시된 위치정보가 설저해 놓은 시간보다 더 오래전에 구해진 ㅈ어보인 경우 새로운 위치 정볼르 다시 구한다.

Location Callback 함수

Geolocation으로 위치 정보가 구해지면 success함수가 호출되고 position object에 아래 나열된 정보가 전달된다.

Method	Type	설명
position.coords.latitude	Double	위도를 나나낸다.(소수점 포함)
position.coords.logitude	Double	경도를 나타낸다.(소수점 포함)
position.coords.altiude	Double	고도를 나타낸다.(소수점 포함)
position.coords.accuracy	Double	위도, 경도의 정확도를 나타낸다. 숫자가 클수록 정확도가 높다.
position.coords.altitudeAccuracy	Double	고도의 정확도를 나타낸다.
position.coords.heading	Double	해당 장치가 어느 방향으로 이동하는지를 나타낸다. 도(degree)로 나타내며, 해당 값을 구할 수 없는 경우네는 NULL르 반환한다.
position.coords.speed	Double	장치의 속도를 나타낸다. 해당 값을 구 할 수 없는 경우 NULL을 반환한다.

Geolocation으로 위치 정보를 구하는데 실패하면 fail함수가 호출되고, object에 err.cod와 err.message를 전달한다.

Method	Type	설명
error.code.1	PERMISSION_DENED	유저가 해당 웹 사이트에 위치정보를 제공하는 것에 동의하지 않았을 때 발생
error.code.2	POSITION_UNAVAILABLE	위치정보를 구할 수 없을때 발생. 하나 이상의 위치 정보 제공자가 에러 메세지를 반환했을 경우.
error.code.3	TIMEOUT	위치 정보 요청 시간이 초과되었을 때 발생. timeout옵션을 설정했을 경우에만 발생하는 에러.