본문 바로가기
크롬업데이트

크롬 85, 상속 및 기타 기능이있는 스트리밍, 휴먼 인터페이스 장치, 사용자 지정 속성 업로드

by F.E.D 2020. 7. 25.

별도의 언급이없는 한, 아래 설명 된 변경 사항은 Android, Chrome OS, Linux, macOS 및 Windows 용 최신 Chrome 베타 채널 릴리스에 적용됩니다.

제공된 링크 또는 ChromeStatus.com의 목록을 통해 여기에 나열된 기능에 대해 자세히 알아보십시오.

Chrome 85는 2020 년 7 월 23 일 현재 베타 버전입니다.

 

업로드 스트리밍 가져오기

가져오기 업로드 스트리밍을 통해 웹 개발자는 읽을 수 있는 스트림을 가져올 수 있습니다. 

 

이전에는 전체가 레디 된 후에만 ​​요청을 시작할 수있었습니다. 

그러나 이제 컨텐츠를 생성하는 동안 데이터 전송을 시작하여 성능 및 메모리 사용량을 향상시킬 수 있습니다.

 

예를 들어, 온라인 양식은 사용자가 텍스트 입력 필드에 focus 하자마자 가져오기를 시작할 수 있습니다.

사용자가 엔터를 할 때 fetch() 헤더가 이미 전송되었을 것입니다.

 

이 기능을 사용하면 오디오, 비디오와 같은 클라이언트에서 생성된 컨텐츠를 내보낼 수도 있습니다.

자세한 정보는 fetch API를 사용한 스트리밍 요청을 참조하십시오. https://web.dev/fetch-upload-streaming/

 

Streaming requests with the fetch API

Chrome 85 has an experimental implementation of streaming uploads, which you can use on live sites using the origin trial.

web.dev

이 최초 시험판은 2021 년 1 월 Chrome 87을 통해 실행될 예정입니다.

 

WebHID API

시스템 장치 드라이버가 액세스 할 수없는 너무 오래되었거나 너무 드문 휴먼 인터페이스 장치 (HID)가 사용되고 있습니다.

WebHID API는 JavaScript에서 장치 별 로직을 구현하는 방법을 제공하여 이를 해결합니다.

Chrome 85에서는 원래 시험판을 사용할 수 있습니다.

HID는 사람으로부터 입력을 받거나 출력을 제공하는 것입니다. 

장치의 예로는 키보드, 포인팅 장치 (마우스, 터치 스크린 등) 및 게임 패드가 있습니다. 

HID 장치에 액세스 할 수 없다는 것은 게임 패드 지원과 관련하여 특히 고통 스럽습니다. 

게임 패드 입력 및 출력은 제대로 표준화되지 않았으며 웹 브라우저에는 종종 특정 장치에 대한 사용자 지정 로직이 필요합니다. 

이는 지속 불가능하며 오래되고 일반적이지 않은 장치들을 제대로 지원하지 않습니다.

새 API를 사용하는 방법을 보여주는 기사를 작성 중입니다.

그 동안 몇 명의 열성적인 엔지니어들이 새로운 API를 시험해볼 수있는 데모를 발견했습니다.

이러한 데모를 보려면 웹에서 휴먼 인터페이스 장치 (몇 가지 간단한 예)를 확인하십시오.

가입에 대한 정보와이 릴리스에서 시작하는 다른 오리진 평가판 목록은 오리진 평가판 섹션을 참조하십시오. 

이 최초 시험판은 2021 년 1 월 Chrome 87을 통해 실행될 예정입니다.

 

Windows Support for getInstalledRelatedApps()

navigator.getInstalledRelatedApps() 메소드는 사이트의 해당 기본 앱이 설치되어 있는지 여부를 판별합니다.

이를 통해 이미 설치된 앱의 사용자 환경을 사용자 지정할 수 있습니다.

예를 들어 사용자는 제품 마케팅 페이지에서 직접 앱으로 리디렉션 될 수 있습니다.

기능을 중앙 집중화하여 사용자가 중복 알림을 보지 못하게하고 개발자가 두 개의 코드 기반을 유지 관리하지 못하게 할 수 있습니다.

기본 앱이 이미 사용자 기기에있는 경우 사이트에서 PWA 설치를 요구하지 않을 수도 있습니다.

사용자 개인 정보를 보호하면서이 모든 것을 수행합니다.

웹앱 매니페스트 및 Android 매니페스트 파일의 항목은 사이트가 API를 사용하여 사용자가 설치 한 앱에 대한 임의의 정보를 요청할 수 없도록합니다.

이 방법은 Chrome 80의 Android에서 구현되었습니다.

Chrome 85부터는 Microsoft Windows에서 사용할 수 있습니다.

 

@property

CSS Houdini는 CSS 렌더링 엔진을 공개하는 API 및 CSS 기능 세트입니다. 

개발자는 브라우저에서 기본 구현을 기다리지 않고 새로운 CSS 기능을 만들 수 있습니다. 

CSS Houdini의 @property 규칙은 CSS 속성 및 값 API의 일부로, 상속, 유형 확인 및 기본값으로 사용자 정의 속성을 정의 할 수 있습니다. 

이 API의 첫 번째 부분 인 CSS.registerProperty()는 Chrome 78에서 구현되었습니다.

이제이 메소드의 기능은 @property를 통해 스타일 시트에서 사용할 수 있습니다.

https://web.dev/at-property/

 

@property: giving superpowers to CSS variables

Learn how to implement CSS custom properties with semantic typing, a fallback value, and more, directly in your CSS file.

web.dev

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

크롬 78버전에서 구현된 것(javascript)

 

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

크롬 85에서 구현된 것(css)

 

Origin Trials

선언적 shadow DOM

자바스크립트없이 HTML 만 사용하여 섀도우 루트를 만들 수있는 선언적 API입니다.

이 API를 사용하면 Shadow DOM을 사용하는 웹 구성 요소가 서버 측 렌더링 (SSR)을 사용하여 섀도 루트 첨부를위한 Javascript없이 화면에 컨텐츠를 신속하게 렌더링 할 수 있습니다.
최초 시험판은 2020 년 1 월 Chrome 87을 통해 실행될 예정입니다.

 

<!DOCTYPE html>
<H1>Basic declarative Shadow DOM example</H1>
<p>This example makes use of, and requires an implementation of, <a href="https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md">declarative Shadow DOM</a>.
In Chrome 82+, enable the Experimental Web Platform Features (chrome://flags/#enable-experimental-web-platform-features) flag to try it out.</p>  
<p>This example should show two green-background &lt;H2&gt; text fragments below:</p>
<host-element>
    <template shadowroot="open">
        <style>
          ::slotted(h2), h2 {
            background:green !important;
          }
        </style>
        <h2>Shadow Content (visible if in shadow root)</h2>
        <slot></slot>
    </template>
    <style>
      h2 {
        background: red;
      }
    </style>
    <h2>Light DOM content (green if slotted)</h2>
</host-element>

결과

RTCRtpEncodingParameters.adaptivePtime Property

RTCRtpEncodingParameters.adaptivePtime 속성을 사용하면 RTC (실시간 통신) 시스템의 발신자가 적응 형 패킷 속도를 활성화 또는 비활성화 할 수 있습니다.

패킷 레이트는 오디오 스트림의 전체 비트 레이트에 큰 결정 요소이므로, 패킷 레이트를 적응시키기 위해 최적의 혼잡 제어가 필요하다.

오디오 패킷 속도는 비디오 프레임 속도와 유사하며 비디오 비트 전송률 적응에 중요한 역할을합니다.

적응형 패킷 속도는 어디에서나 유리할 수 있지만 응용 프로그램에서 이를 활성화 및 비활성화하려면 이 API가 필요합니다.

그렇지 않으면 상호 운용성 문제가 발생할 수 있습니다.

일부 구현들은 고정된 패킷 레이트를 가정 한 것으로서, 적응형 패킷 레이트와 함께 실패하거나 부적절하게 수행 할 수 있다.

최초 시험판은 2020 년 1 월 Chrome 87을 통해 실행될 예정입니다.

 

Portals

포털은 페이지가 다른 페이지를 삽입 된 것으로 표시 할 수 있도록하여 사이트 또는 페이지 간 원활한 탐색을 가능하게합니다. 

자세한 내용은 포털 실습 : 웹에서의 원활한 탐색을 참조하십시오. 

https://web.dev/hands-on-portals/

최초 시험은 11 월 초 Chrome 86을 통해 진행될 것으로 예상됩니다.

App Shortcuts

이제 Chrome 84에 데뷔 한 Android 외에도 앱 단축키를 데스크톱에서 사용할 수 있습니다.

이 기능은 일반적인 작업에 빠르게 액세스하여 사용자의 생산성을 높이고 주요 작업으로 재결합을 용이하게합니다. 

이미 Progressive Web Apps 인 사이트의 경우 바로 가기를 만들려면 웹앱 매니페스트에 항목을 추가하기 만하면됩니다. 

이 추가는 Microsoft의 작업 결과입니다. 자세한 내용은 앱 바로 가기를 사용하여 신속하게 작업 수행을 참조하십시오.

https://web.dev/app-shortcuts/

 

Get things done quickly with app shortcuts

App shortcuts give quick access to a handful of common actions that users need frequently.

web.dev

Autoupgrade Mixed Content

Chrome은 이제 안전한 콘텐츠를 사용할 수없는 경우 HTTP로 다시 떨어지지 않고 URL을 HTTPS로 다시 작성하여 HTTPS 사이트에서 HTTP를 통해 제공되는 이미지를 자동 업그레이드합니다.

Chrome은 버전 80부터 오디오 및 비디오 콘텐츠를 자동 업그레이드하고 있습니다.

AVIF Image Decode

기존 AV1 디코더를 사용하여 기본적으로 AVIF 컨텐츠 디코딩 지원을 추가합니다.

AVIF는 Alliance for Open Media에서 표준화 한 차세대 이미지 형식입니다.

AVIF를 지원하기위한 세 가지 주요 동기가 있습니다.

페이지를 더 빨리로드하고 전체 데이터 소비를 줄이기 위해 대역폭 소비를 줄입니다.

AVIF는 JPEG 또는 WebP에 비해 이미지의 파일 크기를 크게 줄입니다.

HDR 색상 지원 추가. AVIF는 웹에 대한 HDR 이미지 지원의 경로입니다. JPEG는 실제로 8 비트 색 농도로 제한됩니다.

점점 더 높은 밝기, 색상 비트 심도 및 색 영역을 지원하는 디스플레이로 인해 웹 이해 관계자는 JPEG로 손실되는 이미지 데이터를 보존하는 데 점점 더 관심을 기울이고 있습니다. 생태계 관심사 지원. 웹 사이트가 큰 회사는 웹에서 AVIF 이미지를 제공하는 데 관심을 표명했습니다.

 

Changes to Persistent Storage for Installed Web Apps

PWA 및 신뢰할 수있는 웹 활동을 포함하여 설치된 웹 응용 프로그램에서 영구 저장소를 얻는 것이 더 쉽고 예측 가능합니다.

설치된 웹 앱이 navigator.storage.persist()를 호출하여 영구 저장소를 요청하면 자동으로 부여됩니다.

다른 사이트는 기존 휴리스틱을 계속 사용합니다.

 

CSS

색상 조정 : only 속성을 제거하고 다크모드를 light모드보다 선호합니다.

Chrome은 CSS 색상 조정 수준 1 사양에서 변경 한 내용과 일치하도록 두 가지 사항을 변경했습니다.

'only'키워드는 더 이상 특별하지 않으며 다른 알 수없는 색상 표로 취급됩니다.

'only'키워드는 이전에는 'light'와 함께 만 사용할 수 있었지만 Chrome에서는 효과가 없었습니다.

페이지 작성자는 선호하는 색상 구성표가 'light'인 경우에도 어두운 테마의 UA 렌더링을 사용할 수 있습니다.

 

content-visibility Property

content-visibility라는 CSS 속성을 추가하여 컨텐츠 가시성을 자동 또는 스크립트로 관리 할 수 ​​있습니다.

숨겨지면 요소의 내용 (하위 트리 또는 대체 된 요소 내용)이 그려 지거나 적중 테스트되지 않으며 CSS 포함이 적용되어 렌더링 최적화가 가능합니다.

'auto'키워드를 사용하면 사용자 에이전트가 뷰포트에 대한 근접성을 기반으로 컨텐츠 가시성을 관리 할 수 ​​있으며 'hidden'키워드는 컨텐츠 가시성을 완전히 스크립트로 제어 할 수 있습니다.

 

counter-set

CSS 카운터 세트는 기존 카운터를 지정된 값으로 설정하여 카운터를 제어하기 위해 CSS 목록 모듈 레벨 3에 도입 된 추가 속성입니다.

이는 구현 된 다른 카운터 제어 속성, 특히 카운터 재설정 (지정된 값으로 새 카운터를 생성 함) 및 카운터 증가 (기존 카운터를 지정된 양만큼 증가시키는)를 기반으로합니다.

이 기능은 정확한 카운터 제어를 위해 필요합니다.

그렇지 않으면 기존 카운터를 증가 또는 감소하는 방법을 알아내는 것 이외의 값으로 설정할 수 없기 때문입니다.

Event Timing API

웹 개발자는 이벤트 타이밍 API를 사용하여 페이지 로드 전후에 이벤트 대기 시간을 측정 할 수 있습니다.

이벤트 대기 시간을 모니터링하려면 이벤트 리스너가 필요합니다.

이렇게하면 페이지로드 초기에 이벤트 대기 시간을 측정 할 수 없으며 불필요한 성능 오버 헤드가 추가됩니다.

자세한 정보는 유휴 감지 API를 사용하여 비활성 사용자 감지를 참조하십시오.

Expose Picture-in-Picture Window in leavepictureinpicture event

(desktop only) leavepictureinpicture 이벤트는 이제 pictureInPictureWindow에 대한 참조를 노출하므로 웹 개발자는 더 이상 해당 객체에 대한 전역 참조를 유지할 필요가 없습니다.

 

Named pages with page-orientation

  • The 'page' CSS property.
  • Named pages. For example: @page foobar {}
  • The 'page-orientation' descriptor with values 'upright' (default), 'rotate-left', or 'rotate-right'.

Referrer Policy: Default to strict-origin-when-cross-origin

웹 개발자는 문서에 참조자 정책을 지정할 수 있으며, 이는 발신 요청 및 탐색시 전송되는 참조자 헤더에 영향을줍니다.

이러한 정책을 지정하지 않으면 Chrome은 이제 다운 스트림이 아닌 추천자가 아닌 기본 출처로 strict-origin-when-cross-origin을 기본 정책으로 사용합니다.

 

ImageInputType 및 HTMLImageElement에 대한 대체 컨텐츠의 동작 업데이트

ImageInputType 및 HTMLImageElement에 대한 대체 컨텐츠의 동작을 변경합니다. 이러한 내용은 이제 대체 텍스트와 정확히 동일하게 렌더링됩니다.

 

그 외로 많은 기능들이 추가되었습니다. 자세한 내용은 출처를 참고해주세요.

Update the Behavior of the "disabled" Attribute for HTMLLinkElement

Web Bluetooth writeValueWithResponse() and writeValueWithoutResponse()

 

WebAssembly BigInt Integration

WebAssembly는 이제 BigInt를 사용하여 i64 유형의 WebAssembly 함수 매개 변수를 가져오고 내 보냅니다.

 

WebAuthn getPublicKey(), getPublicKeyAlgorithm() and getAuthenticatorData()

javascript

이 Chrome 버전에는 V8 JavaScript 엔진 버전 x.x가 통합되어 있습니다. 아래에 나열된 변경 사항이 포함됩니다. 

V8 릴리스 정보에서 최신 기능의 전체 목록을 찾을 수 있습니다.

JavaScript Logical Assignment Operators

Promise.any() and AggregateError

String.prototype.replaceAll()

JavaScript는 이제 새로운 String.prototype.replaceAll() 메서드를 통해 전역 하위 문자열 교체를 지원합니다.

 

AppCache Removal Begins

Chrome 85는 Chrome에서 AppCache의 사양 지정 종료를 시작합니다.

전환을 정상적으로 관리하기위한 자세한 내용과 지침은 AppCache 제거 준비를 참조하십시오.

이 API 및 더 이상 사용되지 않는 API의 사용을 식별하는 데 도움이되는 기능에 대한 자세한 내용은 코드 상태 파악을 참조하십시오.

 

Reject insecure SameSite=None cookies

보안 속성없이 SameSite가 없음으로 설정된 쿠키 사용은 더 이상 지원되지 않습니다.

SameSite = None을 요청하지만 보안으로 표시되지 않은 쿠키는 거부됩니다.

이 기능은 2020 년 7 월 14 일에 Stable Chrome 사용자에게 배포되기 시작했습니다.

자세한 내용은 SameSite 업데이트를 참조하십시오.

일반 텍스트 채널을 통해 전달 된 쿠키는 네트워크 공격자가 카탈로그화 하거나 수정할 수 있습니다.

사이트 간 사용을 목적으로하는 쿠키에 대한 안전한 전송이 필요하면 이러한 위험이 줄어 듭니다.

 

출처 : https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html

저작자표시

'크롬업데이트' 카테고리의 다른 글

SameSite 이슈에 대응하는 Javascript 방법  (0) 2021.01.30
Chrome 88 : aspect-ratio 속성  (0) 2021.01.23
UA 대신에 Client Hints 사용해보기  (0) 2020.04.12
크롬80, 코로나 기간 중 SameSite 업데이트 롤백  (0) 2020.04.05
2020년 1분기 이슈(서드파티 쿠키, SameSite, Http 차단, UA 중단, ClientHints 제공)  (0) 2020.03.29

관련글

댓글

티스토리툴바