Chrome 79 의 새로운 변경점들

Jimmy Moon

Jimmy Moon

Chief Editor

New in Chrome 79 의 내용을 번역, 요약, 정리 한 것이다.

Maskable Icons

Android O 로 넘어가면서 Progressive Web App 아이콘이 원형에 맞게 이쁘게 보이지 않는 경우가 생겼는데 이를 해결 하기 위해서 Chrome 79 에서는 Manifest 의 Icon 값에 새로운 프로퍼티 purpose 를 사용 할 수 있다.

{
...
"icons": [
...
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable"
]
...
}

maskable 값을 셋팅하면 투명 배경이나 이미지의 중앙을 중심으로 80% 정도의 세이프 존 영역을 보여준다. purpose아이콘이 어플리케이션에서 사용 될 수 있는 badge, 와 any 를 제공한다.

WebXR Device API

WebXR 은 웹에서도 VR 경험을 사용 할 수 있도록 도와준다. 이번 크롬 79 의 새로운 Experimental 기능이기 때문에 Origin Trial 프로그램을 통해서 API 를 사용 할 수 있다. 신청하면 origin-trial 을 위한 토큰을 발급 받아서 사용한다. 다음은 immersive-vr세션 생성을 요청하는 예제 코드다.

if (navigator.xr) {
const supported = await navigator.xr.isSessionSupported('immersive-vr')
if (supported) {
xrButton.addEventListener('click', onButtonClicked)
xrButton.textContent = 'Enter VR'
xrButton.disabled = false
}
}

Wake Lock API

Wake Lock API 를 사용하여 이제 웹앱/페이지에서도 스크린 세이버와 같이 스크린이 꺼지는 것을 막을 수 있다.

// WakeLockSentinel 오브젝트를 저장한다.
let wakeLock = null
// Wake Lock 요청
const requestWakeLock = async () => {
try {
// Wake Lock 을 요청하여 WakeLockSentinel 리턴 받는다/
wakeLock = await navigator.wakeLock.request('screen')
// Wake Lock 이 릴리즈 되었을 때 처리할 이벤트
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released')
})
console.log('Wake Lock is active')
} catch (err) {
console.error(`${err.name}, ${err.message}`)
}
}
// Wake Lock 릴리즈
const releaseWakeLock = async () => {
if (!wakeLock) {
return
}
try {
// wakeLock.request 에서 리턴받은 WakeLockSentinel 를 통해서
// 락킹의 해제한다.
await wakeLock.release()
wakeLock = null
} catch (err) {
console.error(`${err.name}, ${err.message}`)
}
}

rendersubtree attribute

rendersubtree 속성을 사용하면 해당 DOM 의 서브-트리의 렌더링의 여부와 히팅-테스트를 조절할 수 있다. 예를 들면 스크롤을 하고 있을 때 리스트 아이템의 DOM 을 렌더링하지 않게 할 수 있다. display:none 과 비슷하지만 브라우저의 Find 등의 동작이나 히팅-테스트여부등이 다른 점이다. 더 자세한 내용은 Display locking 스펙에 설명이 있다. 아래 예제에서 보면 div 의 서브-트리는 바로 렌더링 되지 않는다 이후 스크립트로 rendersubtree 속성을 초기화 하면 그때 렌더링 된다. 다양한 사용예제들이 있으니 참고하자.

만약 의도한 대로 동작하지 않는다면 chrome://flags 에서 #enable-display-locking 를 확인하자

<div id="target" rendersubtree="invisible skip-activation">
...content...
</div>
<script>
target.setAttribute('rendersubtree', '')
</script>