Setting Up Apple Universal Links

Are you ready for an exciting ride through the world of app development? Then buckle up, because today we're going to talk about my challenges setting up Flutter uni_links!

With my last two apps that I developed, I knew I also had to set up App Links and Universal Links for Android and Apple devices. Everything seemed to be going smoothly at first, until I hit a problem that almost brought me to a halt.

The Android setup was a breeze – just add the appropriate line to the manifest file, put the "assetlinks.json" file in the .well-known directory of the respective website, and you’re done. But setting up Apple Universal Links turned out to be more difficult than expected. I ran into a major issue when I tried to place a file called "apple-app-site-association" on my website. So that you don’t run into the same issues, I’d like to share my experiences with you.

In itself, setting up Universal Links isn’t very different from setting up App Links for Android. In XCode and in the Apple developer account, you have to assign the "Associated Domains" entitlement to the respective app and then place the aforementioned "apple-app-site-association" file in the .well-known directory of the website. The problem was that this file must not have a file extension, but should be displayed as a JSON file. Oh dear, I thought, how is that supposed to work? When I accessed the file via its URL, the browser simply downloaded it, but it should actually be displayed like this:

https://bread-spy.com/.well-known/apple-app-site-association

At that time, I was hosting my site with Hostinger, which uses Lightspeed servers. Since I’m not an experienced web developer, I researched online how to display the file in JSON format. I found out that with Apache web servers and Lightspeed servers, this is usually done via the so-called .htaccess file. There you can define MIME types or content types that tell the browser what kind of data the server is sending, for example, whether it’s JSON content. Unfortunately, none of the solutions I found online produced the desired results, so I reached out to several experts. I found out that it didn’t seem to work because only the .htaccess file in the root directory affects the website, but it can’t access the required .well-known directory (please correct me if this explanation isn’t entirely accurate).

I thought I’d have to give up, but then I had an idea. I could simply switch to another hosting provider with an Apache server! No sooner said than done – I switched to Opanhost.com and lo and behold, it worked! I was able to place another .htaccess file in the .well-known directory that forced the JSON file type for the apple-app-site-association file.

I’d like to mention at this point that Hostinger is still an excellent choice when it comes to web hosting. So if you just want to set up a WordPress site or something similar and don’t rely on Universal Links, feel free to check out Hostinger. The website loads very quickly there and the control panel is very clear and offers all the important functions.

https://www.hostinger.de/webhosting

However, if you want to integrate Universal Links into your app like I did, I recommend an Apache web server. Also, keep in mind that you should avoid WordPress in this case. I also had major problems implementing App Links and Universal Links there, because the .well-known directory is called as a WordPress page, but it doesn’t exist (there are certainly workarounds for this, but I’m not aware of them at the moment. If you have experience with this issue, feel free to contact me at info@cyberskamp.de so I can share it here.) Here are some examples of hosting services with Apache servers that I have used and am completely satisfied with:

• Opanhost

• Webgo Webhosting (Coupon code: cyberskamp)

• SiteGround

And that wasn’t all – I found that I had the same problem on a Windows server. But here the solution was a bit easier! In IIS (Internet Information Services Manager), I could simply add a MIME type "application/json" under "MIME Types" and the file was automatically recognized as JSON.

As with any challenge, there were moments of frustration and doubt. But I didn’t give up. I knew I would find a solution, and I did. In the end, not only did I successfully set up Apple Universal Links, but I also expanded my skills and knowledge in app development and server management.

Looking back on this experience, it reminds me of driving a car. Sometimes you encounter obstacles on the road, but you don’t give up. Instead, you find another way or a solution to overcome these obstacles and keep going. And just like driving, you can be proud in app development when you reach your goal.

After switching to Openhost, I was finally able to successfully set up Apple Universal Links. It was a relief to see everything working seamlessly. The experience showed me how important it is to choose the right hosting provider and to understand the requirements of the tools I work with.

In summary, the Flutter uni_links package is an incredibly useful tool that makes it easy to set up deep linking in your Flutter application. However, it’s important to understand the requirements for setting up Android App Links and Apple Universal Links. In particular, the need to create an "apple-app-site-association" file, which must be hosted on your website without a file extension, can be a challenge if your hosting provider doesn’t allow you to add custom MIME types or edit the required .htaccess files. If you also want to set up Universal Links, I recommend the following page to validate your "apple-app-site-association" file:

https://branch.io/resources/aasa-validator/

There you can simply enter the respective domain (e.g. cyberskamp.de) and the tool does the rest. If the file is not found or something else doesn’t work, the tool will show you exactly what the problem is.

Now off you go! I wish you lots of fun and success setting up your deep links and hope this article has helped you avoid my mistakes.