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

Chrome 78의 새로운 기능

Pete LePage

Chrome 78이 출시됩니다.

저는 피트 르페이지입니다. Chrome 78에서 개발자를 위해 새로 제공되는 기능을 살펴보겠습니다.

CSS 속성 및 값 API

기술적으로 맞춤 속성이라고 하는 CSS 변수는 정말 멋집니다. CSS를 통해 CSS 전체에서 자체 속성을 정의하고 사용할 수 있습니다. 하지만 맞춤 속성은 단순한 검색 및 바꾸기 이상의 의미가 있습니다.

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

색상에 변수를 사용했지만 값으로 URL을 할당하면 규칙이 자동으로 삭제됩니다. CSS 속성 및 값 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()에서 가져온 서비스 워커 스크립트에 대해 바이트 단위로 검사가 실행됩니다. 이전에는 설치된 서비스 워커가 가져온 스크립트의 변경사항을 강제로 선택하도록 하는 유일한 방법은 가져온 스크립트의 URL을 변경하는 방법이었습니다. URL에 semver 값이나 해시를 추가하는 방법이 있었습니다.

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

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

HTTP 캐시가 업데이트 주기에 미치는 영향에 관한 몇 가지 중요한 사항을 비롯한 모든 세부정보는 기본적으로 최신 서비스 워커에서 확인할 수 있습니다.

새로운 오리진 트라이얼

오리진 체험판은 Google에서 실험적 기능과 API를 검증할 수 있는 기회를 제공하고 개발자가 광범위한 배포에서 이러한 기능의 사용성과 효과에 관한 의견을 제공할 수 있도록 합니다.

실험용 기능은 일반적으로 플래그를 통해서만 사용할 수 있지만 기능에 대한 출처 체험판이 제공되는 경우 해당 출처 체험판에 등록하여 출처의 모든 사용자에게 기능을 사용 설정할 수 있습니다.

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

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

네이티브 파일 시스템

네이티브 파일 시스템 API의 오리진 트라이얼이 Chrome 78에서 시작되어 Chrome 80까지 실행될 예정입니다.

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

이제 작업할 파일을 '업로드'하거나 '다운로드'할 필요가 없으므로 이 기능이 제공하는 새로운 환경을 기대하고 있습니다. 코드, 데모, 사용자를 안전하게 보호하기 위해 Google에서 취하고 있는 조치 등 네이티브 파일 시스템에 관한 자세한 내용은 내 게시물을 확인하세요.

SMS 수신기

SMS Receiver API의 오리진 트라이얼이 Chrome 78에서 시작되어 Chrome 80까지 실행될 예정입니다.

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

에이지는 모든 세부정보와 오리진 체험판 가입 방법을 포함하여 SMS Receiver API로 웹에서 전화번호 인증하기를 작성했습니다.

Chrome Dev Summit 2019

11월 11일과 12일에 Chrome 개발자 YouTube 채널에서 라이브 스트리밍으로 진행되는 Chrome 개발자 서밋을 놓치지 마세요.

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 78의 추가 변경사항은 아래 링크를 확인하세요.

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

저는 펫 르페이지입니다. Chrome 79가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.