Introduction to Messages Framework and Sticker Pack Application

Hello guys,

As you all know that apple has introduced brand new framework for creating iMessage applications for Messages app. Today I will try to make you understand how these apps work and how we can create a very simple Sticker Pack Application.

Apple has introduced iMessage Apps that are run in context with Messages application. These apps provide content to Messages application in form of stickers, interactive messages or other message data types like image,text and video etc. You can do all this with the help of new framework introduced by apple in iOS 10 which is called Messages framework. So let’s discuss about it first.

Messages Framework

Messages framework acts as an interface between our iMessage app and the Messages application. When user taps on our app icon to launch our app in Messages app drawer, it is through this framework that iOS discovers our app, launch it, and provide our application with data and other context which it needs to lay out its UI.

With the Messages framework, you can build simple sticker packs or custom iMessage app as standalone apps or as extensions that let users interact with your iOS app without leaving Messages and these apps will be displayed on brand new iMessage AppStore. Consider the capabilities of each option as discussed below when you plan your app.

Standalone Apps

Sticker Pack App

This is a basic sticker pack of images or animated images. You don’t need to use code to build it, and you can choose to list it in the Stickers category or another relevant category on the App Store for iMessage.

iMessage App

Your app can include sticker packs, text, video, and audio. You can also use code to add functionality such as Apple pay and in-app purchase. Choose to list your app in the Stickers category or another relevant category on the App Store for Messages.

Extensions

iOS App + iMessage Extensions

iMessage extensions can include the same features as iMessage apps, and allow users to access features of your iOS app without leaving Messages. Your iMessage app will be listed on the App Store for iMessage in the same category and with the same description as your iOS app on the App Store.

iOS App + Sticker Pack Extensions

You can bundle a sticker pack with your iOS app. The sticker pack is listed and downloaded along with your iOS app on the App Store, and is not listed on the App Store for iMessage.

iMessage App is a Different kind of Extension

iMessage application is an extension by itself with one difference from other type of extensions, iMessage app extension can be created without host application which is not possible in other type of extensions, in this case Messages app will act as a host application to our iMessage app and our app will not be shown on phone’s home screen, instead it will be shown in an “App Drawer” within Messages app and will only be available through Messages App Store. But If you do have containing or host application then it will be shown on both home screen and messages app drawer and you will be able to download it via main App Store and Messages App Store.

Once your app is on Messages App Store then user can access your app via Messages app and they will be able to download it. Those apps which will be downloaded will be shown in App Drawer insides Messages Application.

You can also get your iMessage App installed via a feature called Inline App Attribution. This feature allows messages generated via your iMessage app to show an inline app link which leads to your app on Messages App Store when user clicks on it and then user can install that app from there.

 

 

Supported File Formats

Messages framework allows both static or animated stickers.

Static Stickers Formats

Messages framework allows static stickers of type PNG and JPEG, but PNG is recommended because it handles transparency better when rendered on different screen sizes.

Animated Stickers Formats

Messages framework allows animated stickers of type APNG and GIF, but APNG is recommended because it handles transparency better when rendered on different screen sizes.

The maximum file size for each sticker can be of 500kB

Sticker Sizes

Stickers can be provided in one of the three standard sizes as depicted the following table.

You should strictly adhere to these sizes for each type to get the best possible result on screen. One more thing to note is that there is no need to provide these stickers for any other resolution, Messages framework will automatically scale down our 3x asset according to each devices’ resolution.

Supported Platforms

iMessage apps will only run on iOS 10. However, the content that your application generates will be sent to, and can be viewed on watchOS and macOS devices. In watchOS 3.0, within the Messages application you can also send these stickers to others via newly launched Recent Page.

I guess This is enough to get brief introduction to Messages framework and iMessage app extensions. Now we can start creating our very first iMessage application which will be a standalone sticker type application.

Sticker Pack Application

So lets start by first creating a Xcode project for sticker pack iMessage application, for this open Xcode and go to File->New->Project. You can see two brand new application types are introduced in Xcode 8. Select “Sticker Pack Application” type and then click ‘Next’. Enter “Food” as product name as we will be having stickers of different food items and click “Next”. Select the folder you want to create this project in, and then click “Create” button.

Now after creating your project, lets see in detail what it really holds. As we can see that we don’t have any source code file here because Sticker Pack Application does not require any source code.

• We can see a new type of file named “Stickers.xcstickers”. When you click on this file you can see that it has two catalogues in it, one is for iMessage app Icon and the other is for holding all the stickers that our app will provide the user when accessed inside Messages application.
• Although our Food app is standalone sticker pack application and does not have any containing application, still we need to provide app icon for this application because this app icon will be used to show information about it app in Settings app.
• There is a folder called “Sticker Pack” which will hold all the stickers in our application.
• Since we haven’t provided any stickers or animated stickers therefore its asking us to drag drop some stickers that will be used in Messages application.

Now lets add some assets or stickers in our app. As the Application name suggests, I have got a few stickers of different food items which I found free on internet. Now just drag and drop those stickers in the “Sticker Pack” folder as shown below.

For this application, we have selected small sticker size of type PNG which means we need to provide 100 by 100 points sticker at 3x scale.

Thats it for Sticker Application. Now just run this application in simulator. You will see that Messages application will be launched and our application will open inside it which contains all the stickers we added.

You can see some new icons in there, lets discuss them one by one.

• This icon shows currently launched iMessage application, when you run your iMessage app from Xcode, this icon will be selected by default and will launch our app inside Messages app.
• This icon is the App Drawer which shows all the application that are installed inside Messages app. You can click on this icon to launch app drawer and run any application listed there by clicking on it.
• This icon is used to switch between different iMessage application, you can simply swap on iMessage app to switch between different apps.
• An iMessage app can be shown in two modes, compact and expanded. The current mode in which our app is launched, is called compact mode. You can click on this chevron icon to switch to form compact mode to expanded mode of our application. We will discuss this in detail in second part of this blog.

Now lets use our sticker app with Messages app, lets send a message to someone about eating Pizza.
Since this app is launched in simulator therefore apple has provided us chat bots so that we can test our app by sending messages to them. We cannot send messages to real devices from simulator, this is only for testing our iMessage application.
After sending message, you can drag and drop any sticker on it to send that sticker along with that message as well as shown below.

That’s it, we have created our very first iMessage application without writing a single line of code. This is a good starter to learn about a whole new world of iMessage applications.

One thing we haven’t done yet, we have not provided iMessage app icon as we discussed earlier, therefore our app is shown without an app icon in App drawer. If you are submitting your app to App Store you need to provide app icon for you iMessage application, by adding that we are good to go to submit our first iMessage app on Messages App Store and that too without writing a single line of code. 🙂

That’s it for this blog, I will continue on Messages framework to discuss about customization that we can do in our Sticker Pack iMessage application, we will also look into some interactive iMessage applications in the later part of this blog, for that we will write some code as well using newly introduced Messages framework.