Chrome 58의 새로운 기능

  • IndexedDB 2.0 표준이 이제 Chrome에서 완벽하게 지원되며 새로운 스키마 관리, 일괄 작업 메서드, 보다 표준화된 실패 처리 기능을 제공합니다.
  • display: fullscreen를 사용하면 프로그레시브 웹 앱의 몰입도가 높아집니다.
  • allow-top-navigation-by-user-activation가 샌드박스 처리된 iframes개의 새로운 권한을 제공합니다.
  • 이 외에도 많은 기능이 제공됩니다.

변경사항의 전체 목록을 확인하시겠습니까? Chromium 소스 저장소 변경사항 목록을 확인하세요.

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

색인화된 데이터베이스 2.0

사이트의 데이터베이스 구조는 성능에 큰 영향을 미치며 변경하기 어려울 수 있습니다. IndexedDB 2.0은 이를 변경합니다.

  • 이제 리팩터링 후 object 저장소 및 indexes의 이름을 그대로 변경할 수 있습니다.
  • 바이너리 키를 사용하면 성능 저하에 대한 걱정 없이 더 많은 자연 키를 사용할 수 있습니다.
  • getKey(), openKeyCursor(), continuePrimaryKey() 메서드를 사용하면 데이터를 더 쉽게 가져올 수 있습니다.

또한 전체 데이터 세트를 일괄 복구하는 데 더 이상 getAll()getAllKey()이 있는 커서가 필요하지 않습니다.

전체 화면 프로그레시브 웹 앱

프로그레시브 웹 앱이 Android 홈 화면에서 실행되면 검색주소창을 숨기는 독립형 앱과 유사한 모드로 실행됩니다. 이렇게 하면 몰입도 높은 사용자 환경을 만들고 콘텐츠를 위한 화면 공간을 확보할 수 있습니다.

하지만 게임, 동영상 플레이어 또는 기타 리치 콘텐츠와 같이 더욱 몰입감 있는 환경의 경우 시스템 표시줄과 같은 모바일 UI 요소는 여전히 주의를 분산시키고 사용자가 원하는 가치 있는 픽셀을 차지할 수 있습니다.

이제 웹 앱 매니페스트에서 display: fullscreen을 설정하여 프로그레시브 웹 앱을 몰입감 있게 제공할 수 있습니다.

PWA가 홈 화면 (왼쪽)에서 실행되었고, 홈 화면에서 standalone 모드 (가운데), fullscreen 모드 (오른쪽)로 홈 화면에서 실행되었습니다.

앱이 홈 화면에서 실행되면 앱이 아닌 모든 모바일 UI 요소가 숨겨집니다.

샌드박스 처리된 iframe 개선

이제 Chrome 58은 새로운 iframe 샌드박스 키워드 allow-top-navigation-by-user-activation를 지원합니다.

이 키워드는 사용자 상호작용으로 트리거될 때 샌드박스 처리된 iframe에 최상위 페이지를 탐색하는 기능을 제공하면서 자동 리디렉션은 차단합니다.

그 외에도 다양한 기능 제공

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

  • clearfix 해킹이 더 이상 필요하지 않습니다. float 및 clear와 같은 여러 레이아웃 속성을 수동으로 재설정하는 대신 display: flow-root를 사용하여 새 블록 형식 컨텍스트를 추가할 수 있습니다.
  • PointerEvents.getCoalescedEvents()를 사용하면 PointerEvent가 마지막으로 전달된 이후의 모든 입력 이벤트에 액세스할 수 있습니다. 그리기 앱 등에서 정확한 점 기록이 필요한 경우에 적합합니다.
  • 이제 data: URL을 사용하여 WorkersSharedWorkers를 만들 수 있으므로 불투명한 출처를 제공하여 Workers를 사용한 개발의 보안을 강화할 수 있습니다.

개발자를 위한 Chrome 58의 몇 가지 변경사항을 살펴보았습니다.

이 동영상이 즐거웠다면 디자이너와 개발자가 협력할 때 직면하는 문제를 해결하는 새로운 동영상 시리즈인 디자이너 대 개발자도 확인하세요.

그런 다음 YouTube 채널구독하면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 59가 출시되는 대로 바로 Chrome의 새로운 기능을 소개해 드리겠습니다.