loading...
Cover image for How to Build a Cross-Platform iOS and macOS Chat App using Stream

How to Build a Cross-Platform iOS and macOS Chat App using Stream

cardoso profile image Matheus Cardoso Originally published at getstream.io ・4 min read

Apple's recent release of Mac Catalyst makes it possible for iOS and macOS apps to share mostly the same native codebase. While in the past, a desktop and mobile cross-platform codebase commonly meant a web app packaged in a portable format, now it can be achieved with native code just as quickly. That means less time and money spent on development and more consistent, performant experience for users.

Now it's incredibly simple to start building a native Mac app from your current iPad app. With Mac Catalyst, your apps share the same project and source code so you can efficiently convert your iPad app's desktop-class features, and add more just for Mac. Deliver your new Mac app to an engaged audience of over 100,000,000 active Mac users.

Stream Chat's Swift SDK is fully compatible with Mac Catalyst, which means the chat experience that you build for iOS can easily transfer to macOS. Let's take a look into what you can expect from this compatibility.

UI Components

The Stream Chat SDK comes with all the UI Components to get your app built in minutes. They translate seamlessly between iOS and macOS with minor changes in behavior for accommodating the user experience expected in each platform.

Image showing an iPhone and a macOS window with the same application running

By using UISplitViewController, you can fit the channels and the chat screen in the same window, taking advantage of the larger screen. This usage is included in the sample app found in the stream-chat-swift repository.

Context Menu

Long pressing a message on iOS blurs the background and shows a context menu with a set of actions that you can perform. On macOS, this translates to a control-click, which shows a typical macOS-looking context menu with the same set of options.

Image showing an iPhone and a macOS window with context menus showing on top of a message

Each platform has a different set of guidelines, and some elements may vary a lot in the way they're accessed and presented. For example, see Apple's Human Interface Guidelines page on context menus for iOS and the macOS version of it.

Uploading Attachments

Another Stream Chat functionality that translates from iOS to macOS is picking and uploading attachments. On both iOS and macOS, you can upload pictures from your gallery, though the UI differs quite a bit.

Uploading pictures dialog on iOS and macOS

The macOS version of taking a picture or recording a video will present a UI similar to that of Photo Booth, and the file browser will give you access to the whole collection of files in your Mac, instead of only the iCloud drive as is the case on iOS.

All of this is the same iOS code running, and macOS takes care of turning those elements into natural macOS elements.

Push Notifications

Push notifications will also carry over seamlessly with the same configuration you use for iOS.

Enable notification alert on macOS

Push notification received on macOS

Xcode gives you the option to use the same Bundle ID for the iOS and macOS apps. If your app already supports notifications, there's no additional setup that you need to do for the macOS version, and the way you register devices for push notifications with the Stream Chat SDK is also the same.

Low-Level Client

The basis of the Stream Chat SDK is the low-level client. It communicates with Stream Chat's API and provides the data to be displayed by the UI components. It's fully compatible between iOS and macOS, and you can use it directly if you need more control.

And more

In theory, with Catalyst, any code you write for iOS should translate to macOS in some way or another. If you find a place where it isn't working, you can quickly write custom code to fill that gap.

Mac Catalyst is a rapidly evolving framework, and the same is true for Stream Chat. The team is making sure the code remains fully compatible and that you can build excellent chat experiences on iOS and macOS.

Getting Started

To get started building your cross-platform iOS and macOS chat application, the best place to start is the Stream Chat iOS/Swift tutorial.

After you've started with your chat app, and all your code and other dependencies are compatible with Mac Catalyst, all you need to do is to select Mac as a device in Deployment Info in your primary target.

Mac being selected in Xcode

PS: If you want to support file uploading, make sure to add a BOOL entry for "com.apple.security.files.user-selected.read-only" with value YES to the .entitlements file, otherwise the app will crash when opening the file browser.

Thanks for reading and happy coding!

Posted on by:

cardoso profile

Matheus Cardoso

@cardoso

📱 Developer Advocate @getstream_io 🐙 Open Sourcer github.com/cardoso ☀️ Google Summer of Code '18'19 Mentor/Admin

Discussion

markdown guide