[Raywenderlich - iOS] Universal Link 적용하기

iOS9에서 소개된 Universal link. Raywenderlich의 튜토리얼을 살펴봅니다!

---

혹시 제공하는 서비스가 웹과 iOS앱을 함께 지원하고 있나요? 

iOS9에서 웹과 앱을 연결할 수 있는 Universal link가 소개되었습니다. 사용자가 웹에서 HTTP link를 탭하면 즉시 앱으로 서비스가 연결되는 아주 seamless한 기능이지요.

이번 튜토리얼에서는 Heroku웹사이트를 iOS앱과 연결하는 방법을 소개합니다. 이 서비스는 single-board computer(아두이노, 라즈베리파이 등)를 소개합니다.

참고로, Universal link적용을 위해서는 반드시 애플 개발자 계정이 등록되어 있어야 합니다!

Note

Universal link을 사용하면 URL Scheme의 기능을 대부분 대체할 수 있습니다.

HTTPS웹서버에 app id를 기록한 파일을 두면, URL link가  app으로 전달되고 app에서는 호출된 url을 핸들링하게 됩니다.

이런 조건들 때문에, 실제 웹서버와 앱스토어에 올린 앱이 없다면 universal link를 테스트하기가 어렵습니다. 아래 튜토리얼을 그대로 여러분이 따라하긴 어렵겠지만, 한번 읽어보시면 좋은 경험이 될 것입니다.

Getting Started

 starter project here를 다운로드하여 실행하면 아래 화면(ComputersController)이 나타납니다.

세 가지의 유명한 single-board computer를 보여주고 있습니다. 터치를 해보면 선택한 computer에 해당하는 상세화면(ComputerDetailController)으로 이동합니다.

상세화면에서는 computer의 상세정보, 가격 등을 알 수 있습니다.

위 서비스를 제공하는 웹사이트도 이미 있습니다. starter website here에서 확인할 수 있습니다.

허접해보일 수 있지만, 튜토리얼을 위한 데모사이트이니 이해해주세요.

이제 웹과 앱, 둘 다 훑어 보았으니 둘을 연결하는 작업을 해보겠습니다. 최종 구현 목표는 이렇습니다.

사용자가 웹사이트에서 single-board computer하나를 클릭하면 브라우저에서 상세화면으로 이동하는 것이 아닌 앱이 실행되며 앱으로 상세화면을 보여주어야 한다.

이 기능을 구현하기 위해서는 세 단계를 거쳐야 합니다.

1. 앱에 웹사이트 정보를 알려주어야 한다.

2. 웹사이트에 앱의 정보를 알려주어야 한다.

3. URL link가 탭 될 때마다, 앱에서는 해당 link에 해당하는 navigation을 핸들링 해주어야 한다.

위 단계를 구현하기 위헤서는 몇 가지 조건이 있습니다.

웹사이트에 write권한이 있어야 합니다. 웹사이트는 HTTPS를 제공해야하며 서버에 파일을 업로드할 수 있어야 합니다. 여러분의 Provisioning Profile에 기록된 앱이 있어야 합니다. 앱의 Capabilities에 웹사이트의 정보를 기록해야하기 때문입니다.

이런 조건들 때문에, 튜토리얼을 여러분이 그대로 따라하는건 불가능합니다.ㅜ.ㅜ 한번 보시면서 어떻게 진행되는지만 알아두시길 바랍니다.

Configuring the App

먼저 앱에서 universal link 설정을 합니다. UniversalLinks.xcodeproj를 열어서 아래 순서대로 진행합니다.

1. UniversalLinks 프로젝트를 선택

2. UniversalLinks  Target을 선택

3. Capabilities탭으로 이동

4. Associated Domains을 ON으로 변경

Select a Development Team to Use for Provisioning라는 문구가 뜨면 애플개발자 계정에 등록된 Team을 선택해주세요.

“An App ID with identifier ‘com.razeware.UniversalLinks’ is not available”.라는 에러문구가 뜨는건 App ID가 중복되기 때문입니다. App ID를 Unique하게 바꾸어 주세요.

+버튼을 눌러 아래 도메인을 입력해주세요.

applinks:rw-universal-links-final.herokuapp.com

반드시 applinks를 prefix로 적어주셔야 합니다. 위 과정을 진행하면 아래화면처럼 되어야 합니다.

첫 번째 과정은 끝입니다. 이제 앱은 웹사이트에 대한 정보를 알게 되었습니다. 다음은 웹사이트에서 설정을 해보겠습니다.

Configuring the Website

앱에서의 작업은 마쳤으니 웹에도 앱에 대한 정보를 알려 주도록 합니다. 이를 위해서는 apple-app-site-association라는 파일이 필요합니다. 이 파일이 Universal link와 함께 새로이 등장한 것은 아니고 iOS8에서 웹 Credential과 Handoff에서 사용하던 파일입니다. 이 파일은 JSON형식의 데이터를 담고 있지만 확장자를 .json으로 해서는 안됩니다! 아무 확장자도 없어야 합니다. 디버깅지옥에 빠지길 원치 않으신다면 정확한 파일명을 입력했는지 확인해주세요!

apple-app-site-association파일을 만들어 아래 JSON데이터를 입력해주세요.

{
  "applinks": {
    "apps": [],
    "details": [
    {
      "appID": "KFCNEC27GU.com.razeware.UniveralLinksTutorial",
      "paths": ["*"]
    }
    ]
  }
}

 applinks필드는 웹사이트와 관련된 앱을 결정합니다. apps필드는 빈 Array상태로 남겨주세요. 안에는 appId와 URL path로 이루어진 딕셔너리의 배열로 이루어져 있습니다.편의상 “*” 라는 와일드카드를 사용하겠습니다. 실제로 paths의 값은 특정 폴더나 파일명으로 지정할 수 있습니다.

appID는 team ID와 앱의 bundle ID로 구성됩니다. 위 코드에는 Raywenderlich Team의 team ID를 사용했습니다. 여러분은 여러분의 team ID를 사용하셔야 합니다.

애플 개발자 계정을 등록할 때 team ID도 발급됩니다.  Apple developer center에서 확인할 수 있습니다. 로그인한 뒤, Your Account탭에서 Developer Account Summary섹션을 보면 아래와 같이 team ID를 찾을 수 있습니다.

앱의 bundle ID는 XCode의 Targets\UniversalLinks\General에서 확인할 수 있습니다.

apple-app-site-association파일을 생성하였으니 웹서버에 업로드 하겠습니다.

다시 말씀드리지만, "write access"권한이 있어야 합니다. 여러분이 저희 웹사이트에 업로드하실 수는 없으니, 업로드가 완료된 사이트를 알려드릴게요.

finished website에 파일이 업로드 되었습니다.

업로드된 파일을 확인하시려면 http://rw-universal-links-final.herokuapp.com/apple-app-site-association를 확인하시면 됩니다.

이제 앱도 웹에 대해서 알고있고, 웹 또한 앱에 대한 정보를 알게 되었습니다.

이제 URL link를 앱에서 핸들링하는 작업을 구현해보겠습니다.

Handling Universal Links

앱과 웹이 서로의 정보를 알고 있기 때문에, 웹에서 발생한 URL link가 앱으로 들어오게 됩니다.

AppDelegate.swift를 열 아래의 메소드를 추가해줍니다.

func presentDetailViewController(_ computer: Computer) {
    
  let storyboard = UIStoryboard(name: "Main", bundle: nil)
    
  let detailVC = storyboard.instantiateViewController(withIdentifier: "NavigationController") as! ComputerDetailController
  detailVC.item = computer
    
  let navigationVC = storyboard.instantiateViewController(withIdentifier: "DetailController") as! UINavigationController
  navigationVC.modalPresentationStyle = .formSheet
    
  navigationVC.pushViewController(detailVC, animated: true)
}

위 메소드는 ComputerDetailController를 열어 파라미터로 전달된 Computer에 해당하는 정보를 보여주도록 합니다.

다음으로 아래의 메소드를 추가해줍니다.

func application(_ application: UIApplication,
                   continue userActivity: NSUserActivity,
                                        restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
    
  // 1
  guard userActivity.activityType == NSUserActivityTypeBrowsingWeb,
    let url = userActivity.webpageURL,
    let components = URLComponents(url: url, resolvingAgainstBaseURL: true) else {
      return false
  }
    
  // 2
  if let computer = ItemHandler.sharedInstance.items.filter({ $0.path == components.path}).first {
    self.presentDetailViewController(computer)
    return true
  }
    
  // 3
  let webpageUrl = URL(string: "http://rw-universal-links-final.herokuapp.com")!
  application.openURL(webpageUrl)
    
  return false
}

위 메소드는 앱과 관련된 Universal link가 발생할 때마다 호출됩니다.

1. 전달된 userActivity의 값을 검증합니다. 다음으로 activity의 path요소를 검출합니다. 실패하면 return false구문이 실행되고 앱은 전달된 activity를 핸들링하지 못하게 됩니다.

2. 1에서 검출한 path를 이용하여, 어떤 computer를 보여주어야 하는지 결정합니다. 결정되면 detail viewController를 띄우고 return true구문이 실행됩니다.

3. 만약 2에서 보여주어야할 computer가 결정되지 못하면, application에 URL을 open하도록 요청합니다. 아마도 Safari에 URL이 연결될겁니다. 1에서와 마찬가지로, return false구문이 실행되며 호출하여 앱이 해당 URL을 핸들링하지 못하였음을 알려줍니다.

Testing the Links

위에서 언급한대로, 해당 기능을 테스트해보기는 쉽지가 않습니다. 하지만 기능을 만들어 가는 과정을 함께 알아본 것에 의의를 두도록 할게요.

Universal link는 UIWebView, WKWebView, SFSafariViewController, 메모앱, Safari 등 많은 곳에서 연결되는 것도 기억해주세요.

출처 : https://www.raywenderlich.com/128948/universal-links-make-connection