- 프로그레시브 웹 앱이 데스크톱에 도입됩니다.
- 일반 센서 API를 사용하면 가속도계, 자이로스코프 등의 기기 센서에 더 쉽게 액세스할 수 있습니다.
- 또한
BigInt를 사용하면 큰 정수를 훨씬 쉽게 처리할 수 있습니다.
이 외에도 다양한 기능이 제공됩니다.
저는 피트 레페이지입니다. 지금부터 Chrome 67의 개발자를 위한 새로운 기능을 살펴보겠습니다.
변경사항의 전체 목록을 확인하시겠습니까? Chromium 소스 저장소 변경사항 목록을 확인하세요.
데스크톱 PWA
이제 데스크톱 프로그레시브 웹 앱이 ChromeOS 67에서 지원되며 Google은 이미 Mac과 Windows를 지원하는 작업을 시작했습니다. 설치된 앱은 다른 앱과 동일한 방식으로 실행되고 주소 표시줄이나 탭 없이 앱 창에서 실행됩니다. 서비스 워커는 빠르고 안정적으로 앱 창 환경을 통해 통합되는 느낌을 줍니다. 또한 사용자에게 매력적인 경험을 선사합니다.
시작하는 것은 지금 하고 있는 일과 다르지 않습니다. 기존 프로그레시브 웹 앱에서 실행한 모든 작업이 여전히 적용되므로 몇 가지 추가 중단점을 고려하기만 하면 됩니다.
앱이 표준 PWA 기준을 충족하면 Chrome에서 beforeinstallprompt 이벤트를 실행하지만 사용자에게 자동으로 메시지를 표시하지는 않습니다. 대신 이벤트를 저장한 다음, 앱 설치 버튼과 같은 UI를 앱에 추가하여 사용자에게 앱을 설치할 수 있음을 알립니다. 그런 다음 사용자가 버튼을 클릭하면 저장된 이벤트에서 프롬프트를 호출합니다. 그러면 Chrome에서 사용자에게 메시지를 표시합니다. 사용자가 '추가'를 클릭하면 Chrome에서 PWA를 앱 표시줄과 런처에 추가합니다.
제 Google I/O 대담에서 제니와 제가 데스크톱 프로그레시브 웹 앱을 빌드할 때 고려해야 할 기술적 및 특별한 디자인 고려사항에 대해 자세히 알아보세요.
Mac이나 Windows에서 이 기능을 사용하려면 플래그 지원을 사용 설정하는 방법에 관한 자세한 내용은 전체 데스크톱 프로그레시브 웹 앱 게시물을 확인하세요.
일반 센서 API
센서 데이터는 몰입형 게임, 피트니스 추적, 증강 현실 또는 가상 현실과 같은 경험을 제공하기 위해 많은 앱에서 사용됩니다. 이제 이 데이터는 Generic Sensor API를 사용하여 웹 앱에서 사용할 수 있습니다.
이 API는 기본 센서 인터페이스로 구성되어 있으며, 그 위에 구체적인 센서 클래스가 내장되어 있습니다. 기본 인터페이스가 있으면 구체적인 센서 클래스의 구현 및 사양 프로세스가 간소화됩니다. 예를 들어, 자이로스코프 클래스는 매우 작죠.
const sensor = new Gyroscope({frequency: 500});
sensor.start();
sensor.onreading = () => {
console.log("X-axis " + sensor.x);
console.log("Y-axis " + sensor.y);
console.log("Z-axis " + sensor.z);
};
핵심 기능은 기본 인터페이스에 의해 지정되며, 자이로스코프는 각 속도를 나타내는 세 가지 속성으로 기능을 확장할 뿐입니다. Chrome 67은 가속도계, 자이로스코프, 방향 센서 및 움직임 센서를 지원합니다.
Intel에서는 여러 일반 센서 API 데모 및 샘플 코드를 정리했으며 9월에 알아야 할 모든 내용을 포함하여 센서 웹용 센서 게시물도 업데이트했습니다.
BigInt초
BigInt은 JavaScript의 새 숫자 프리미티브로, 임의의 정밀도로 정수를 나타낼 수 있습니다. 큰 정수 ID와 높은 정확성 타임스탬프는 자바스크립트에서 Numbers로 안전하게 표현될 수 없으며, 이는 종종 실제 버그로 이어집니다. 이로 인해 종종 이러한 숫자를 문자열로 표현하게 됩니다.
let max = Number.MAX_SAFE_INTEGER;
// → 9_007_199_254_740_991
max = max + 1;
// → 9_007_199_254_740_992 - Yay!
max = max + 1;
// → 9_007_199_254_740_992 - Uh, no?
BigInts를 사용하면 오버플로 없이 정수 연산을 안전하게 저장하고 실행할 수 있습니다. 오늘날 큰 정수를 처리하려면 일반적으로 BigInt와 같은 기능을 에뮬레이션하는 라이브러리를 사용해야 합니다.
let max = BigInt(Number.MAX_SAFE_INTEGER);
// → 9_007_199_254_740_991n
max = max + 9n;
// → 9_007_199_254_741_000n - Yay!
BigInt를 널리 사용할 수 있게 되면 네이티브 BigInts으로 대체하여 이러한 런타임 종속 항목을 삭제할 수 있습니다. 네이티브 구현이 더 빠를 뿐만 아니라 추가 라이브러리를 로드할 필요가 없으므로 로드 시간, 파싱 시간, 컴파일 시간 감소에 도움이 됩니다.
그 외에도 다양한 기능 제공
개발자를 위한 Chrome 67의 몇 가지 변경사항은 물론 이 외에도 많은 변경사항이 있습니다.
Credential Management API는 Chrome 51부터 지원되었으며 사용자 인증 정보를 생성, 검색, 저장하기 위한 프레임워크를 제공합니다. 이 작업은 PasswordCredential 및 FederatedCredential의 두 가지 사용자 인증 정보 유형을 통해 실행되었습니다. Web Authentication API는 세 번째 사용자 인증 정보 유형인 PublicKeyCredential를 추가합니다. 이 유형을 사용하면 브라우저에서 보안 키, 지문 인식기 또는 사용자를 인증할 수 있는 기타 기기와 같은 인증자에 의해 생성된 비공개/공개 키 쌍으로 사용자를 인증할 수 있습니다. Chrome 67은 데스크톱에서 USB 전송을 통해 U2F/CTAP 1 인증자를 사용하는 API를 사용 설정합니다.
자세한 내용은 Eiji의 WebAuthn을 사용하여 강력한 인증 사용 설정 게시물을 참조하세요.
Google I/O 마무리
I/O에 참석하지 않았거나 참석했지만 웹 강연을 모두 보지 못했다면 Chrome 및 웹 재생목록을 확인하여 Google I/O의 모든 최신 정보를 확인하세요.
DevTools의 새로운 기능
Chrome DevTools의 새로운 기능을 확인하여 Chrome 67의 DevTools에서 새로운 기능을 알아보세요.
구독
그런 다음 YouTube 채널에서 구독 버튼을 클릭하면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 Pete LePage입니다. Chrome 68이 출시되는 대로 Chrome의 새로운 기능을 소개해 드리겠습니다