iOS9 소개
2015.10.21
박재성

Force Touch Events
Force Touch Trackpads
Force Touch를 지원하는 트랙패드에서 누름 강도에 따른 처리를 위한 새로운 API.
마우스 이벤트의 webkitForce 속성을 통해 접근할 수 있다.
참고 : Responding to Force Touch Events
element.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.force
element.addEventListener("touchstart", function(event) {
event.touches[0].force; // 누름 강도에 따라, 0.0 ~ 1.0 사이의 값을 반환
}, false);
데모
3D Touch
ForceTouch 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

Multitasking
iOS9가 설치된 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 View
Split 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 2015
iOS 9 and Safari View Controller: The Future of Web Views

Safari Content Blockers
App extension(유료)을 설치하면 사파리에서
광고, 트래커, 커스텀 폰트, 큰 이미지, JS 파일 등을 차단
*App extension은 사파리에 JSON 포맷의 rules 배열정보를 제공하며, 사파리는 이 정보를 바이트코드로 변환해 사용
사파리 설정에서 Content Blocker 앱을 설정하는 형태로 사용
지원 기기 :
iPhone 5s ~ 6s
iPad mini 2~4 / Air(2) / Pro
iPod 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

WKWebView
UIWebView는 공식적으로 폐지(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 Search
Spotlight 검색 또는 Siri를 통해 앱의 컨텐츠 또는 웹을 검색
로 App Search 최적화(SEO) 여부 검사
앱내 컨텐츠 인덱싱은 를 사용, 앱내 컨텐츠 검색 가능
App Search API Validation Tool
CoreSpotlight
Search for Developers
Apple's Siri, Spotlight extend Google-like search inside iOS 9 apps

CloudKit JS
CloudKit 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 2
Introducing 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-points
CSS Scroll Snap Galleries demo

CSS Conditional Rules
CSS 속성 지원여부를 확인할 수 있는 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
Classes
Computed Properties
Weak Set
Number Object
Octal and Binary Literals
Symbol Objects
Template 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

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

고맙습니다.