![TouchEvent.force
터치 이벤트 발생시, 터치의 누름 강도를 값으로 반환
참고 : Touch.force
element.addEventListener("touchstart", function(event) {
event.touches[0].force; // 누름 강도에 따라, 0.0 ~ 1.0 사이의 값을 반환
}, false);
데모
3D Touch
ForceTouch demo](https://image.slidesharecdn.com/ios9-151021085712-lva1-app6892/85/iOS9-5-320.jpg)
iOS9 소개
- 2. 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);
- 3. Event 발생시점 webkitmouseforcewillbegin mousedown 직전에 발생 webkitmouseforcedown Force click인 경우, mousedown 이벤트 이후에 발생 webkitmouseforceup Force click인 경우, mousedown 이벤트 이후 버튼을 뗀 후 발생 webkitmouseforcechanged Force click 이벤트내에서 변경이 발생될 때
- 5. TouchEvent.force 터치 이벤트 발생시, 터치의 누름 강도를 값으로 반환 참고 : Touch.force element.addEventListener("touchstart", function(event) { event.touches[0].force; // 누름 강도에 따라, 0.0 ~ 1.0 사이의 값을 반환 }, false); 데모 3D Touch ForceTouch demo
- 6. 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
- 7. Multitasking iOS9가 설치된 iPad에서는 새로운 멀티태스킹 기능들이 추가 되었다.
- 8. a) Slide Over 가로모드 상태에서 우측 3/1 영역을 사용, 현재 앱을 벗어나지 않고 다른 앱을 실행 2개의 앱이 동시에 온전히 실행되는 것이 아니며, 완전한 멀티태스킹이라고 하긴 어려움 지원 기기 : iPad mini 2, iPad mini 3, iPad Air, iPad Air 2, iPad Pro
- 9. iOS 9 New Features : Slide Over - iPhone , iPad - Piece of Cake Series
- 10. b) Split View Split View를 지원하는 앱에서 사용 가능하며, Slide Over 상태에서 2개의 앱을 화면 분할해 동시에 2개 앱을 실행 지원 기기 : iPad Air 2, iPad Pro
- 11. 분할 크기에 따라 뷰포트 width 값은 다음과 같다. 분할된 화면크기 iPad (non iPad Pro) iPad Pro 1/3 320px 375px 1/2 507px 678px 2/3 694px 981px
- 12. iOS 9 New Features : Split Multitasking- iPhone , iPad - Piece of Cake Series
- 13. c) Picture-in-Picture 다른 앱을 실행하는 동안에도, 동영상을 볼수 있는 기능이다. 지원 기기 : iPad mini 2, iPad mini 3, iPad Air, iPad Air 2, iPad Pro
- 14. 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 === "pictureinpicture" ? "inline" : "pictureinpicture"); }); } else { pipButtonElement.disabled = true; }
- 15. How to Use Picture in Picture Mode on iOS 9 How to Use iOS 9 Picture in Picture Mode
- 16. Safari View Controller 웹 컨텐츠에 대한 처리를 웹뷰가 아닌 사파리에 위임하는 형태로 동작 앱과 별도의 프로세스로 동작
- 17. 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
- 18. 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세대
- 19. Content Blockers App : (무료) (유료) - (유료) 1Blocker Crystal Purify 실행 데모 동영상 List of content blockers for iOS 9
- 20. : 3.9x 빠르고, 53% 더 적은 bandwidth를 사용Crystal 자체 벤치마크 이는 당연한 결과이기도 한데, 일부 리소스들이 차단되어 로딩되지 않으므로 로딩이 빨라질 수밖에 없다. 그러나 어떤 리소스들이 차단되는지에 대한 불명확한 점 때문에 논란의 여지가 있다.
- 21. 사용자는 새로고침을 길게 눌러 content blocker 없이 로딩하도록 할수 있다. 참고 : Content Blocking Safari Extensions
- 22. 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
- 23. 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
- 24. 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
- 25. CloudKit JS CloudKit JS를 통해 iCloud 데이터에 액세스 할수 있다. CloudKit JS Reference
- 26. Back button 커스텀 URI 또는 Universal Link를 통해 네이티브 앱으로 이동된 경우, 앱 좌측 상단 에 되돌아가기 버튼이 생성되며 버튼을 누르면 이전 화면으로 되돌아 갈수 있다.
- 27. 새로운 OS (tvOS, watchOS) tvOS: 브라우저 및 웹뷰 없음. 그러나 JavaScript, XHR 그리고 DOM은 XML 기반의 TVML 마크업을 통해 실행 watchOS: 브라우저 및 웹뷰 없음 About TVML
- 28. JavaScript & CSS
- 29. Navigation Timing API 웹사이트의 성능측정 데이터를 제공하는 Navigation Timing API가 iOS 8.0에 추가되었다가 8.1에서 제거되었는데, iOS9에 다시 추가 참고 : Navigation Timing
- 30. Backdrop CSS 요소가 아닌 배경에 필터를 지정할 수 있는 backdrop 필터지원 demo Filter Effects Module Level 2 Introducing Backdrop Filters
- 31. CSS Scroll Snap Points 지정된 픽셀만큼 이동을 고정시킬 수 있다. (플리킹과 같은 UX) <style> #leftsnap { width: 300px; overflowx: auto; overflowy: hidden; webkitscrollsnaptype: mandatory; webkitscrollsnappointsx: repeat(300px); } </style> <div id="leftsnap"> <img src="img01.png"> <img src="img02.png"> <img src="img03.png"> ... </div> Scroll Snapping with CSS Snap Points
- 32. Internet Explorer Samples: snap-points CSS Scroll Snap Galleries demo
- 33. CSS Conditional Rules CSS 속성 지원여부를 확인할 수 있는 CSS 지시자인 @supports와 JavaScript API인 CSS.supports 지원이 추가 CSS Conditional Rules Module Level 3
- 34. @supports 특정 css 속성을 브라우저가 지원하는지 또는 하지 않는지에 따라 특정 스타일을 적용 @supports (boxshadow: 0 0 10px rgba(0,0,0,0.1)) { /* CSS code */ } ==> boxshadow 속성을 지원하는 경우 적용 @supports not (animationduration: 1s) { /* CSS code */ } ==> animationduration 속성이 지원되지 않는 경우 적용 and, or 연산자를 사용한 조건식을 사용 @supports ((borderradius:4px) and (transitionduration: 1s)) or (transformorigin: 5% 5% /* CSS code */ } @supports를 활용하면 특정 속성이 지원되는 브라우저의 경우, 별도의 css 파일을 로딩하도록 처리 @supports (boxshadow: 0 0 10px rgba(0,0,0,0.1)) { @import url('boxshadow.css'); } @supports(webkitscrollsnaptype: mandatory) { ... }
- 35. CSS.supports() API 특정 CSS 속성이 지원되는지 여부는 다음과 같이 확인 // webkitscrollsnaptype 속성과 그 값으로 mandatory가 지원되는지 여부 확인 if (window.CSS && CSS.supports("webkitscrollsnaptype", "mandatory")) { ... }
- 36. ES6 지원 추가항목 ECMA-262 6th Edition, ECMAScript 2015 Classes Computed Properties Weak Set Number Object Octal and Binary Literals Symbol Objects Template Literals
- 37. 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; }
- 38. 기타 -webkit- prefix를 붙여 사용하던 CSS 속성들 일부에 대해 prefix 제거 ( ) <input type=file>에서 iCloud 드라이브 또는 써드파티 앱의 파일 등 선택가능 https 프로토콜을 사용하는 페이지에서는 http와 https를 혼용해 리소스들을 로딩 할 수 없음 네이티브 앱에서 확장기능을 통해, 사파리의 공유된 링크(shared links)에 데이터를 추가할 수 있음 지원 목록 Document.scrollingElement
- 39. 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
- 40. 고맙습니다.