Taking Advantage of iOS 10’s Today Widget

Taking Advantage of iOS 10’s Today Widget

CIZO is a great app. Created by fans for fans, it saves users the trouble of searching the internet for the latest video trailers by delivering a curated selection of the “best of what’s next” to your iOS-based device – in movies, gaming, fashion, concerts, technology, and more.

We like the content, design and animations it has. But CIZO has a content delivery problem. No existing mechanism, such as Push Notifications, has been implemented to alert users to the arrival of new videos. As a consequence, users could miss new trailers if they don’t check CIZO every day.

So we couldn’t help but wonder, is there another way to let users know about new content without opening the app?

iOS 10 provides the solution

The first thing one notices after installing iOS 10 is that Apple has removed the “Slide to Unlock” feature from the lock screen. Now, if you try to slide the screen in the way you’ve been accustomed to, you see a lock screen filled with Today widgets. This is quite convenient when you want to check the weather or the headlines or the transit information because you don’t have to unlock your phone to see this. Just a quick swipe is enough.

When we saw the iOS preview, the solution to our CIZO problem became clear: What if we added a CIZO Today widget that could show and launch video playback from the widget?

Implementing the CIZO Today widget

Now, let’s walk you through the process of creating and presenting a widget on the Today screen.

Adding the target

As the first step, we need to add a new target to the CIZO application itself.

To do this, open the CIZO project in Xcode and choose File > New > Target. And then select Today Extension.

Adding the target on iOS app

If we rebuild the CIZO app after adding the Today Extension target, we can see that it becomes listed as a widget that can be added to the screen:

Add widgets Distillery Santa Monica

If we added the CIZO widget to the lock screen at this point, here’s what it would look like:

Cizo widget Distillery Tech

That’s all pretty easy. All we need now is to present content.

Deciding what to show

The first idea was to reuse the Carousel View used by the containing app itself. That would enable users to scroll between featured videos in the same beautifully animated way. However, Apple notes that developers should avoid putting a scroll view inside a Today widget, because it’s difficult for users to scroll within the widget without inadvertently scrolling to the Today view.

Apple's recommendatioin iOS 10

So we decided to take Apple’s recommendation and decided to only show the last three featured videos in the widget.

Initial View Controller

In creating the Today extension for CIZO, Xcode created an initial view controller (which now conforms to NCWidgetProviding). If we open the MainInterface.storybord within the target, we can see a view with the “Hello World” label in it. We replaced this view with a Horizontal Stack View containing three image views:

Initial View Controller iOS 10 Widget

Code

- (void)openURL:(NSURL *)URL completionHandler:(void (^)(BOOL success))completionHandler;

In the implementation of this method we call the featured video API. If the response is different than when it was previously called, the widget pulls information about the first three new videos and puts thumbnail images into the image views.  The resulting presentation looks like this:
Cizo Widget Distillery Santa Monica

It’s a good look, but to make it look more like the CIZO app itself and let the users know that they’re seeing featured videos, we decided to incorporate the same labels as in the app itself.

The result:
iOS 10 Today View

Adding Details

This is moving in a good direction, but we want details such as a title and description. Unfortunately, there is no room for those details. If we put a label underneath the image, we would overload it with information, as we already put a “Featured” label on top of it.

We thought a better approach would be to reveal additional information in response to a tap on the image. So we went into Storyboard and added a Tap Gesture Recognizer for each image and a Present Detail View Controller as the action associated with the recognizer:

Detail View Controller iPhone Development
Now, when we tap on image, this is what we see:

Enabling Playback

The Detail View Controller includes a “Play” icon on top of the video thumbnail. We can connect this icon to the video link that the video API returns, enabling the user to open this URL by tapping on the image. The coding for this is straightforward:

-(void)openURL:(NSURL *)URL completionHandler:(void (^)(BOOL success))completionHandler;

This part is interesting, because normally a message like this would be sent to the sharedApplication object. However, extensions do not have access to the sharedApplication object and cannot use the openURL method to open the link. We can get around this restriction by sending the openURL:completionHandler: message to the NSExtensionContext instance, which is accessible as the extensionContext property of UIViewController.  

By taking this approach, tapping on the Play icon causes the CIZO web app to launch in Safari and play the trailer:

iOS 10 Development Los Angeles

Managing URL Schemes

This raises an interesting question for developers, though. What if CIZO was a stand-alone app without a web app component? We could still use the Today widget, but we’d want to open video playback in the CIZO app itself. To do this, all we’d need to do is implement a custom URL scheme.

Here are two ways to create a custom URL scheme:

Automatically select the containing app’s target from the Projects and Targets list, then go to the “Info” page and expand the “URL Types” settings group. Here, you would enter “cizo” in the URL schemes field and select “editor” as the role:
Mobile App Developers Los Angeles

Manually, you could also add a URL scheme by modifying the application’s Info.plist. To add a URL scheme for “cizo” you’d add the following key and array:

The mobile application's Info.plist

In the containing app delegate, implement:

(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options;

That way, when it’s called you will be able to parse url to get the appropriate video id to play this video.

Also, when you call – [self.extensionContext openURL:videoUrl completionHandler:…] from the extension, make sure that you use the “cizo” scheme instead of “https” when calling the videoUrl.

You can read more on inter-app communication here: Inter-App Communication

And here is how it looks now:

Finally, keep the following warning from Apple’s API Reference Guide in mind when contemplating creating a new url scheme:
API Reference Guide for mobile developers
Summary

Apple made it possible to implement extensions in very simple way. And it seems like extensions will be part of our development life for a long time. In this case we recommend to think about extensions at the beginning of your app development. When you architect a new app, think about using embedded frameworks (Building Modern Frameworks). It might help when you start implementing extensions and will have to deal with sharing the code.

What’s Next?

Whether it’s the latest trailer for the next superhero blockbuster, the next VR gaming console, the next big sneaker release, or the summer’s hottest music festivals, CIZO gathers them all into one place so you’ll always know what to buy, what to watch, and where to go. So what’s next on the CIZO roadmap?

Support Universal Links

Currently, when a user taps on a video thumbnail in the CIZO widget, the CIZO web app opens in Safari to play the video. We plan to implement universal links in the future, so that a tap on the thumbnail will cause the video to open the CIZO app instead. One might argue that a custom URL scheme is already enough to push the video to the CIZO app, and in this use case we would agree. If you have the Today widget on your device, the CIZO app is already installed. But universal links offer additional benefits. They rely on standard HTTP or HTTPS links to your website and, unlike custom URL schemes, a universal link can’t be claimed by another app.

For More Info