SwiftUI and Firebase

Create a native Firebase In-App messaging experience on iOS with SwiftUI

As a go-to SDK for mobile app developers, Firebase is always striving to build great extensions to the Apple development environment. In this post, I’ll show you how we used SwiftUI to implement a new and exciting feature in the Firebase SDK that will make it easier for you to display custom in-app messages to your users.

What is Firebase In-App Messaging?

Firebase In-App Messaging helps you deeply engage your active app users by showing them targeted and contextual messages that nudge them to complete key in-app actions. As a default, our SDK takes care of the message UI logic for you, but we understand that developers may want to build custom messages that fit into the visual thematics of their app.

Customizing Messages

It’s possible do this with UIKit, but it’s a heavy-weight process involving Interface Builder files and/or coding tightly prescriptive layout for your subviews. We wanted developers to be able to take advantage of the lighter-weight SwiftUI development process.

Our end goal was clear: allowing developers to write a simple SwiftUI View that defines how an in-app message appears on screen. After some prototyping, we loved the idea of using a ViewModifier to handle the event of an in-app message being called for display. To make this possible, we created ViewModifiers that supply a block that returns a View based on in-app message metadata. This View ends up defining how your in-app message looks on your users’ devices.

For those of you who like to peek under the hood: check out our implementation here. Hopefully it will inspire you to creatively use ViewModifiers in your own code.

They are ridiculously powerful.

Now for the usage.

Implementing custom in-app messages using SwiftUI

In a SwiftUI app, you can now override the appearance of in-app messages with a ViewModifier on your app’s root View. We added four view modifiers (for each in-app style) to make it easy to get started.

.bannerInAppMessage{}
.cardInAppMessage{}
.modalInAppMessage{}
.imageOnlyInAppMessage{}

With each view modifier, you provide a block that turns in-app message metadata objects into a SwiftUI View, which is displayed — via the overlay(_:alignment:)modifier — on top of the root view at message display time. Let’s look at an example in a SwiftUI-only app I created:

The body of a SwiftUI App struct with a view modifier to display a modal in-app message

Here, in my App struct I’m defining a WindowGroup with a View called ContentView that serves as my app’s root view. Since I’m displaying a modal in-app message, I use the modalInAppMessage view modifier to provide a custom SwiftUI view that displays my message (more on the delegate later).

Note: ModalInAppMessageView is not included in the Swift extension SDK — instead, this is a custom view that you will provide in your app. If you prefer the default in-app message UI for your campaign, you can skip the view modifier and the SDK will handle the UI for you.

Let’s take a look at the body of ModalInAppMessageView.

The body of a SwiftUI View that defines a custom Firebase modal in-app message

It’s defined as a VStack with five elements:

• An Image seeded with optional image data from the message metadata
• A Text that displays the non-optional message title
• Another Text that displays the optional message body
• An action Button that, when clicked, calls back to the delegate for handling
• A dismiss Button that, when clicked, calls back to the delegate for dismissal

Here’s the code for the buttons — I made use of the @ViewBuilder property wrapper to encapsulate them and keep them local in my view:

Functions that supply buttons for a custom Firebase modal in-app message

Notice, the buttons call through to the InAppMessagingDisplayDelegate object to handle clicks and dismisses, which are also reported to my campaign metrics.

Here’s how the message looks on an iPhone 12 Pro.

A full-screen modal in-app message written in SwiftUI

In less than 80 lines of code — including comments — I have defined a custom in-app message in SwiftUI. It only handles one in-app message type, but I can chain view modifiers on my app’s root view to support different campaigns. Here’s an example:

There’s no limit to the interface customization you can achieve with these extensions. And thanks to SwiftUI, there’s much less overhead involved.

Where to go from here?

As we move into the future of Apple development, Firebase will continue to improve our interoperability with SwiftUI. If you have any ideas or suggestions, feel free to discuss them with the Firebase team in the suggestions section of the discussions forums on GitHub, or put forward a pitch for a new feature.