Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to serve apple-app-site-association file on /apple-app-site-association page in ReactJS

I'm having a lot of trouble with serving a apple-app-site-association file in ReactJS project.

I've searched a lot of GitHub issues pages (for ReactJS, Gatsby, and Angular), forums, and a lot of online communities, and it seems that I can't find a solution for this.


What I've tried is:

  • Adding the file into public/.well-known folder.
  • Adding a separate route via react-router on path "/apple-app-site-association" and returning an tag with file
  • Adding <link rel="apple-app-site-association" href="%PUBLIC_URL%/.well-known/apple-app-site-association"> into public/index.html

Testing through the "aasa-validator" returns:

Your file's 'content-type' header was not found or was not recognized.


Keep in mind that:

  • The apple-app-site-association JSON file must not have a .json file extension.
  • It has to be on "/apple-app-site-association" or "./well-known/apple-app-site-association" links on the website.
  • I can't use a redirect to another page/link.

Thanks in advance!

Ps. If it helps, I'm using a Heroku for deployment.

like image 499
PeeKey Avatar asked May 12 '20 16:05

PeeKey


People also ask

What is an AASA Apple-App-site-Association file?

The AASA (short for apple-app-site-association) is a file that lives on your website and associates your website domain with your native app. In other words, it's a safe way to prove domain ownership to iOS.

Is Apple-App-site-Association cached?

The apple-app-site-association file is cached once when the app is first installed. If this initial scrape fails, in almost all situations it will not be reattempted. The only exception to this is if the initial return is a 5xx error, in which case a limited number of retries may occur.

How do I update my apple application association?

I fixed this problem by deleting and reinstalling the app. This worked because Apple checks for the apple-app-site-association file when the app is installed, not when the link is clicked or when the app is opened. So, to update the apple-app-site-association file, delete and reinstall the app.


2 Answers

You can serve the file using React Router. Put this in your index.js or App.js:

const reload = () => window.location.reload();
<Route path="/apple-app-site-association" onEnter={reload} />

More details here: https://brainbank.cc/jamie/lessons/programming-react/serve-static-file-txt-html-via-react-router

like image 129
user1761177 Avatar answered Oct 18 '22 18:10

user1761177


For NextJs

As discussed here, it is possible to server apple-app-site-association from NextJs.

Next.js uses the extension to automatically detect the content-type of the file. Since the file is extensionless, it's served as binary content—this should be compatible with Apple's verification.

If Apple requires specific headers, you can overwrite this type:

// next.config.js
module.exports = {
  experimental: {
    headers() {
      return [
        {
          source: "/.well-known/apple-app-site-association",
          headers: [{ key: "content-type", value: "application/json" }]
        }
      ];
    }
  }
};
like image 3
Ponleu Avatar answered Oct 18 '22 17:10

Ponleu