이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 85의 새로운 기능

Pete LePage

Twitter GitHub Glitch Mastodon 홈페이지

이제 Chrome 85가 안정화 버전으로 출시되기 시작했습니다.

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

content-visibility: auto를 사용하여 렌더링 성능을 개선할 수 있습니다.
이제 CSS에서 CSS 속성을 설정할 수 있습니다.
이제 getInstalledRelatedApps()를 사용하여 Windows 앱 또는 PWA가 설치되어 있는지 확인할 수 있습니다.
앱 아이콘 바로가기는 Windows에서도 작동합니다 (현재 실제로 적용됨).
fetch 업로드 스트리밍의 오리진 트라이얼이 시작되었습니다.
그 외에도 다양한 내용이 제공됩니다.

저는 Pete LePage입니다. 재택근무를 하면서 재택근무를 하고 있습니다. 이제 Chrome 85의 개발자를 위한 새로운 기능을 알아보겠습니다.

콘텐츠 공개 상태

HTML을 사용자가 볼 수 있는 것으로 바꾸려면 브라우저가 여러 단계를 거쳐야 첫 번째 픽셀을 칠할 수 있습니다. 또한 표시 영역에 표시되지 않는 콘텐츠에도 페이지 전체에 적용됩니다.

요소에 content-visibility: auto을 적용하면 브라우저가 표시 영역으로 스크롤될 때까지 해당 요소의 렌더링 작업을 건너뛸 수 있음을 브라우저에 알리므로 초기 렌더링이 더 빨라집니다.

.my-class {
  content-visibility: auto;
}

content-visibility를 최대한 활용하려면 더 복잡한 레이아웃 알고리즘(예: flexbox, grid)을 사용하거나 자체 레이아웃이 포함된 하위 요소가 있는 상위 섹션에 적용합니다.

콘텐츠를 청크로 분할하고 content-visibility: auto;를 추가한 결과, 이 페이지의 렌더링 시간이 232ms에서 단 30ms로 단축되었습니다.

콘텐츠 공개 상태에서 이를 사용하여 렌더링 성능을 개선하는 방법을 알아보세요.

`@property` 및 CSS 변수

기술적으로 사용자 지정 속성이라고 하는 CSS 변수는 매우 중요합니다. Houdini CSS Properties and Values API를 사용하여 맞춤 속성의 유형과 기본 대체 값을 정의할 수 있습니다. Chrome 78의 새로운 기능에서 자바스크립트로 정의하기 위한 지원을 추가했습니다.

Chrome 85부터는 CSS에서 직접 CSS 속성을 정의하고 설정할 수도 있습니다. CSS 속성의 장점은 속성 의미 체계와 대체 값을 제공하고 CSS 테스트를 지원한다는 점입니다.

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

Una는 @property: CSS 변수에 초능력 부여라는 게시물에서 변수를 사용하는 방법을 설명합니다.

설치된 관련 앱 가져오기

getInstalledRelatedApps() API를 사용하면 개발자가 앱이 설치되어 있는지 확인한 후 사용자 환경을 맞춤설정할 수 있습니다.

예를 들어 앱이 이미 설치된 경우 방문 페이지에서 사용자에게 다른 콘텐츠를 표시합니다. 혼동을 방지하기 위해 하나의 앱에서 중복되는 기능을 중앙 집중화합니다. 또는 네이티브 앱이 이미 설치된 경우 PWA 설치를 홍보하지 마세요.

Chrome 80에서 처음 출시되었을 때는 Android 앱에서만 작동했습니다. 이제 Android에서는 PWA가 설치되어 있는지도 확인할 수 있습니다. 또한 Windows의 경우 Windows UWP 앱이 설치되어 있는지 확인할 수 있습니다.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

제 도움말을 확인해 보세요. 앱이 설치되어 있나요? getInstalledRelatedApps()에서 알려드립니다. Web.dev에서 작동 방식과 앱에 서명하여 개발자 본인의 앱임을 증명하는 방법을 확인할 수 있습니다.

앱 아이콘 바로가기

Chrome 84에서는 앱 아이콘 바로가기에 대한 지원이 추가되었습니다. 제가 실수로 어디서나 사용할 수 있다고 말했는데, Android에서만 사용할 수 있다고 했죠. 이제 Chrome 85에서는 Android와 Windows, Chrome 및 Edge 모두에서 사용할 수 있습니다.

"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

자세한 내용은 web.dev의 앱 아이콘 바로가기 문서를 확인하세요. 혼란을 드려 죄송합니다.

오리진 트라이얼: `fetch()`를 사용한 스트리밍 요청

Chrome 85부터 fetch 업로드 스트리밍을 원본 체험판으로 사용할 수 있습니다. 요청 본문이 준비되기 전에 가져오기를 시작할 수 있습니다. 이전에는 몸 전체가 준비되어야만 요청을 시작할 수 있었습니다. 하지만 이제는 생성하는 도중에도 콘텐츠 전송을 시작할 수 있습니다.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

예를 들어 서버를 가동하거나 마이크 또는 카메라에서 캡처된 오디오 또는 동영상을 스트리밍하는 데 사용할 수 있습니다.

제이크는 web.dev에서 fetch API를 사용한 스트리밍 요청을 자세히 살펴보았으며, 최신 HTTP203 - 가져오기가 포함된 스트리밍 요청 동영상에서도 이 내용을 다루었습니다.

기타

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

Promise.any는 첫 번째 지정된 프로미스로 처리되거나 거부되는 프로미스를 반환합니다.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

.replaceAll()를 사용하면 문자열의 모든 인스턴스를 더 쉽게 바꿀 수 있습니다. 더 이상 정규 표현식이 필요하지 않습니다.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85에는 AV1로 인코딩되고 Alliance for Open Media에서 표준화된 이미지 형식인 AVIF의 디코딩 지원이 추가되었습니다. AVIF는 JPEG 및 WebP에 비해 압축률이 훨씬 높으며, 최근 Netflix 연구에 따르면 표준 JPEG에 비해 50%, 4:4:4 콘텐츠에서 60% 넘게 절감되는 것으로 나타났습니다.

또한 AppCache 삭제가 시작되었습니다.

추가 자료

주요 특징 중 일부만 다룹니다. Chrome 85의 추가 변경사항은 아래 링크를 확인하세요.

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

저는 Pete LePage이고 드디어 머리를 잘랐습니다.

Chrome 86이 출시되면 바로 여기서 Chrome의 새로운 기능을 알려드리겠습니다.