Chrome 73의 새로운 기능

피트 레페이지

Chrome 73에서는 다음 지원이 추가되었습니다.

이 외에도 다양한 기능이 제공됩니다.

저는 피트 레페이지입니다. 지금부터 Chrome 73의 개발자를 위한 새로운 기능을 알아보겠습니다

변경 로그

여기에서는 일부 주요 특징만 다룹니다. Chrome 73의 추가 변경사항은 아래 링크를 확인하세요.

모든 곳에서 작동하는 프로그레시브 웹 앱

프로그레시브 웹 앱은 설치 및 앱 같은 환경을 제공하며 웹을 통해 직접 빌드 및 제공됩니다. Chrome 73에서는 macOS 지원을 추가하여 모든 데스크톱 플랫폼(Mac, Windows, ChromeOS, Linux뿐 아니라 모바일)에서 프로그레시브 웹 앱을 지원하여 웹 앱 개발을 간소화했습니다.

프로그레시브 웹 앱은 빠르고 안정적이며 네트워크 연결과 관계없이 항상 동일한 속도로 로드 및 실행됩니다. 기기의 기능을 최대한 활용하는 최신 웹 기능을 통해 풍부하고 매력적인 환경을 제공합니다.

사용자는 Chrome 컨텍스트 메뉴에서 PWA를 설치하거나 개발자가 beforeinstallprompt 이벤트를 사용하여 설치 환경을 직접 승격할 수 있습니다. PWA가 설치되면 OS와 통합되어 네이티브 애플리케이션처럼 동작합니다. 사용자는 다른 앱과 동일한 위치에서 앱을 찾아 실행하고, 자체 창에서 실행하고, 작업 전환기에 표시되며, 아이콘이 알림 배지를 표시할 수 있습니다.

Google은 웹과 네이티브 간의 기능 격차를 줄여 웹에서 제공되는 최신 애플리케이션을 위한 견고한 기반을 제공하고자 합니다. Google은 파일 시스템, wake lock, 주소 표시줄에 대기 배지를 추가하여 사용자에게 PWA를 설치할 수 있음을 알리는 새로운 웹 플랫폼 기능, 기업을 위한 정책 설치 등 다양한 기능을 추가하기 위해 노력하고 있습니다.

이미 모바일 PWA를 빌드하고 있다면 데스크톱 PWA도 다르지 않습니다. 이전에 반응형 디자인을 사용해 본 적이 있다면 이미 사용해 보셔도 좋습니다. 단일 코드베이스는 데스크톱과 모바일에서 작동합니다. PWA를 막 시작한 초보자라면, PWA를 만드는 것이 매우 쉽다는 사실에 놀랄 것입니다.

  1. 매니페스트 추가
  2. 아이콘 모음 만들기
  3. 상용구 서비스 워커 추가

그런 다음 거기서부터 반복하세요.

서명된 HTTP 교환

웹 패키지라는 새로운 기술의 일부인 서명된 HTTP 교환 (SXG)이 이제 Chrome 73에서 제공됩니다. 서명된 HTTP 교환을 사용하면 제3자가 전달할 수 있는 '이동식' 콘텐츠를 만들 수 있습니다. 이것이 핵심 측면이며, 원본 사이트의 무결성과 저작자 표시를 유지합니다.

서명된 교환: 핵심

이렇게 하면 콘텐츠를 전송하는 서버에서 콘텐츠의 출처를 분리하지만 콘텐츠가 서명되었으므로 서버에서 콘텐츠를 전송하는 것과 같습니다. 교환의 서명이 원래 출처에서 온 콘텐츠를 나타내므로 브라우저가 이 서명된 Exchange를 로드하면 주소 표시줄에 URL을 안전하게 표시할 수 있습니다.

서명된 HTTP 교환을 사용하면 사용자에게 더 빠른 콘텐츠 전송이 가능하므로 인증서의 비공개 키에 대한 관리 권한을 양도하지 않고도 CDN의 이점을 활용할 수 있습니다. AMP팀은 Google 검색결과 페이지에서 서명된 HTTP 교환을 사용하여 AMP URL을 개선하고 검색결과의 클릭 속도를 높일 계획입니다.

시작하는 방법에 대한 자세한 내용은 Kinuko의 서명된 HTTP 교환 게시물을 참고하세요.

구성 가능한 스타일시트

Chrome 73의 새로운 구성 가능한 스타일시트는 재사용 가능한 스타일을 만들고 배포하는 새로운 방법을 제공하며 이는 Shadow DOM을 사용할 때 특히 중요합니다.

자바스크립트를 사용하여 스타일시트를 만들 수 있습니다. document.createElement('style')를 사용하여 <style> 요소를 만듭니다. 그런 다음 시트 속성에 액세스하여 기본 CSSStyleSheet 인스턴스의 참조를 가져오고 스타일을 설정합니다.

CSS 준비 및 적용을 보여주는 다이어그램

이 방법을 사용하면 스타일 시트가 팽창되는 경향이 있습니다. 더 심한 경우 스타일이 지정되지 않은 콘텐츠가 플래시됩니다. 구성 가능한 스타일시트를 사용하면 공유 CSS 스타일을 정의하고 준비한 다음 이러한 스타일을 여러 그림자 루트 또는 문서에 쉽게 중복 없이 적용할 수 있습니다.

공유된 CSSStyleSheet의 업데이트는 이 속성이 채택된 모든 루트에 적용되며 시트가 로드된 후 스타일시트 채택은 빠르고 동기적입니다.

간단하게 시작할 수 있습니다. CSSStyleSheet의 새 인스턴스를 만든 후 replace 또는 replaceSync를 사용하여 스타일시트 규칙을 업데이트하면 됩니다.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

자세한 내용과 코드 샘플은 제이슨 밀러의 구성 가능한 스타일시트: 원활한 재사용 가능 스타일 게시물을 참조하세요.

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 73의 몇 가지 변경사항은 물론 이 외에도 많은 변경사항이 있습니다.

  • matchAll()는 문자열 프로토타입의 새로운 정규 표현식 일치 메서드로, 완전한 일치가 포함된 배열을 반환합니다.
  • 이제 <link> 요소는 HTMLImageElement의 srcset 및 sizes 속성에 상응하는 imagesrcset 및 imagesizes 속성을 지원합니다.
  • Blink의 그림자 블러 반경 구현이 이제 Firefox 및 Safari와 일치합니다.
  • 이제 Mac에서 Chrome UI용 어두운 모드가 지원되며 Windows에서도 지원될 예정입니다. 또한 사용자가 시스템에 밝은 색상 테마를 사용하도록 요청했는지 감지하는 데 사용할 수 있는 CSS 미디어 쿼리 prefers-color-scheme에 관한 작업도 있습니다. 이에 관한 추적 버그는 Chrome 및 Firefox의 CSS prefers-color-scheme 미디어 기능 지원 추가입니다.

구독

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

저는 Pete LePage입니다. Chrome 74가 출시되면 바로 이곳에서 Chrome의 새로운 소식을 알려드리겠습니다.