How to create simple iMessage App

Overview

In this demo, I have mentioned that how we can able to use Message Extansion in iOS 10.

Once you launch application, it will open message screen. Where you can able to check see list of web pages name of “Yudiz Solution Pvt Ltd”.

If you want to send any webpage url as message, you just need to tap on webpage name, application will send that selected webpage in message. If you tap on that message, it will load webpage inside message application.

Topics

1. Basic Understanding regarding ‘MSMessagesAppViewController’
   • MSMessagesAppViewController works as main view controller for Message extension.
   • You can use this class to perform any operation as you want in your message extension.
   • You can find more details regarding it in apple documentation [URL: https://developer.apple.com/reference/messages/msmessagesappviewcontroller]
2. Supported iOS: 10.0 and above
3. Supported Languages : Swift and Objective C
4. How to create Demo App

Step 1: Create new Project

Create New Xcode Project and select iMessageApplication.

Once you create your application then just run the application to check what you are getting by default.

Once you run the application, in simulator, message application is appearing by default and inside that below “Hello World” text is there and your iMessage application name is there.

Step 2: What you can see once you created Project

Here you can able to see total 4 folders in your new created Project.

1. iMessageDemo
2. MessagesExtension
3. Frameworks
4. Products

Here you just need to use files which are there under ‘MessagesExtension’ folder for further development.

Step 3: Which functionality we will Develop

• User will able to see our company name and its related webpage name in table view.
• User just need to tap on webpage name to send links as message.
• When user taps on that message, Link will be loaded in SFSafariViewController.

Step 4: UI Implementation

• Open storyboard file
• Remove “Hello World” label
• Put one TableView in storyboard.

Step 5: Add delegate and Datasource method of Tableview

• In MessagesExtension folder, select ‘MessageCategoryVC.swift’ file.
• Implement necessary UITableView Delegate and Datasource methods.

Step 6: Prepare data which you like to display in Tableview

• In this demo I am displaying webpage information of ‘Yudiz Solution Pvt Ltd’.
• You can check that in “DataHandler.swift” file.

Step 7: Apply data in Table View

In Step 6, I have created method to get data from my model class. Now its time to display those data in my table view.

So lets retrieve all data first and pass it to TableView.

Step 8: Conversation Handling Methods

There are many conversation handling methods are there provided by MSMessageAppViewController, I have listed all below.

override func willBecomeActive(with conversation: MSConversation)
		// Called when the extension is about to move from the inactive to active state.
        // This will happen when the extension is about to present UI.
        // Use this method to configure the extension and restore previously stored state.

override func didResignActive(with conversation: MSConversation)
        // Called when the extension is about to move from the active to inactive state.
        // This will happen when the user dissmises the extension, changes to a different
        // conversation or quits Messages.
        // Use this method to release shared resources, save user data, invalidate timers,
        // and store enough state information to restore your extension to its current state
        // in case it is terminated later.

override func didReceive(_ message: MSMessage, conversation: MSConversation)
        // Called when a message arrives that was generated by another instance of this
        // extension on a remote device.
        // Use this method to trigger UI updates in response to the message.

override func didStartSending(_ message: MSMessage, conversation: MSConversation)
        // Called when the user taps the send button.

override func didCancelSending(_ message: MSMessage, conversation: MSConversation) 
        // Called when the user deletes the message without sending it.
        // Use this to clean up state related to the deleted message.

override func willTransition(to presentationStyle: MSMessagesAppPresentationStyle)
        // Called before the extension transitions to a new presentation style.
        // Use this method to prepare for the change in presentation style.

override func didTransition(to presentationStyle: MSMessagesAppPresentationStyle)
        // Called after the extension transitions to a new presentation style.
        // Use this method to finalize any behaviors associated with the change in presentation style.

But for this demo we just need to use below two methods only.

override func willBecomeActive(with conversation: MSConversation)
override func willTransition(to presentationStyle: MSMessagesAppPresentationStyle)

In “willBecomeActive” method we will save all previous conversation.

In “willTransition” method we will open SFSafariView screen to load webpage from URL.

Step 9: Save Conversation

First create an global object of MSConversation.

Now use this object to save all previous conversation which you can able to get from “willBecomeActive” method.

Step 10: Send Webpage as Message

Now you have to apply some code in “didSelectRow” method of UITableView.

In this method an object of “MSMessage” and another object of “MSMessageTemplateLayout”

In “MSMessageTemplateLayout” object you have to pass details which you have to display in message screen.

So first we will pass CAPTION and SUBCAPTION in object of “MSMessageTemplateLayout”.

Now we will set url property of “MSMessage” object.

Now we will set layout property of “MSMessage” object.

Our message object is ready now to send as Message. Now we just in to append this “MSMessage” object in our object of “MSConversation” which we just saw in STEP 9.

Step 11: Lets run Application and Check

Once you run application you will able to see below screen

Now lets tap on any webpage name from the table view list.

Once you taps it will ask you permission to send this message. You have two option here. Either you can cancel the message or send message.

Now let’s check what happen if you tap on that sent message.

You will navigate to list view of all web pages of this application. Here we need to open webpage instead of this behaviour.

So lets check how we can able to do this in our next step.

Step 12: Open Webpage when user taps on Message

We have to use “willTransition” conversation handling method to implement this feature. Right now this method do not contains any logic.

override func willTransition(to presentationStyle: MSMessagesAppPresentationStyle) {
    // Called before the extension transitions to a new presentation style.
    // Use this method to prepare for the change in presentation style.
}

Lets implement logic now.

override func willTransition(to presentationStyle: MSMessagesAppPresentationStyle) {
        guard presentationStyle == .expanded else { return }
        if let message = activeConversation?.selectedMessage, let url = message.url {
            safariVC = SFSafariViewController(url: url)
            present(safariVC!, animated: true, completion: nil)
        }
        // Called before the extension transitions to a new presentation style.
        // Use this method to prepare for the change in presentation style.
}

Step 13: Run App again. This is a final step. I Promise…

• Lets run application again.
• Send any webpage first as message.
• Tap on that message to open webpage. Now you can able to see webpage is loaded into message application.