Adding Apple Universal Links to Webflow

I’d like to add /.well-known/apple-app-site-association to my website, but I can’t, because Webflow doesn’t support it, and I went all-in on Webflow during a Lottie-fueled scrollspy bender a few years ago.

Here’s how to host your AASA file for universal links while using Webflow - by using a worldwide distributed highly javascript available cloud edge application to replace a 355 byte static plaintext file that is requested about once a week by Apple’s CDN.

Use Cloudflare

  1. Use Cloudflare for DNS
  2. Disable SSL in your Webflow site’s settings - Cloudflare will handle SSL for you now.
  3. Enable Cloudflare’s proxying for the apex A record and www CNAME pointing to your Webflow site

Create a route

Allowing Cloudflare to proxy your website means you can intercept and work on requests at specific paths. They call these “routes”.

  1. Click your domain
  2. Click “Workers Routes”
  3. Click “Add route”
  4. Enter your route - probably mycoolapp.com/.well-known/*.
  5. Leave Worker set to “None” and press “Save”

Create a worker

Still in the Workers Routes screen:

  1. Click “Manage Workers”
  2. Click “Create Application”
  3. Pick one of the templates - doesn’t matter, we’re going to empty it
  4. Give it a useful name (“well-known”)
  5. Click “Deploy”

Give your worker a script

  1. Copy and paste this worker script I made into the Cloudflare editor
  2. Edit the appleAppSiteAssociationJSON object - you need to replace the appIDs and add/replace the components
  3. Click “Save and deploy”

Assign the worker

  1. Tap the Cloudflare logo
  2. Tap your domain
  3. Tap “Workers Routes”
  4. Tap “Edit” next to the route you crated earlier
  5. In the “Worker” dropdown, select the “well-known” worker you just created

Testing the route

  1. Tap “well-known” in the Worker column
  2. Tap “Quick Edit”
  3. In the right half of the screen, enter the URL your apple-app-site-association file should live - it’s probably https://mycoolapp.com/.well-known/apple-app-site-association/
  4. If you get a 200 OK response, and you can see your AASA JSON content in the response payload, you’re probably good!
Ben Fox @fox