Alright, hello and welcome to the DevJobs TechTalk about App Clips in iOS! My name is Philipp Jahoda and I’m the CTO and founder at Ahoi Kapptn!, we are a digital service provider and agency focusing on mobile development and web development, mostly. My background is actually also in mobile computing, I studied it at the FH Hagenberg, where I currently also am active as a part time lecturer. In my day-to-day business I’m mostly focusing on managing our devteam, as well as being involved in our mobile and back end development. Occasionally I also try to contribute to the open source community on GitHub, where I have various projects that I tend to from time to time.
Alright, let’s go over the agenda of today real quick. First off, we will be focusing on actually getting to know what App Clips are and what the main usecases of App Clips in iOS are. Then we’ll go over the most important features iOS-SDK-wise, so which kind of features in the iOS-SDK are most popular to use for iOS App Clips. Then we’ll go over to the actual implementation, where we will have a step by step approach on implementing our first App Clip. And then last but not least I’ll have a couple of closing words, wrapping it all up basically.
Alright, let’s start off with: What are App Clips? The easiest way to explain App Clips is that they are a very lightweight version of your iOS app. The main benefit is that you don’t have to go through the traditional approach of going to the app store, downloading an app and installing it in order to use its features. App Clips take away all that and basically allow users to scan what is called an App Clip code. You can see it here in the picture down below. Users scan that code and that invokes what is called a launch-URL, that then brings up your iOS App Clip, without users actually having to install it. Down here you can also see a couple of different demo App Clips that I have used just for showcase. In our implementation – which we are going to after – we are going to actually build an App Clip for a coffee shop, which will allow users to go to a coffee shop, scan the App Clip code, pay for the coffee and then just take it away at the counter.
Alright, what are the most important features in terms of the iOS-SDK that we can use in App Clips? First off, there is payments. So it’s possible to accept payments via Apple Pay in App Clips. Additionally, there is the option to sign in with Apple, when working with App Clips. So it’s a convenient way of allowing users to create an account or register, without them actually having to fill out forms. Then it’s possible to send notifications to users – given that they have accepted or provided permission to send them notifications. There’s one minor restriction in App Clips: it’s only possible to send notifications for eight hours after users have given permission in App Clips. Last but not least, what we also would like to use is location services, so it’s possible to get access to the user’s location in App Clips and that’s actually a very neat feature, because it allows you to provide geofencing, which means that – let’s go back to the example of the coffee shop – you can actually restrict an App Clip only to show up if a user is in a particular location, for example your coffee shop. Which means that if you were to scan an invocation URL that is not in close proximity to your shop, then the App Clip won’t open. That’s basically just an additional security feature for preventing malicious use.
Now to the implementation. As mentioned, we are going to build a coffee pass or coffee shop App Clip. First off, we are going to start off by creating an XCode app project, in case we don’t have one yet. Then as a first step we’ll add a new target to that XCode project using the App Clips template. What then happens in the background is that XCode will automatically generate all the required files and then we end up with what we can see here in the screenshot: a new target for App Clips, which also allows you to then choose a display name for the App Clip and you can also choose a bundle identifier. Next up, we have to set up an associated domain for our App Clip and that associated domain is going to be in the invocation URL, which means that whenever an App Clip code is scanned with the camera of an iPhone, then that invocation URL is going to launched. It contains your associated domain and that will then lead to the launch of your App Clip. In order to actually make that all possible, we’ll need an entitlements file in our XCode project and that entitlements file then needs an additional item, which is called the associated domain. In our use case, I have basically used our domain ahoikapptn.com and then I’ve just added a subdomain for the App Clip. Now we are basically ready to launch our App Clip. But first off, before we can actually launch it, we’ll also have to set up a UI for our App Clip. That is usually done using the traditional way using storyboards. What you can see here in the screenshots is on the lefthand side we have something that is called an App Clip Card – that is something that can only be modified in certain ways and will show up whenever we scan an App Clip code or NFC tag or QR code, containing our invocation URL – on the righthand side we have what is called a local experience – that can be used in order to configure App Clips for local testing. As it says here on the slides, for production use we’ll have to go to App Store Connect to actually set up our App Clips. But if you want to actually define and test our App Clips locally, we can do so by going to the developer settings and creating a new local experience. This is pretty much what is shown in the screenshot here on the righthand side – we define a URL prefix, a bundle identifier and then some additional parameters. That is what is going to be launched when an App Clip code is scanned.
Next up, this is now the traditional UI that we also define in the storyboard. Here I have just created a simple screen, where the user has the choice between two options. One, he signs in with Apple to get a free coffee, or he uses Apple Pay to actually pay for the coffee. This is the UI that will show up once an App Clip invocation URL is scanned and then the user clicks on the Open button. Then your actual App Clip UI is going to show up and basically you can do almost anything – with some restrictions – that you would be able to do in a normal iOS app. You can also have multiple screens, have navigation and stuff like that – in our case we kept it very simple for the showcase, just a sign-in with Apple or payment and then you’ll get your imaginary coffee.
Last but not least, probably you’ll also want to launch your App Clip project directly from XCode, even with certain parameters. You can do so by modifying your schemas in XCode and add an additional environment variable. In our example case, I’ve added the invocation URL as an environment variable and I’ve also provided an additional location parameter – in our case Ahoi Kapptn! which is just the name of our office. What we can then do inside the App Clip is to map that location name to an actual geolocation and then apply the geofencing in order to have some kind of security gateway to not allow users to launch the App Clip if not actually in close proximity to whatever location is here. This just showcases how we can test that directly from XCode.
Well, this was it concerning App Clips. Just a couple of closing words from my end. I think App Clips in iOS is a rather new approach that is pretty much still advancing in certain ways. However, if used correctly and if used for the right use cases, I truly believe that it can drastically improve user experience and also convince users of downloading your actual app – the traditional way, like you’d do it normally from the store, without actually having to do so in the first place, just to for example use a minimum set of features that they currently need.
Alright, that’s it from my end. If you’d like to contact me, please do so using the provided email or visiting our website. It’s not on the slide, but if you’re interested check out my GitHub page, my username is PhilJay. There you can see all the open source projects that I’m currently working on. Thank you!