How to prevent the browser from downloading your apple-app-site-association file

Overview

Setting up apple-app-site-association is a critical step in creating a 2-way association between your iOS app and website in order to setup univeral links for your iOS apps. However, a recurring problem with most websites or static hosting platforms is that, because the apple-app-site-association is simply a file without an extension, even though its content is valid JSON, most browsers don’t know how to handle this and simply stream the file back to the browser for a download.

The Fix

The solution I reached out for to resolve this in my case was to use Cloudflare to modify the response header for the apple-app-site-association file. This was easy because I already managed my DNS with Cloudflare, so all I needed to do was simply proxy the website through Cloudflare and set up a rule to update the header of the path to content-type: application/json.

Setting Up Page Rules

1. Click on the Rules Section and Click on Overview

2. Click on Create Rule

3. Click on Response Header Transform Rule

4. Give the rule a name, select Custom filter expression and provide the full URI of the apple-app-site-association

5. Click on Set static and set the value of the content-type to application/json , save it and visit the URL, and the route should now render as JSON