iOS9 소개2015.10.21

박재성

Force Touch EventsForce Touch Trackpads

Force Touch를 지원하는 트랙패드에서 누름 강도에 따른 처리를 위한 새로운 API.마우스 이벤트의 webkitForce 속성을 통해 접근할 수 있다.

참고 : Responding to Force Touch Eventselement.addEventListener("webkitmouseforcewillbegin", function(event) event.webkitForce; // 누름의 강도에 대한 값(number)을 반환

// Constants : // represents the amount of force required for a regular and force click, respectively. event.WEBKIT_FORCE_AT_MOUSE_DOWN; event.WEBKIT_FORCE_AT_FORCE_MOUSE_DOW;, false);

Event 발생시점

webkitmouseforcewillbegin mousedown 직전에 발생

webkitmouseforcedown Force click인 경우, mousedown 이벤트이후에 발생

webkitmouseforceup Force click인 경우, mousedown 이벤트이후 버튼을 뗀 후 발생

webkitmouseforcechanged Force click 이벤트내에서 변경이 발생될 때

TouchEvent.force터치 이벤트 발생시, 터치의 누름 강도를 값으로 반환

참고 : Touch.forceelement.addEventListener("touchstart", function(event) event.touches[0].force; // 누름 강도에 따라, 0.0 ~ 1.0 사이의 값을 반환, false);

데모

3D TouchForceTouch demo

iPad Pro기존 iPad들의 뷰포트 width(device-width)는 768px

iPad Pro(12.9 인치 - 2015/11 출시)의 뷰포트 width는 1024px iPad Pro는 3D Touch 미지원. 대신 Apple Pen을 지원 (Apple Pen과 관련된 별도 API는 없음)

iOS9 and Responsive Web Design

iPad browser WIDTH & HEIGHT standard

MultitaskingiOS9가 설치된 iPad에서는 새로운 멀티태스킹 기능들이 추가 되었다.

a) Slide Over가로모드 상태에서 우측 3/1 영역을 사용, 현재 앱을 벗어나지 않고 다른 앱을 실행

2개의 앱이 동시에 온전히 실행되는 것이 아니며, 완전한 멀티태스킹이라고 하긴 어려움

지원 기기 : iPad mini 2, iPad mini 3, iPad Air, iPad Air 2, iPad Pro

iOS 9 New Features : Slide Over - iPhone , iPad - Piece of Cake Series

b) Split ViewSplit View를 지원하는 앱에서 사용 가능하며,

Slide Over 상태에서 2개의 앱을 화면 분할해 동시에 2개 앱을 실행

지원 기기 : iPad Air 2, iPad Pro

분할 크기에 따라 뷰포트 width 값은 다음과 같다.

분할된 화면크기 iPad (non iPad Pro) iPad Pro

1/3 320px 375px

1/2 507px 678px

2/3 694px 981px

iOS 9 New Features : Split Multitasking- iPhone , iPad - Piece of Cake Series

c) Picture-in-Picture다른 앱을 실행하는 동안에도, 동영상을 볼수 있는 기능이다.

지원 기기 : iPad mini 2, iPad mini 3, iPad Air, iPad Air 2, iPad Pro

PiP를 지원하는 앱의 경우 비디오 하단의 PiP 모드 전환버튼을 통해 실행한다.

다음은 PiP 모드를 지원하는 경우 확인과, PiP로 전환하는 샘플예제if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function")

// Toggle PiP when the user clicks the button. pipButtonElement.addEventListener("click", function(event) video.webkitSetPresentationMode( video.webkitPresentationMode === "picture­in­picture" ? "inline" : "picture­in­picture"); ); else pipButtonElement.disabled = true;

How to Use Picture in Picture Mode on iOS 9

How to Use iOS 9 Picture in Picture Mode

Safari View Controller웹 컨텐츠에 대한 처리를 웹뷰가 아닌 사파리에 위임하는 형태로 동작

앱과 별도의 프로세스로 동작

full 페이지로 동작 (앱에서 link tap시 열리고, done을 누르면 창이 닫히는 형태)

주소창의 주소는 readonly 이며, 변경할 수 없음쿠키와 웹사이트 데이터를 사파리와 공유. - ex. 로그인된 상태라면 Safari View Controller에서도 동일하게 로그인된 상태가 됨, form에 대한 데이터의 autofill 처리, 등

Introducing Safari View Controller - Apple WWDC 2015iOS 9 and Safari View Controller: The Future of Web Views

Safari Content BlockersApp extension(유료)을 설치하면 사파리에서

광고, 트래커, 커스텀 폰트, 큰 이미지, JS 파일 등을 차단*App extension은 사파리에 JSON 포맷의 rules 배열정보를 제공하며, 사파리는 이 정보를 바이트코드로 변환해 사용

사파리 설정에서 Content Blocker 앱을 설정하는 형태로 사용

지원 기기 :iPhone 5s ~ 6siPad mini 2~4 / Air(2) / ProiPod touch 6세대

Content Blockers App :

(무료)

(유료)

- (유료)

1Blocker

Crystal

Purify 실행 데모 동영상

List of content blockers for iOS 9

: 3.9x 빠르고, 53% 더 적은 bandwidth를 사용Crystal 자체 벤치마크

이는 당연한 결과이기도 한데, 일부 리소스들이 차단되어 로딩되지 않으므로 로딩이 빨라질 수밖에 없다.그러나 어떤 리소스들이 차단되는지에 대한 불명확한 점 때문에 논란의 여지가 있다.

사용자는 새로고침을 길게 눌러 content blocker 없이 로딩하도록 할수 있다.

참고 : Content Blocking Safari Extensions

WKWebViewUIWebView는 공식적으로 폐지(deprecated) 예정 In apps that run in iOS 8 and later, use WKWebView instead of using UIWebView.

Swift or Objective-C 에서 를 통해 웹뷰의 로컬스토리지를 핸들링 할수도 있음별도 파일을 URL로 로딩가능커스텀 UserAgent 지정가능

WKWebsiteDataStore

Universal Links네이티브 앱으로의 deep linking앱과 연관된 URL이 전달되면 네이티브 앱이 설치된 경우, 사파리에서 리다이렉션을 통하지 않고, 네이티브 앱에서 바로 실행

앱이 처리할 URL에 대한 데이터를 apple-app-site-association JSON 파일로https 웹서버에 업로드 Amazon: https://www.amazon.com/apple-app-site-association

How to Set Up Universal Links to Deep Link on Apple iOS 9

App SearchSpotlight 검색 또는 Siri를 통해 앱의 컨텐츠 또는 웹을 검색

로 App Search 최적화(SEO) 여부 검사앱내 컨텐츠 인덱싱은 를 사용, 앱내 컨텐츠 검색 가능App Search API Validation Tool

CoreSpotlight

Search for DevelopersApple's Siri, Spotlight extend Google-like search inside iOS 9 apps

CloudKit JSCloudKit JS를 통해 iCloud 데이터에 액세스 할수 있다.

CloudKit JS Reference

Back button커스텀 URI 또는 Universal Link를 통해 네이티브 앱으로 이동된 경우, 앱 좌측 상단에 되돌아가기 버튼이 생성되며 버튼을 누르면 이전 화면으로 되돌아 갈수 있다.

새로운 OS (tvOS, watchOS)

tvOS: 브라우저 및 웹뷰 없음. 그러나 JavaScript, XHR 그리고 DOM은XML 기반의 TVML 마크업을 통해 실행

watchOS: 브라우저 및 웹뷰 없음About TVML

JavaScript & CSS

Navigation Timing API웹사이트의 성능측정 데이터를 제공하는 Navigation Timing API가iOS 8.0에 추가되었다가 8.1에서 제거되었는데, iOS9에 다시 추가

참고 : Navigation Timing

Backdrop CSS요소가 아닌 배경에 필터를 지정할 수 있는 backdrop 필터지원

demo

Filter Effects Module Level 2Introducing Backdrop Filters

CSS Scroll Snap Points지정된 픽셀만큼 이동을 고정시킬 수 있다. (플리킹과 같은 UX)

<style>#left­snap width: 300px; overflow­x: auto; overflow­y: hidden; ­webkit­scroll­snap­type: mandatory; ­webkit­scroll­snap­points­x: repeat(300px);</style><div id="left­snap"> <img src="img01.png"> <img src="img02.png"> <img src="img03.png"> ...</div>

Scroll Snapping with CSS Snap Points

Internet Explorer Samples: snap-pointsCSS Scroll Snap Galleries demo

CSS Conditional RulesCSS 속성 지원여부를 확인할 수 있는 CSS 지시자인 @supports와

JavaScript API인 CSS.supports 지원이 추가

CSS Conditional Rules Module Level 3

@supports특정 css 속성을 브라우저가 지원하는지 또는 하지 않는지에 따라 특정 스타일을 적용

@supports (box­shadow: 0 0 10px rgba(0,0,0,0.1)) /* CSS code */ ==> box­shadow 속성을 지원하는 경우 적용

@supports not (animation­duration: 1s) /* CSS code */ ==> animation­duration 속성이 지원되지 않는 경우 적용

and, or 연산자를 사용한 조건식을 사용@supports ((border­radius:4px) and (transition­duration: 1s)) or (transform­origin: 5% 5% /* CSS code */

@supports를 활용하면 특정 속성이 지원되는 브라우저의 경우,별도의 css 파일을 로딩하도록 처리

@supports (box­shadow: 0 0 10px rgba(0,0,0,0.1)) @import url('box­shadow.css');

@supports(­webkit­scroll­snap­type: mandatory) ...

CSS.supports() API특정 CSS 속성이 지원되는지 여부는 다음과 같이 확인

// ­webkit­scroll­snap­type 속성과 그 값으로 mandatory가 지원되는지 여부 확인if (window.CSS && CSS.supports("­webkit­scroll­snap­type", "mandatory")) ...

ES6 지원 추가항목ECMA-262 6th Edition, ECMAScript 2015

ClassesComputed PropertiesWeak SetNumber ObjectOctal and Binary LiteralsSymbol ObjectsTemplate Literals

CSS4 pseudo-selectors 지원가상 선택자

:not:any-link:placeholder-shown:read-write:read-only:matches

/* old style */.default .def, .default .bracket, .default .operator, .default .variable color: red;

/* using :matches */.default :matches(.def, .bracket, .operator, .variable) color: red;

기타-webkit- prefix를 붙여 사용하던 CSS 속성들 일부에 대해 prefix 제거 ( )<input type=file>에서 iCloud 드라이브 또는 써드파티 앱의 파일 등 선택가능https 프로토콜을 사용하는 페이지에서는 http와 https를 혼용해 리소스들을 로딩할 수 없음네이티브 앱에서 확장기능을 통해, 사파리의 공유된 링크(shared links)에 데이터를추가할 수 있음

지원

목록

Document.scrollingElement

ReferencesiOS 9, Safari and the Web: 3D Touch, new Responsive Web Design,Native integration and HTML5 APIsWhat's new in Safari 9What's New in Safari : Safari 9.0

고맙습니다.