DIY: Sticker pack for Messages on iOS 10

Computer Rock
Nov 04, 2016

In iOS 10 you can create app extensions that interact with the Messages app and let users send text, stickers, media files and interactive messages, including interactive messages that update as each recipient responds to the message. You can also make your publicly accessible images available to the #images app in Messages.

You can create two types of app extensions:

  • A Sticker pack that provides a set of stickers users can add to their Messages content.

  • An iMessage app that lets you present a custom user interface within the Messages app, create a sticker browser, include text, stickers and media files within a conversation and create, send and update interactive messages.

sticker-pack-blog2

iMessage app can also help users search images that you host on your app’s related website while they’re in the Messages app.

You can create a Sticker pack without writing any code: Simply drag images into the Sticker Pack folder inside the Stickers asset catalog in Xcode.

To develop an iMessage app, you use the APIs in the Messages framework (Messages.framework).

The #images app in Messages displays popular images from public websites. Your publicly accessible images can be included in #images search results after Apple's web crawler, known as Applebot, has scanned your website. To make your public images available in #images, follow these steps:

  • Create an iMessage app.

  • Add the com.apple.developer.associated-domains key to your app’s entitlements. Include a list of the web domains that host the images you want to make searchable. For each domain, specify the spotlight-image-search service in an entry such as spotlight-image-search:yourdomain.com.

  • Add an apple-app-site-association file to your website. Add a dictionary for the spotlight-image-search service and include your app ID, which is the team ID or app ID prefix, followed by the bundle ID. You can specify up to 500 paths and patterns that should be included for indexing for #images.

  • Allow crawling by Applebot.

Good example of new iMessage app features is given in a sample app provided by Apple at Ice Cream Builder.

It gives you an option to use the current stickers, make your own and later use that new one you created like all others. It also provides a way to change the stickers background.

A simple composeMessage() function:

fileprivate func composeMessage(with iceCream: IceCream, caption: String, session: MSSession? = nil) -> MSMessage { var components = URLComponents() components.queryItems = iceCream.queryItems let layout = MSMessageTemplateLayout() layout.image = iceCream.renderSticker(opaque: true) layout.caption = caption let message = MSMessage(session: session ?? MSSession()) message.url = components.url! message.layout = layout return message }

And its call:

// Create a new message using the same session as any currently selected message. let message = composeMessage(with: iceCream, caption: messageCaption, session: conversation.selectedMessage?.session)

 

message-pack-blog3

Screenshots showing the Message app appearance.

 

It is also possible to add the iMessage extension to the existing project as any other extension if you don’t want to make a new app only for that purpose.

iMessage apps leverage the full framework to interact with the Messages app. Use iMessage apps to:

  • Present a custom user interface inside the Messages app. The MSMessagesAppViewController class acts as the principal view controller for Messages extensions.

  • Create a custom or dynamic sticker browser. Use the MSStickerBrowserViewController to present the standard sticker browser. This browser provides drag-and-drop functionality. The user can press and hold a sticker to peel it from the browser, then drag the sticker to any balloon in the transcript. The user can also tap stickers to add them to the Messages app’s input field.

  • Insert text, stickers, or media files into the Messages app’s input field. The MSConversation class represents a conversation in the Messages app. Use conversation objects to access information about the currently selected message or the conversation participants, or to send text, stickers, attachments, or message objects.

  • Create interactive messages that carry app-specific data. Use the MSMessage class to create interactive message objects. To create a message that can be updated by the conversation’s participants, instantiate a message with a session using the

    method. Otherwise, instantiate the message using the

    method.

  • Update interactive messages (for example, to create games or collaborative apps). Use the MSSession class to create and update messages.

 

World of new opportunities

The opportunities of integration with the Messages application are huge, as every brand and company can have wider reach by having its own stickers in the catalog and for those more ambitious developing a custom iMessage app that represents their brand better and providing new capabilities to more than billion of users in Apple's ecosystem.

Computer Rock