3D Touch: Bring your apps to a new dimension

Starting with the iPhone 6S and iOS9, Apple exposed APIs for developers to utilize the device's 3D Touch capability. The adoption of 3D Touch support in apps has been slow but steady. Apple is providing more ways for us to integrate them. As time goes on, your more of your user base will own a device that has 3D Touch capabilities. In addition to providing value and convenience to the user, the many of the 3D Touch APIs are simple and lightweight to use.

This talk goes through what options are available for integrating 3D touch support into your app and how to go about it. We'll look at adding 3D Touch support in the form of:
- Home screen quick actions
- Widgets (formerly known as Today Extensions)
- Peek & pop
- UIPreviewInteraction: custom responses to 3D Touch values
- Notification content extensions

Transcript

1. 3D Touch Bring your apps to a new dimension
2. ! Hi, I'm Meghan! @meghafon iOS Engineer Berlin !
3. Agenda 1. Overview of 3D Touch & why it rocks ! 2. How you can integrate it into your app 3. Deep Dive into the APIs
4. A Li!le History — 3D Touch display, iPhone 6S(+) and later — Senses pressure user applies to screen —  worked on 3D Touch display for 5 years ! ! ! — iOS9: APIs exposed
5. Why Add 3D Touch Support? — ¯\_(π)_/¯ — Fast track users to your app's features ! > " — Users can use apps without having to open them — App Store visibility
6. !"
7. ! 3D Touch APIs are easy to use !
8. 3D Touch Support ! Tour 1. Home Screen Quick Actions 2. Widgets (formerly Today Extensions) 3. Peek & Pop 4. Custom UIPreviewInteractions 5. Notification Content Extensions
9. Let's build an app! ! Caribou App phrasebook app with ! translations for everyday experiences
10. Quick Wins ! Home Screen Quick Actions — introduced in iOS9 — can provide app with up to 4 — 2 varieties: static and dynamic
11. Static Quick Actions — Generated @ compile time — Defined in Info.plist
12. Static Quick Actions required UIApplicationShortcutItemType UIApplicationShortcutItemTitle optional UIApplicationShortcutItemSubtitle UIApplicationShortcutItemIconType UIApplicationShortcutItemUserInfo or UIApp...ItemFile
14. Dynamic Quick Actions — Generated @ runtime — Won't appear until user opens app and uses relevant feature — When relevant, add to UIApplication's shortcutItems let recentExperienceShortcut = UIApplicationShortcutItem(type: "Recent Experience", localizedTitle: recentExperience.name, localizedSubtitle: "Recent Experience", icon: UIApplicationShortcutIcon(type: .time), userInfo: ["recent_experience" : recentExperience]) UIApplication.shared.shortcutItems = [recentExperienceShortcut]
15. Acting on Quick Actions — AppDelegate receives callback when user selects quick action — Check UIApplicationShortcutItem's type — Deeplink user to appropriate place func application(_ application: UIApplication, performActionFor shortcutItem: UIApplicationShortcutItem, completionHandler: @escaping (Bool) -> Void) { switch shortcutItem.type { case "Search": // Deep link user to search tab case "Saved": // Deep link user to saved tab case "Recent Experience": // Deep link user to recent experience view controller default: break } }
16. Widget ! — iOS10 widgets have two display modes NCWidgetDisplayMode: compact and expanded — Appear in compact mode when 3D touching app icon
17. Update Your Widget ! 1. Update layout to be adaptive for compact & expanded modes 2. Widget appears in compact mode when user 3D touches app icon 3. !
18. Peek & Pop ! — Preview content before navigation —  recommends to implement whenever content can be tapped to navigate to it — Interaction should be super fast to user
20. Check Availability ✔ — check @ runtime if device supports 3D Touch override func viewDidLoad() { super.viewDidLoad() if traitCollection.forceTouchCapability == .available { registerForPreviewing(with: self, sourceView: collectionView) } }
21. Listen for updates ! fileprivate var previewingContext: UIViewControllerPreviewing? override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { if let context = previewingContext, traitCollection.forceTouchCapability != .available { unregisterForPreviewing(withContext: context) previewingContext = nil } else if traitCollection.forceTouchCapability == .available, previewingContext == nil { previewingContext = registerForPreviewing(with: self, sourceView: collectionView) } }
22. Backwards Compatibility? — Provide an alternative, if you can — UILongPressGestureRecognizer's press + hold (old school)
23. !" ...back to Peek & Pop
24. Peek & Pop ! — UIViewControllerPreviewingDelegate: 2 required methods public func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? { // return view controller to be shown in Peek, quickly } public func previewingContext(_ previewingContext: UIViewControllerPreviewing, commit viewControllerToCommit: UIViewController) { show(viewControllerToCommit, sender: self) }
25. Custom UIPreviewInteraction
27. Custom UIPreviewInteraction ! — ⭐iOS10⭐ — 0.0 (soft press) - 1.0 (hard press)
28. Custom UIPreviewInteraction ! 1. Create UIPreviewInteraction with a source view 2. Set ourselves as the delegate 3. Implement 2 required functions
29. Custom UIPreviewInteraction ! func previewInteraction(_ previewInteraction: UIPreviewInteraction, didUpdatePreviewTransition transitionProgress: CGFloat, ended: Bool) { playbackView.alpha = transitionProgress let playbackRate = playbackSpeedCategory(progress: transitionProgress) player?.rate = playbackRate } func previewInteractionDidCancel(_ previewInteraction: UIPreviewInteraction) { player?.pause() playingView.alpha = 0 }
30. iOS10 Notifications !" powerful !! richer !" more interactive
31. Notification Content Extensions ! — Momentarily capture user's attention — Present something useful without burden of opening app — 3D touching displays notification content extension
32. Notification Content Extensions ! 1. Use the UNNotifications framework 2. Create a Notification Extension 3. Conform to UNNotificationContentExtension in extension's view controller
33. Notification Content Extensions ! — UNNotificationContentExtension: 1 required method public func didReceive(_ notification: UNNotification) { if let phrase = notification.request.content.userInfo["phrase"] as? [String : String] { // Style view to be shown when 3D touched if let original = phrase["original"], let translation = phrase["translation"] { self.originalLabel?.text = "\(original)" self.translationLabel?.text = "\(translation)" } }
34. Summary — save time for user — easy to integrate into your app — quick wins to keep your users engaged — !
35. Thank you! @meghafon — code samples will be tweeted soon