Chrome 107의 새로운 기능

Adriana Jara

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

저는 아드리아나 자라입니다. 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 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받을 수 있습니다.

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