How to Create iOS Widget (Today Extension)

People have so many apps on their phone and this inevitably makes it very difficult for apps to be remembered on a daily basis. The today screen is something most iPhone users view every day, and if you have a place on this screen, your app won’t be forgotten by the user.

One of my favorite today widgets is Coinbase’s cryptocurrency price widget. If you are interested in cryptocurrencies, this widget makes it very easy to track prices.

Let’s talk about where to start if you want to build something like this for your app.

Add Today Extension Target Into Your Project

View your project and click on + to add a new target. Search for Today and select Today Extension to add to your project.

This is image title

This will create some files under afolder in your project. TodayViewController is where you will implement everything you need.

You can treat this view controller as a standard view controller. The only difference will be updating the views and the memory limit you get with this extension.

Here’s what Apple says about today widgets:

“A Today widget should:

Ensure that content always looks up to date.

Respond appropriately to user interactions.

Perform well (in particular, iOS widgets must use memory wisely or the system may terminate them).”

The memory limit for the widget is 16 MB, so keep it simple and make sure to test out your widget for memory leaks.

Share Data Between Your App and Extension

The only way to share data between your app and extension is by using _App Group_s and UserDefaults.

First, you will need to add App Group capability to your app target. Click on + Capability button and select App Groups. Click on _+_ and type a name for your group.

This is image title

Do the same thing for your today widget target.

Now, create a file called GroupDataManager.swift to implement the required functions to save, remove, and retrieve data.

import Foundation

class GroupDataManager {
    
    static let shared = GroupPersistenceManager()
    let sharedDefaults = UserDefaults(suiteName: "group.todaymedium")
  
    func saveData(value: Any, key: String) {
        sharedDefaults?.setValue(value, forKey: key)
    }
    
    func retrieveData(key: String) -> Any? {
        return sharedDefaults?.value(forKey: key)
    }
    
    func removeData(key: String) {
        sharedDefaults?.removeObject(forKey: key)
    }
}

GroupDataManager.swift

Make sure this file is available for both of your targets.

This is image title

GroupDataManager.swift — File Inspector

Now, go to the view controller in your app and save data to retrieve from your widget.

GroupDataManager.shared.saveData(value: “Hello Medium!”, key: “dataKey”)

In your TodayViewController.swift of your today widget, retrieve this data by using the retrieve function.

import UIKit
import NotificationCenter

class TodayViewController: UIViewController, NCWidgetProviding {
        
    @IBOutlet weak var label: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        self.label.text = GroupDataManager.shared.retrieveData(key: "dataKey") as? String
    }
        
    func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) {
        completionHandler(NCUpdateResult.newData)
    }
    
}

TodayViewController.swift

You can simply display this string in the label to see if everything is working as expected.

This is image title

Now, run your app and add the widget to your today screen to see how it looks.

#ios #Widget