Chrome 107의 새로운 기능

Adriana Jara

다음 사항에 유의하시기 바랍니다.

• 화면 공유 환경을 개선하기 위한 Screen Capture API의 새로운 속성이 있습니다.
• 이제 페이지의 리소스가 렌더링 차단 여부를 정확하게 식별할 수 있습니다.

• 출처 체험판에서 선언적 PendingBeacon API를 사용하여 백엔드 서버로 데이터를 전송하는 새로운 방법이 있습니다. 이 외에도 다양한 기능이 있습니다.

• 그 외에도 다양한 기능이 있으니까요.

저는 아드리아나 자라입니다. Chrome 107의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

Screen Capture API의 새로운 속성

이 버전에서는 Screen Capture API에 화면 공유 환경을 개선하기 위한 새로운 속성이 추가되었습니다.

DisplayMediaStreamOptions에 selfBrowserSurface 속성이 추가되었습니다. 이 힌트를 통해 애플리케이션은 getDisplayMedia()를 호출할 때 현재 탭을 제외해야 한다고 브라우저에 알릴 수 있습니다.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

이렇게 하면 실수로 셀카가 찍히는 것을 방지하고 화상 회의에서 발생하는 '거울의 방' 효과를 피할 수 있습니다.

이제 DisplayMediaStreamOptions에 surfaceSwitching 속성도 있습니다. 이 속성은 Chrome에서 화면 공유 중에 탭 전환 버튼을 표시할지 프로그래매틱 방식으로 제어하는 옵션을 추가합니다. 이러한 옵션은 getDisplayMedia()에 전달됩니다. Share this tab instead 버튼을 사용하면 사용자가 화상 회의 탭으로 돌아가거나 긴 탭 목록에서 선택하지 않고도 새 탭으로 전환할 수 있지만 웹 애플리케이션에서 처리하지 않는 경우 동작이 조건부로 노출됩니다.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

또한 MediaTrackConstraintSet는 displaySurface 속성을 추가합니다. getDisplayMedia()가 호출되면 브라우저는 탭, 창 또는 모니터와 같은 디스플레이 표시 경로를 사용자에게 제공합니다. 이제 displaySurface 제약 조건을 사용하여 웹 앱이 표시 경로 유형 중 하나를 더 눈에 띄게 표시하는 것을 선호하는 경우 브라우저에 힌트를 줄 수 있습니다.

예를 들어 기본적으로 탭 하나를 공유할 수 있으므로 실수로 과도한 공유를 방지하는 데 도움이 될 수 있습니다.

렌더링 차단 리소스 식별

페이지 성능에 대한 신뢰할 수 있는 통계는 개발자가 빠른 사용자 환경을 빌드하는 데 매우 중요합니다. 지금까지 개발자는 리소스가 렌더링 차단인지 여부를 결정하기 위해 복잡한 휴리스틱을 사용해 왔습니다.

이제 Performance API에는 페이지가 다운로드될 때까지 페이지 표시를 방해하는 리소스를 식별하는 브라우저의 직접적인 신호를 제공하는 renderBlockingStatus 속성이 포함됩니다.

여기에 나와 있는 코드 스니펫은 모든 리소스 목록을 가져오고 새로운renderBlockingStatus 속성을 사용하여 렌더링을 차단하는 모든 리소스를 나열하는 방법을 보여줍니다.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

리소스 로드 방식을 최적화하면 Core Web Vitals에 도움이 되고 더 나은 사용자 환경을 제공할 수 있습니다. MDN 문서에서 Performance API에 관해 자세히 알아보고 렌더링을 차단하는 리소스를 찾아 최적화하세요.

PendingBeacon API 오리진 트라이얼

선언적 PendingBeacon API를 사용하면 브라우저에서 비콘이 전송되는 시점을 제어할 수 있습니다.

비콘은 특정 응답을 기대하지 않고 백엔드 서버로 전송되는 데이터 번들입니다.

애플리케이션은 종종 사용자 방문이 끝날 때 이러한 비콘을 전송하려고 하지만 '전송' 호출을 실행하기에 적절한 시점이 없습니다. 이 API는 전송을 브라우저 자체에 위임하므로 개발자가 정확한 시점에 전송 호출을 구현하지 않아도 page unload 또는 page hide에서 비콘을 지원할 수 있습니다.

오리진 트라이얼에 가입하여 API를 사용해 보고 사용 사례를 개선할 수 있도록 의견을 보내주세요.

그 외에도 다양한 기능 제공

물론 이 외에도 더 많은 기능이 있습니다.

• expect-ct HTTP 헤더는 지원 중단되었습니다.
• 이제 <form> 요소에서 rel 속성이 지원됩니다.
• 지난번에 grid-template 보간을 언급했는데 이번에는 포함되어야 합니다.

추가 자료

여기에는 일부 주요 내용만 포함되어 있습니다. Chrome 107의 추가 변경사항은 아래 링크를 확인하세요.

• Chrome DevTools의 새로운 기능 (107)
• Chrome 107 지원 중단 및 삭제
• Chrome 107의 ChromeStatus.com 업데이트
• Chromium 소스 저장소 변경사항 목록
• Chrome 출시 캘린더

구독

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 아드리아나 자라입니다. Chrome 108이 출시되는 즉시 Chrome의 새로운 기능을 알려드리겠습니다.