The Widget Revolution

This is a presentation I talked at Swiftable 2023 in Buenos Aires, Argentina

With iOS 17, The possibilities of widgets have expanded infinitely, Thanks to AppIntents and animations.
I hope this talk has inspired you with new ideas.

I apologize for the inconvenience. The document contains several embedded videos, but they cannot be played in the PDF format.🙇

Transcript

1. Osamu “Lil Ossa” Hiraoka, iOS engineer The Widget Revolution: Exploring New Possibilities with a TODO List app on a widget Swiftable 2023
2. Introduction My name is Osamu Hiraoka a.k.a Lil Ossa from Japan 🇯🇵 iOS engineer and Break-boy @littleossa
3. Agenda Why I should talk about The Widget Revolution
4. Agenda Why I should talk about The Widget Revolution The widget update from iOS 17 includes interactivity and animations
5. Agenda Why I should talk about The Widget Revolution The widget update from iOS 17 includes interactivity and animations Explore widget possibility with making Todo app on only a widget
6. Agenda Why I should talk about The Widget Revolution The widget update from iOS 17 includes interactivity and animations Explore widget possibility with making Todo app on only a widget
7. Before iOS 16
8. struct TodoListRow: View { let item: TodoItem var body: some View { HStack { Link(destination: URL(string: )!) { Image(systemName: "circle") .resizable() .frame(width: 44, height: 44) .foregroundColor(.gray) } Text(item.name) } } } "widget://complete?id=\(item.id)"
9. "widget://complete?id=\(item.id)" 􀀀
   *UFN
    Widget
10. “widget://complete?id=\(item.id)" 􀀀
    *UFN
     Widget Main App .onOpenURL
11. import SwiftUI struct MainApp: App { var body: some Scene { WindowGroup { ContentView() .onOpenURL { url in print(url) } } } } // Print: widget://complete?id=1
12. import SwiftUI struct MainApp: App { var body: some Scene { WindowGroup { ContentView() .onOpenURL { url in print(url) // Print: widget://complete?id=1 } } } } // Implementation of what you want to do WidgetCenter.shared.reloadAllTimelines() import WidgetKit
13. What should be done in the end?
14. import UIKit UIControl().sendAction(#selector(URLSessionTask.suspend), to: UIApplication.shared, for: nil)
15. import UIKit extension UIControl { static func { UIControl().sendAction(#selector(URLSessionTask.suspend), to: UIApplication.shared, for: nil) } } backToHomeScreenOfDevice()
16. UIControl.backToHomeScreenOfDevice() struct ContentView: View { var body: some View { Button(action: { UIControl. }, label: { RoundedRectangle(cornerRadius: 8) .fill(.blue) .frame(width: 120, height: 48) .overlay { Text("Magic") .foregroundStyle(.white) } }) } } backToHomeScreenOfDevice()
17. import SwiftUI struct MainApp: App { var body: some Scene { WindowGroup { ContentView() .onOpenURL { url in // Implementation of what you want to do WidgetCenter.shared.reloadAllTimelines() } } } } import WidgetKit UIControl.backToHomeScreenOfDevice()
18. Before iOS 16
19. I will become The King of the Widget
20. Real King has come 􀣺
21. My app is Dead
22. Agenda Why I should talk about The Widget Revolution The widget update from iOS 17 includes interactivity and animations Explore widget possibility with making Todo app on only a widget
23. Agenda Why I should talk about The Widget Revolution The widget update from iOS 17 includes interactivity and animations Explore widget possibility with making Todo app on only a widget
24. Bring widgets to life WWDC23 Learn more about interactive Widget
25. CompleteTodoItemIntent CompleteTodoItemIntent struct CompleteTodoItemIntent: AppIntent { static var title: LocalizedStringResource = "Complete a Todo item" func perform() async throws -> some IntentResult { // Implementation what you want to do return .result() } } import AppIntents
26. Button(intent: CompleteTodoItemIntent()) { Text("Complete") } Toggle("Complete", isOn: true, intent: CompleteTodoItemIntent())
27. Agenda Why I should talk about The Widget Revolution The widget update from iOS 17 includes interactivity and animations Explore widget possibility with making Todo app on only a widget
28. Agenda Why I should talk about The Widget Revolution The widget update from iOS 17 includes interactivity and animations Explore widget possibility with making Todo app on only a widget
29. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
30. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
31. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
32. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
33. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
34. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
35. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
36. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
37. import AppIntents struct : AppIntent { static var title: LocalizedStringResource = "Present View” func perform() async throws -> some IntentResult { UserDefaults.standard.setValue(true, forKey: “view_is_presented") return .result() } } PresentViewIntent
38. struct PresentViewButton: View { var body: some View { Button(intent: ()) { Image(systemName: "plus.circle.fill") .resizable() } } } #Preview { PresentViewButton() .frame(width: 44, height: 44) .foregroundStyle(.blue) } PresentViewIntent 􀁍
39. import AppIntents struct : AppIntent { static var title: LocalizedStringResource = "Dismiss View” func perform() async throws -> some IntentResult { UserDefaults.standard.setValue(false, forKey: “view_is_presented") return .result() } } DismissViewIntent
40. struct DismissViewButton: View { var body: some View { Button(intent: ()) { Image(systemName: "xmark") .resizable() } } } #Preview { DismissViewButton() .frame(width: 44, height: 44) .foregroundStyle(.blue) } DismissViewIntent 􀆄
41. struct ParentView: View { var body: some View { VStack { Text("Parent") PresentViewButton() .frame(width: 44, height: 44) .foregroundStyle(.blue) } } } 􀁍 Parent
42. struct NextView: View { var body: some View { VStack { HStack { DismissViewButton() .frame(width: 44, height: 44) .padding() .foregroundStyle(.blue) Spacer() } Spacer() } .background(.white) } } 􀆄
43. struct ContentView: View { @AppStorage(“view_is_presented") var viewIsPresented = false var body: some View { ZStack { ParentView() if viewIsPresented { Color.black.opacity(0.7) VStack { Spacer().frame(height: 64) NextView() } } } } }
45. struct ContentView: View { @AppStorage(“view_is_presented") var viewIsPresented = false var body: some View { ZStack { ParentView() } } } } if viewIsPresented { Color.black.opacity(0.7) VStack { Spacer().frame(height: 64) NextView() } }
46. if viewIsPresented { Color.black.opacity(0.7) VStack { Spacer().frame(height: 64) NextView() } }
47. if viewIsPresented { Color.black.opacity(0.7) VStack { Spacer().frame(height: 64) NextView() } } .transition(.opacity)
48. if viewIsPresented { Color.black.opacity(0.7) VStack { Spacer().frame(height: 64) NextView() } } .transition(.opacity) .transition(.asymmetric(insertion: .push(from: .top), removal: .push(from: .top)))
49. if viewIsPresented { Color.black.opacity(0.7) VStack { Spacer().frame(height: 64) NextView() } } .transition(.opacity) .transition(.asymmetric(insertion: .push(from: .top), removal: .push(from: .top))) .clipShape(.rect(cornerRadius: 12, style: .circular))
51. struct DismissViewButton: View { var body: some View { Button(intent: DismissViewIntent()) { Image(systemName: "xmark") .resizable() } } } #Preview { DismissViewButton() .frame(width: 44, height: 44) .foregroundStyle(.blue) } 􀆄
52. struct DismissViewButton: View { var body: some View { Button(intent: DismissViewIntent()) { Image(systemName: "chevron.left") .resizable() } } } #Preview { DismissViewButton() .frame(width: 44, height: 44) .foregroundStyle(.blue) } 􀆉
53. struct ContentView: View { @AppStorage(“view_is_presented") var viewIsPresented = false var body: some View { if viewIsPresented { NextView() .transition(.asymmetric(insertion: .push(from: .leading), removal: .push(from: .leading))) } else { Color.yellow .overlay { ParentView() } } } }
55. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
56. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
57. import SwiftUI struct ContentView: View { @AppStorage(“input_text") var inputText = "" var body: some View { TextField("Task name”, text: $inputText, prompt: Text("Input task name here...")) } }
59. 🤔
61. struct KeyboardLetterKeyIntent: AppIntent { static var title: LocalizedStringResource = "Keyboard letter key" @Parameter(title: "Keyboard letter key”) var letter: String init() {} init(letter: String) { self.letter = letter } func perform() async throws -> some IntentResult { return .result() } }
62. struct KeyboardLetterKeyIntent: AppIntent { // ... func perform() async throws -> some IntentResult { return .result() } } let text = UserDefaults.standard.string(forKey: "input_text") ?? "" let latestText = text + letter UserDefaults.standard.set(latestText, forKey: "input_text")
63. struct InputFormView: View { @AppStorage("input_text") var inputText = "" var body: some View { RoundedRectangle(cornerRadius: 6) .stroke(lineWidth: 1) .frame(width: 296, height: 40) .overlay { HStack { Text(inputText) .padding() Spacer() } } } } ABCDEFGHIJK
64. struct AddItemIntent: AppIntent { static var title: LocalizedStringResource = "Add item intent" func perform() async throws -> some IntentResult { let name = UserDefaults.standard.string(forKey: "input_text") ?? "" TodoItemStore.shared.addItem(name) return .result() } }
65. struct UpdateItemIntent: AppIntent { static var title: LocalizedStringResource = "Update item intent" @Parameter(title: "Item ID”) var id: String init() {} init(id: String) { self.id = id } func perform() async throws -> some IntentResult { let name = UserDefaults.standard.string(forKey: "input_text") ?? "" TodoItemStore.shared.updateItem(id: id, toName: name) return .result() } }
66. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
67. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
68. struct : AppIntent { static var title: LocalizedStringResource = "Delete item intent" @Parameter(title: "Item ID”) var id: String init() {} init(id: String) { self.id = id } func perform() async throws -> some IntentResult { TodoItemStore.shared.deleteItem(id: id) return .result() } } DeleteItemIntent
69. struct TodoItemRow: View { let item: TodoItem var body: some View { HStack { Toggle(isOn: false, intent: (id: item.id)) { Image(systemName: "circle") .font(.largeTitle.weight(.light)) } Text(item.name) Spacer() } .padding() } } DeleteItemIntent
71. struct DeleteToggleStyle: ToggleStyle { func makeBody(configuration: Configuration) -> some View { Image(systemName: configuration.isOn ? "checkmark.circle.fill" : "circle") .font(.largeTitle.weight(.light)) .foregroundColor(configuration.isOn ? .blue : .gray) } }
72. struct TodoItemRow: View { let item: TodoItem var body: some View { HStack { Text(item.name) Spacer() } .padding() } } DeleteItemIntent Toggle(isOn: false, intent: DeleteItemIntent(id: item.id)) { Image(systemName: "circle") .font(.largeTitle.weight(.light)) }
73. struct TodoItemRow: View { let item: TodoItem var body: some View { HStack { Text(item.name) Spacer() } .padding() } } Toggle(“Delete Item”, isOn: false, intent: DeleteItemIntent(id: item.id)) .toggleStyle(DeleteToggleStyle())
75. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
76. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
77. enum WidgetError: String, Error { case emptyInputText var info: Info { switch self { case .emptyInputText: return .init(title: "Input Error”, message: "Empty tasks not allowed.”) } } struct Info { let title: LocalizedStringKey let message: LocalizedStringKey } }
78. struct AddItemIntent: AppIntent { static var title: LocalizedStringResource = "Add item intent" func perform() async throws -> some IntentResult { return .result() } } let name = UserDefaults.standard.string(forKey: "input_text") ?? "" TodoItemStore.shared.addItem(name)
79. struct AddItemIntent: AppIntent { static var title: LocalizedStringResource = "Add item intent" func perform() async throws -> some IntentResult { return .result() } } let name = UserDefaults.standard.string(forKey: "input_text") ?? "" TodoItemStore.shared.addItem(name) if name.isEmpty { UserDefaults.standard.setValue(WidgetError.inputTextEmpty.rawValue, forKey: "widget_error") } else { }
80. struct ContentView: View { @AppStorage("widget_error") var errorKey = "" var error: WidgetError? { return WidgetError(rawValue: errorKey) } var body: some View { ZStack { Button("Add Empty item", intent: AddItemIntent()) if let error { ErrorAlertView(error: error) .transition(.opacity) } } } }
82. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
83. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
84. UIControl.backToHomeScreen()
86. 🤔
87. How can I determine if the Widget is installed?
88. import WidgetKit extension WidgetCenter { func async throws -> [WidgetInfo] { try await withCheckedThrowingContinuation { continuation in self.getCurrentConfigurations { result in switch result { case .success(let info): continuation.resume(returning: info) case .failure(let error): continuation.resume(throwing: error) } } } } } getCurrentConfiguration()
89. struct SampleApp: App { @Environment(\.scenePhase) var scenePhase // ... .onChange(of: scenePhase) { _, newValue in Task { guard newValue == .active else { return } let info = try await WidgetCenter.shared. ) } } } getCurrentConfiguration() if !info.isEmpty { UIControl.backToHomeScreenOfDevice() }
90. • Transition for push and modal sheet • Create Item • Update Item • Delete Item • Show Error • Absolutely prevent the use of the main app
92. Question
93. Will Apple approve it? 􀣺 ?
94. YES
95. UltimateWidgetTodo https://apps.apple.com/us/app/ultimatewidgettodo/id6471950020
96. How was the journey into the widget revolution?
97. GitHub: UltimateWidgetTodo https://github.com/littleossa/UltimateWidgetTodo/
98. Open Source - You Can Do It
99. Have a good Widget life
100. Thanks