- 이제 IndexedDB 2.0 표준이 Chrome에서 완전히 지원되며 새로운 스키마 관리, 일괄 작업 메서드, 더 표준화된 오류 처리 기능을 제공합니다.
- 프로그레시브 웹 앱은
display: fullscreen
를 사용하면 몰입도가 높아집니다. allow-top-navigation-by-user-activation
: 샌드박스 처리된iframes
에 새로운 기능 제공- 그 밖에도 다양한 기능이 있습니다.
변경사항의 전체 목록을 확인하고 싶으신가요? Chromium 소스 저장소 변경사항 목록을 확인하세요.
저는 피트 르페이지입니다. Chrome 58의 개발자용 새로운 기능을 자세히 살펴보겠습니다.
IndexedDB 2.0
사이트 데이터베이스의 구조는 성능에 큰 영향을 미치며 변경하기 어려울 수 있습니다. IndexedDB 2.0에서는 이를 변경합니다.
- 이제 리팩터링 후
object
저장소와indexes
의 이름을 그대로 변경할 수 있습니다. - 바이너리 키를 사용하면 성능 저하를 걱정하지 않고 더 자연스러운 키를 사용할 수 있습니다.
getKey()
,openKeyCursor()
,continuePrimaryKey()
메서드를 사용하면 데이터를 더 쉽게 검색할 수 있습니다.
또한 전체 데이터 세트를 일괄 복구할 때 더 이상 getAll()
및 getAllKey()
가 있는 커서가 필요하지 않습니다.
전체 화면 프로그레시브 웹 앱
프로그레시브 웹 앱이 Android 홈 화면에서 실행되면 omnibox를 숨기는 독립형 앱과 같은 모드로 실행됩니다. 이렇게 하면 매력적인 사용자 환경을 만들고 콘텐츠를 위한 화면 공간을 확보할 수 있습니다.
하지만 게임, 동영상 플레이어, 기타 리치 콘텐츠와 같이 더욱 몰입도 높은 환경에서는 시스템 표시줄과 같은 모바일 UI 요소가 여전히 방해가 될 수 있으며, 개발자가 원하는 중요한 픽셀을 차지할 수 있습니다.
이제 웹 앱 매니페스트에서 display: fullscreen
를 설정하여 프로그레시브 웹 앱을 완전히 몰입도 높은 환경으로 만들 수 있습니다.

standalone
모드의 홈 화면에서 실행된 PWA (중간), fullscreen
모드의 홈 화면에서 실행된 PWA (오른쪽)
앱이 홈 화면에서 실행되면 앱이 아닌 모든 모바일 UI 요소가 숨겨집니다.
샌드박스 처리된 iframe 개선사항
이제 Chrome 58에서 새로운 iframe 샌드박스 키워드 allow-top-navigation-by-user-activation
를 지원합니다.
이 키워드는 사용자 상호작용에 의해 트리거되면 자동 리디렉션을 차단하면서 샌드박스 처리된 iframe에 최상위 페이지를 탐색할 수 있는 기능을 제공합니다.
그 외에도 다양한 기능 제공
물론 그 외에도 많은 기능이 있습니다.
clearfix
해킹은 이제 안녕히 계세요. 이제 플로트 및 지우기와 같은 여러 레이아웃 속성을 수동으로 재설정하는 대신display: flow-root
를 사용하여 새 블록 형식 지정 컨텍스트를 추가할 수 있습니다.PointerEvents.getCoalescedEvents()
를 사용하면PointerEvent
가 마지막으로 전송된 이후의 모든 입력 이벤트에 액세스할 수 있습니다. 그리기 앱과 같이 포인트의 정확한 기록이 필요한 경우에 적합합니다.- 이제
data:
URL을 사용하여Workers
및SharedWorkers
를 만들 수 있으므로 불투명한 출처를 제공하여Workers
를 사용한 개발의 보안을 강화할 수 있습니다.
이는 개발자용 Chrome 58의 몇 가지 변경사항일 뿐입니다.
이 동영상이 마음에 드셨다면 디자이너와 개발자가 협업할 때 발생하는 문제를 해결하는 데 도움이 되는 새로운 동영상 시리즈인 디자이너 대 개발자를 확인해 보세요.
그런 다음 YouTube 채널을 구독하면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 펫 르페이지입니다. Chrome 59가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.