Embedding and Sharing Visually Rich Links 정리 - WWDC2019

Embedding and Sharing Visually Rich Links - WWDC 2019 - Videos - Apple Developer

선 지식

이 영상을 이해하려면 metadata(메타데이터)에 대한 지식이 필요합니다.
metadata(메타데이터)는 데이터에 대한 데이터로써 하위레벨의 데이터를 설명/기술하려는 것을 의미합니다. 밑에 사진처럼 링크를 공유한다면 링크에 대한 미리보기, 제목, 내용의 일부를 함께 볼 수 있게 됩니다.

메타 데이터 [정보통신기술용어해설]

---

iOS 13, macOS 10.15에서 앱에 Rich link를 표시하도록 허용하는 새로운 API 가 공개되었습니다.

key

• Retrieving metadata (주어진 URL로 metadata를 가져오는 방법)
• Presenting links (사용자에게 metadata를 쉽게 보여주는 방법)
• Accelerating the share sheet (공유 시트 가속화)

1. Retrieving metadata

처음 앱의 모습은 테이블 뷰 안에 링크 텍스트가 들어있는 형태입니다.

LPMetadataProvider 클래스를 사용해서 웹 사이트로부터 rich metadata를 가져올 수 있습니다.
startFetchingMetadata 에 URL을 전달하면 LPLinkMetadata 객체를 받게 됩니다. 아래와 같이 사용하면 됩니다.

// Fetch metadata from a given URL.
let metadataProvider = LPMetadataProvider()
let url = URL(string: "https://www.apple.com/ipad")!

metadataProvider.startFetchingMetadata(for url) { metadata, error in
    if error != nil {
        // The fetch failed; handle the error.
        return
    }

    // TODO: Make use of fetched metadata.
}

LPMetadataProvider 와 LPLinkMetadata

• 타이틀, 아이콘, 이미지와 비디오는 모두 Optional 입니다.
• LPLinkMetadata는 직렬화(serializable)가 가능합니다.
• local file URL에도 사용이 가능합니다.

2. Presenting links

1번에서 가져온 metadata를 화면에 보여주려면 LPLinkView 를 사용할 수 있습니다. 해당 클래스를 사용해서 metadata를 보여주게 되면 대충 훑어 봐도 어떤 글인지 알게 됩니다.

// Present LPLinkMetadata in a LPLinkView.
let linkView = LPLinkView(metadata: metadata)
cell.contentView.addSubview(linkView)
linkView.sizeToFit()

 

왼쪽이 초기 화면이고 오른쪽이 LPLinkView 를 적용한 화면입니다.
LPLinkView 는 고유한 사이즈를 가지고 있지만 어떤 사이즈든 맞춰서 보여줍니다.

3. Accelerating the share sheet

마지막은 공유 시트 가속화에 대한 기능입니다. 링크에서 "공유하기"를 누르면 사진과 같은 공유하기 시트가 뜨고 상단에 링크에 대한 미리보기(이미지, 타이틀, 링크 등)가 나타납니다.

문제는 미리보기를 보여주기 위해 공유 시트가 화면에 나타날 때 서버 호출을 하기 때문에 미리 보기의 데이터가 즉각적으로 보이지 않고 호출이 완료된 뒤 보인다는 점입니다. (비 동기적)

3번의 내용은 미리 가져온 LPMetadata 를 사용해서 서버 호출 없이 미리 보기에 metadata를 보여주는 방법입니다.

// Provide prefetched metadata to UIActivityViewController via UIActivityItemSource.

func activityViewControllerLinkMetadata(_: UIActivityViewController) -> LPMetadata? {
    return self.metadata
}

LPLinkMetadata 는 커스텀이 가능하며 URL, image 등을 설정할 수 있습니다.

// Provide custom metadata to UIActivityViewController via UIActivityItemSource.


func activityViewControllerLinkMetadata(_: UIActivityViewController) -> LPLinkMetadata? {
    let metadata = LPLinkMetadata()
    metadata.originalURL = URL(string: "https://www.example.com/apple-pie")
    metadata.url = metadata.originalURLmetadata.title = "The Greatest Apple Pie In The World"
    metadata.imageProvider = NSItemProvider.init(
        contentsOf:Bundle.main.url(forResource: "apple-pie", withExtension: "jpg"))
    return metadata
}

4. Summary

• Use LPMetadataProvider to fetch rich metadata for a URL (LPMetadataProvider 를 사용해서 URL에 대한 rich metadata를 가져오세요.)
• Use LPLinkView to beautifully present links in your app (LPLinkView 를 사용해서 앱 안의 링크를 멋지게 보여주세요.)
• Prefetch LPLinkMetadata to accelerate the share sheet preview in your app (LPLinkMetadata 를 미리 가져와 앱의 공유 시트 미리보기를 가속화하세요.)