Creating iMessage Apps with XCode 8
This is part of a series of tutorials introducing new features in iOS 10, the Swift programming language, and the new XCode 8 beta, which were just announced at WWDC 16
Among the most exciting announcements for Apple developers during the WWDC 16 keynote was the introduction of a number of new app extensions which you can bundle with an app to add features to other apps, and the new extension type that really caught my attention was the iMessage app, which allow you to add functionality to the built-in Messages app on iOS.
Unlike other extension types, which requires you to publish your extention along with a standalone app, Apple has introduced the App Store for iMessage. While you certainly can include your Message app extension as part of a standalone app, with this new branch of their famous store, for the first time, you don’t have to.
What Else Has Changed With Messaging?
Before I delve into the awesome new abilities that developers have at their disposal for expanding the functionality of the popular Messages app. I think I need to mention some of the dramatic changes that Apple has made to the base version. Through iMessage, you can now send animated sketches with a variety of effects to your friends, optionally overlaid onto images from your library or drawn onto videos as you’re recording them.
I can imagine some really productive uses for that, and it’s surprisingly precise to use, but of course the first thing the writers here tried with it indicates we may not have quite outgrown high school. It’s great fun.
Another new feature is the ability to annotate other people’s content or messages with a selection of “tapbacks” – little whimslicaly animated thought balloon icons with symbols like “thumbs up/down”, heart, “Haha”, “??”, “!!” and so on, which is actually a pretty concise, convenient way to to give instant feedback on another person’s input. There’s also a feature that allows you to automatically turn your words into their emoticon equivalents
Then there are new aesthetic features like “invisible ink”, which requires recipients to swipe your messages (or photos) to remove the spoiler tags, along with a music sharing feature, and integrated Bing image search for finding sick memes.
The ability to choose how violently your message animates onto the screen, and a selection of full screen effects like party balloons and confetti provide some goofy, fun options for adding emotion to plain old text. iMessage now also has some stickers to slap onto your messages.
Finally, there’s a new app drawer where third-party content and apps can reside.
I was ambivilant about the anouncement of these new features. The disappointing thing is that I’ve been kicking around the idea for a vaguely similar app for years. The encouraging news is that, thanks to Apple, I now have the tools I need to build the app I’ve been planning and reach a decent userbase without having to create an entirely new messaging platform, and that still leaves tons of room for other developers to bring their own ideas.
So What Can We As Developers Do With This?
The Simple Option
Let me mention a simple new option. You can offer your own purchasable sticker packs. It could be a branded bonus with your existing app, or a standalone package for sale. The sticker packss themselves don’t require any code to create, and the few simple guidelines for creating them can be found under “Sticker Packs” in the Messages Framework reference . You use a MSStickerBrowserViewController instance in conjunction with an object conforming to MSStickerBrowserViewDataSource to set up the app shelf from which your stickers will be selected.
Guidelines are repeated below for convenience. Each sticker image should meet this criteria:
- The image must be a PNG, APNG, GIF or JPEG file.
- The file must be less than 500KB.
- The image must be between 100×100 and 206×206 POINTS.
Always provide @3x images – 300×300 to 618×618 PIXELS. The system generates the @2x and @1x versions by downscaling the @3x images at runtime.*
In Xcode’s Attributes inspector, set the Sticker Size for the entire Sticker pack. The system lays out the stickers in the browser based on these sizes. To best match the browser, use sticker images of the specified size. The Sticker Size defaults to Medium.
- Small: 100x100pts.
- Medium: 136x136pts.
- Large: 206x206pts.
And The Rest
Developers now can create a completely unique user interface inside the Messages app with MSMessagesAppViewController . They can use that interface to drive all kinds of functionality, not limited to using MSConversation to change that text, stickers, and media in that conversation, MSMessage to transfer completely different types of data for use by another app entirely, and MSSession to manage interactive messages that stay visible throughout the conversation and update to reflect changing situations (which can be useful for using iMessage as a collaborative tool, or even a game platform).
These classes represent a number of really interesting possibilities for greatly extending the popular Messages app in unexpected ways, and I look forward to expanding on them with sample code in a future update.
Part 2 of this tutorial is coming soon. If you want me to email you about it when the next part is out, sign up for my newsletter to get the scoop .