[iOS]Widget 

개요

• iOS 8부터 지원, iOS 13까지는 Today Extension을 통해 위젯을 추가 및 사용

• 단, 홈 화면이나 잠금화면에서는 사용 불가능

• iOS 14 이후부터 WidgetKit 도입

• WidgetKit은 오직 SwiftUI를 통해서만 개발 가능

• iOS 16 이상 부터 잠금 화면에서도 사용 가능

• iOS 17 이상 부터 Mac, iPad 잠금 화면, StandBy, Watch Smart Stack 추가

• 정리하면, iOS 17 기준으로 총 7개의 Case에서 위젯 대응 가능 (홈, 잠금, 오늘 보기, Mac, iPad 잠금 화면, StandBy, Watch Smart Stack)

Widget Extension

• File → New → Target → Widget Extension을 통해 추가

• Activate “WidgetExtension” Scheme?는 Activate로 설정

위젯의 기본 구조

• 4가지 struct로 구성

• Provider, Entry, EntryView, Widget

• Provider에서 사용자가 설정한 시간에 맞춰 위젯을 업데이트

• Entry는 위젯에 필요한 데이터 제공, Model의 역할

• Entry에서 제공한 데이터를 바탕으로, EntryView에서 UI 담당

• EntryView를 통해 최종적으로 Widget랜더링

1. Provider

• 애플의 가이드라인에 따르면, 사용자가 홈 화면에 머무르는 시간은 매우 제한적

• 따라서, Widget을 랜더링하는데 많은 시간을 소요하는 것은 권장되지 않음

• 이를 해결하기 위해, 특정 시간에 Widget을 업데이트할 수 있도록 Provider를 설정

• TimelineEntry를 통해 특정 시간에 위젯을 업데이트할 수도 있다.

• Provider에서는 아래 3가지 메서드를 필수적으로 요구

struct Provider: TimelineProvider {
		//위젯의 초기 화면
    func placeholder(in context: Self.Context) -> Self.Entry

		//위젯 갤러리의 미리보기 화면(위젯을 추가할 때 보여지는 화면)
    func getSnapshot(in context: Self.Context, completion: @escaping (Self.Entry) -> Void)

		//타임라인 생성, 업데이트 주기 설정
		//타임라인 -> TimelineEntry의 컬렉션
		//업데이트 주기 -> 언제, 어떤 주기로 위젯을 업데이트할 지 결정
    func getTimeline(in context: Self.Context, completion: @escaping (Timeline<Self.Entry>) -> Void)
}

• Timeline: 이 객체는 여러 TimelineEntry 객체의 컬렉션을 포함. 각 TimelineEntry는 특정 시간에 위젯에 표시될 내용을 정의.

• TimelineEntry: 이 프로토콜을 구현하는 객체는 위젯이 특정 시간에 표시해야 할 데이터를 정의. 각 엔트리는 date 속성을 가지고 있어, 해당 엔트리가 언제 활성화될지를 결정.

1. Entry

• Widget의 Model 역할

• 위젯의 업데이트 시간을 알려주는 date 프로퍼티를 필수 구현

• 스마트 스택 등에서 위젯의 우선순위를 알려주는 relevance도 존재

struct Entry: TimelineEntry {
		//업데이트할 시간
    let date: Date
}

• date: 위젯이 다시 그려질 시간에 대한 정보

• relevance: 스마트 스택 등에서 위젯의 우선 순위

EntryView

• Provider를 통해 Entry를 제공받으면, Entry를 이용해 위젯에 나타날 뷰를 그려준다.

• entry 변수를 활용해 위젯에 표시할 데이터를 받을 수 있다.

struct MyWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text("Time:")
            Text(entry.date, style: .time)

            Text("Emoji:")
            Text(entry.emoji)
        }
    }
}

Widget

• 최종적으로 Widget 프로토콜을 준수하는 Widget 구조체를 설정

• Widget의 고유 문자열, 위젯 갤러리에 보일 위젯의 이름 / 설명, 위젯의 크기 등을 설정할 수 있다.

struct MyWidget: Widget {
    let kind: String = "MyWidget" //위젯 고유 문자열

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            if #available(iOS 17.0, *) {
                MyWidgetEntryView(entry: entry)
                    .containerBackground(.fill.tertiary, for: .widget)
            } else {
                MyWidgetEntryView(entry: entry)
                    .padding()
                    .background()
            }
        }
        .configurationDisplayName("My Widget") //갤러리 이름
        .description("This is an example widget.") //갤러리 설명
				.supportedFamilies([.systemSmall, .systemLarge])//위젯 크기

    }
}

AppGroup

• App과 App Extension(위젯)는 독립적인 프로세스로 실행된다.

• 따라서, 데이터의 sync를 맞추기 위해서는 AppGroup을 통해 데이터를 공유해야한다.

1. AppGroup 생성

2. App Group Identifier 등록 후 UserDefaults 생성

extension UserDefaults {
    
    static var groupShared: UserDefaults {
        //데이터 공유를 위한 공유 저장소 생성
        let groupID = "group.lyoodong.ExWidget" //앱의 번들 ID와 중복될 경우, 크래시 발생
        return UserDefaults(suiteName: groupID)!
    }
}

3. 공유하고 싶은 값을 groupShared 저장소에 저장 및 활용

//값 저장
var body: some View {
    VStack {
        Image(systemName: "globe")
            .imageScale(.large)
            .foregroundStyle(.tint)
        Text("Hello, world!")
        Button("버튼") { 
            print("호출 시작")
            startTimer()
        }
    } 
    .padding()
}

func startTimer() {
    timer = Timer.scheduledTimer(withTimeInterval: 30, repeats: true) { _ in
        APIManager.getTexts { texts in
            if let firstText = texts.first {
                //네트워크 통신을 통해, 30초 한번씩 랜덤 텍스트 저장
								UserDefaults.groupShared.set(firstText, forKey: "randomText")
                print("firstText 성공", firstText)
            } else {
                print("firstText 실패")
            }
        }
    }
}

//값 활용해 위젯에 표기(1분 주기)
func getTimeline(in context: Context, completion: @escaping (Timeline<SimpleEntry>) -> ()) {
    var entries: [SimpleEntry] = []
    let currentDate = Date()
    
    let entryDate = Calendar.current.date(byAdding: .minute, value: 1, to: currentDate)!
    let text = UserDefaults.groupShared.string(forKey: "randomText") ?? "실패"
    let entry = SimpleEntry(date: entryDate, image: newjeansImage, texts: text)    
    entries.append(entry)
    
    let timeline = Timeline(entries: entries, policy: .after(entryDate))
    completion(timeline)
}

주의 사항

• AppGroup, Widget Extension, 앱 모두 개별적인 ID를 등록. 중복 시 크래시 발생

• AppGroup 생성시 .entitlements 확장자를 가지는 파일이 생성되는데 이때, AppGroupID를 정확하게 입력하지 않을 시 크래시 발생

Not updating lastKnownShmemState in CFPrefsPlistSource<0x60000300a6d0> (Domain: group.lyoodong.ExWidget, User: kCFPreferencesCurrentUser, ByHost: No, Container: (null), Contents Need Refresh: Yes): 90 -> 92

• UserDefaults의 GroupID 이슈

• APPGroup의 ID와 동일해야함

• Widget Extension과 앱이 공유하는 파일(ex. groupShared, APIManager, Model 등)은 모두 타겟을 두 곳 모두 설정해줘야 한다.

reloadAllTimelines()

• 특정 이벤트가 발생하면, 즉시 위젯을 업데이트 시킬 수 있다.

• iOS 14 이상 적용.

//버튼 클릭 시 위젯 업데이트
Button("버튼") { 
		//특정 Kind(식별자)에 대한 업데이트
    WidgetCenter.shared.reloadTimelines(ofKind: "Kind")
		//소속된 모든 위젯 업데이트
    WidgetCenter.shared.reloadAllTimelines()
}