Chrome 78의 새로운 기능

피트 레페이지

Chrome 78이 출시됩니다.

제 이름은 Pete LePage입니다. 지금부터 Chrome 78의 개발자를 위한 새로운 기능을 알아보겠습니다.

CSS 속성 및 값 API

기술적으로 사용자 지정 속성이라고 하는 CSS 변수는 매우 중요합니다. 이를 통해 CSS 전체에서 자체 속성을 정의하고 사용할 수 있습니다. 하지만 커스텀 속성에는 단순한 검색 및 바꾸기 이상의 의미가 있습니다.

html {
  --my-color: green;
}
.thing {
  color: var(--my-color);
}

색상에 변수를 사용했지만 URL을 값으로 할당한 경우 규칙이 자동으로 삭제됩니다. CSS Properties and Values API를 사용하면 맞춤 속성의 유형과 기본 대체 값을 정의할 수 있습니다.

html {
  --my-color: url(‘not-a-color'); // Oops, not a color!
}
.thing {
  color: var(--my-color);
}

속성을 등록하는 것은 window.CSS.registerProperty()를 호출하고 정의할 속성의 이름(상속해야 하는 경우)과 초깃값을 제공하는 것만큼 간단합니다.

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

자세한 내용은 web.dev에서 샘 리차드가 작성한 Houdini의 새 API를 사용한 더욱 스마트한 맞춤 속성 도움말을 참고하세요.

보다 최신 서비스 워커

이제 importScripts()에서 가져온 서비스 워커 스크립트에 대해 바이트별 검사가 수행됩니다. 이전에는 설치된 서비스 워커가 가져온 스크립트의 변경사항을 강제로 적용하게 하는 유일한 방법은 일반적으로 semver 값 또는 URL에 해시를 추가하여 가져온 스크립트의 URL을 변경하는 것이었습니다.

importScripts('https://example.com/v1.1.0/index.js');
importScripts('https://example.com/index.abcd1234.js');

Chrome 78부터는 최상위 서비스 워커 파일에 대한 업데이트 확인이 실행될 때마다 Chrome에서 가져온 스크립트의 콘텐츠가 변경되었는지도 확인합니다. 포함된 경우 전체 서비스 워커 업데이트 흐름이 트리거됩니다. 이렇게 하면 Chrome이 사양을 준수하며 Firefox 및 Safari가 수행하는 것과 일치합니다.

철수씨는 HTTP 캐시가 업데이트 주기에 미치는 영향에 관해 알아야 할 몇 가지 중요 사항을 비롯하여 기본적인 최신 서비스 워커에 모든 세부정보를 가지고 있습니다.

새로운 오리진 트라이얼

오리진 트라이얼을 통해 실험용 기능과 API를 검증하고, 개발자가 광범위한 배포에서의 사용성과 효과에 관한 의견을 제공할 수 있습니다.

실험용 기능은 일반적으로 플래그가 지정된 상태에서만 사용할 수 있지만 Google에서 기능에 관한 오리진 트라이얼을 제공하는 경우 해당 오리진 트라이얼에 등록하여 오리진의 모든 사용자에게 이 기능을 사용 설정할 수 있습니다.

오리진 트라이얼을 선택하면 베타 테스트 사용자가 Chrome에서 특별한 플래그를 뒤집을 필요 없이 체험판 기간 동안 사용해 볼 수 있는 데모와 프로토타입을 빌드할 수 있습니다.

오리진 트라이얼에 관한 자세한 내용은 웹 개발자를 위한 오리진 트라이얼 가이드를 참고하세요. 활성 오리진 트라이얼 목록을 확인하고 Chrome 오리진 트라이얼 페이지에서 가입할 수 있습니다.


기본 파일 시스템

Native File System API용 오리진 트라이얼은 Chrome 78에서 시작되며 Chrome 80까지 실행될 것으로 예상됩니다.

개발자는 Native File System API를 사용하여 사용자의 로컬 기기에 있는 파일과 상호작용하는 강력한 웹 앱을 빌드할 수 있습니다. 사용자가 웹 앱에 액세스 권한을 부여하면 이 API를 사용하여 웹 앱에서 사용자 기기의 파일과 폴더에 직접 변경사항을 읽거나 저장할 수 있습니다.

이제 작업하고자 하는 파일을 더 이상 '업로드'하거나 '다운로드'할 필요가 없으므로 새로운 환경에서 사용할 수 있게 되어 정말 기쁩니다. 저의 Native File System 게시물에서 코드, 데모, 사용자 안전 유지를 위한 Google의 노력 등 자세한 내용을 확인하세요.

SMS 수신자

SMS Receiver API의 오리진 트라이얼은 Chrome 78에서 시작되며 Chrome 80까지 실행될 것으로 예상됩니다.

이제 오리진 트라이얼로 제공되는 SMS Receiver API를 사용하면 웹 앱에서 앱의 출처에 맞는 특수한 형식의 SMS 메시지를 수신할 수 있습니다. 이를 통해 프로그래매틱 방식으로 SMS 메시지에서 OTP를 가져오고 사용자의 전화번호를 더 쉽게 확인할 수 있습니다.

Eiji는 모든 세부정보와 오리진 트라이얼 가입 방법을 포함하여 SMS Receiver API로 웹에서 전화번호 확인을 작성했습니다.

Chrome 개발자 서밋 2019

11월 11일과 12일에 Chrome 개발자 YouTube 채널에서 실시간으로 스트리밍되는 Chrome Dev Summit을 잊지 마세요.


추가 자료

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

구독

최신 동영상을 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받거나 피드 리더에 RSS 피드를 추가할 수 있습니다.

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