Widgets in iOS 14 With WidgetKit
A WWDC 2020 Swift session recap
Note: This article is a short text summary of the WWDC20 session.
WidgetKit is a new Swift framework introduced in WWDC20 that allows you to bring out the most important data from your app on your home screen!
Design
Widgets in iOS need to be designed keeping three things in mind: glanceability, relevance, and personalisation.
- Glanceability — Data should be presented in a meaningful way.
- Relevance — Based on usage patterns, iOS14 automatically shows relevant widgets. You do have some level of control in helping iOS understand how frequently users would want to see your widget, especially when multiple widgets are in the same smart stack.
- Personalisation — Shown data can be resized and personalised based on the user’s preferences (e.g. a weather widget could show the weather for the user’s geographical location or a calendar widget could show events based on the current date and time).
Performance
Widgets are placed on the home screen, so they need to load fast. Hence, rather than being mini-apps, widgets are just views that are provided by an app extension for a particular time beforehand. This is done with WidgetKit extensions (Swift background extensions) by returning a bunch of views in a timeline and sending them to the widget on the home screen, which will present the appropriate view based on the current time.
The timeline can be refreshed from the main app. A timeline is a combination of views and dates that denote at what time the particular view is to be shown. Typically, days worth of content needs to be returned from the extension, which is then serialized to disk and one of the views is shown based on the current time. However, for widgets where up-to-date information is to be returned, reloads are used. The system wakes up the extension and asks for a timeline for each widget placed on the device. ReloadPolicy can be defined by your app so that system knows when to ask for the next timeline. Configuration options include atEnd of the existing timeline, after(date: Date), and never.
Widget content can also be updated when a background notification is received or when a user makes changes to the app. In case of background notifications or user edits to your app, you can use the Swift-based WidgetKit API via WidgetCenter to reload the timeline, thus waking the extension. However Widgets are not meant to be updated every second, even if you set reload policy that way, iOS will limit updates based on user’s interaction with the widget.
Widgets are not mini-apps. They just show content from your app on the home screen. Widgets can come in three different sizes: small square, rectangle, and large square. It’s not necessary to design for all sizes, but the more, the better.
Widget configuration options are built using intents. Configuration UI is automatically generated using intents.
Widgets are built entirely with SwiftUI. Though SwiftUI is supported since iOS 13, widgets are supported since iOS 14.
Smart stacks shown on the home screen are just a stack of widgets. The widget that appears on top is decided by on-device intelligence but can be controlled with a Siri shortcuts donation and the WidgetKit API (to help the system decide which widget would be relevant).
Defining a Widget
- kind — A single extension to support multiple types of widgets by defining their configuration.
- configuration — Intent types
supportedFamilies— Widget size- placeholder — Default content
kind: StaticConfiguration, IntentConfiguration
supportedFamilies: systemSmall, systemMedium, systemLarge.
placeholder: Represents the content of the widget. It should not have any user data. This UI is retrieved only sparingly, especially when there is no data to display at all.
The entire widget can be associated with a URL link using the widgetURL API. While systemSmall can be associated with only one link, sublinks can be added to systemMedium and systemLarge using the new Link API in SwiftUI.
Final Thoughts
Think of widgets as a part of your app displayed on the home screen. With beautiful rounded edges, you can show glanceable data from your app with deep links to directly open that particular page when the user taps on the widget. Built with SwiftUI, widgets can support dark mode and are of dynamic type, ensuring accessibility to those preferring large fonts.
Ready to build your first widget? I wrote another piece on building your first widget with WidgetKit from scratch to a working prototype, click the link to check it out!
