What are Universal links?

Universal links are Apple's way of launching apps on their operating system from a website, also known as a web view. They link to content inside an app or website, giving iOS users an integrated mobile experience. Broadly, there aren't many differences between universal links and traditional deep links.

For IOS

Steps

1. setup local HTTP server to host static file apple-app-site-association
2. setup HTTPS serice to redirect to HTTP server above
3. add https service domain name to App's associated domain
4. add test links into IOS simulator

The easy way to implement step 1&2

Just download express project(including ngrok) from ngrok.zip

• register a new account from ngrok
• start a new terminal tab under project root path
  • run npm i
  • run npm run dev
  • test: go to http://localhost:80 and see if you can see Hello world
  • 
• start a new terminmal tab under project root path
  • connect your ngrok account ngrok config add-authtoken {{your token}}(please see setup)
  • run ./ngrok http 80 and check what if the https link e.g. https://5f87-45-117-24-8.au.ngrok.io
  • 
  • test: go to https://5f87-45-117-24-8.au.ngrok.io and see if you can see Hello word
  • 
• after all step, goto Step 3

1. Setup local HTTP server

• create express web service(or you can choose any tech you want)
• test if you can access express api, e.g. http://localhost:80
• 
• put static file apple-app-site-association under the root static path
  • the apple-app-site-association looks like:

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "Q8VLLXZ9J7.au.com.ladbrokes.iosapp",
        "paths": [
          "/",
          "/account/*",
          "/signup",
          "/racing/*",
          "/horse-racing/*",
          "/harness-racing/*",
          "/greyhound-racing/*",
          "/racing/easy-form",
          "/racing/filter-form",
          "/next-to-go",
          "/sports/*",
          "/promotions",
          "/ladbrokes-card",
          "/forgot-password",
          "/multibuilder/*",
          "/group/*",
          "/mates-mode",
          "/share-bet/*",
          "/free-games",
          "/anyteam-vs-anyteam/*",
          "/blog/*"
        ]
      }
    ]
  }

• run express service and test if you can download the static file, e.g. (http://localhost:80/apple-app-site-association)

2. setup HTTPS serice to redirect to HTTP server above

• install ngrok (https://dashboard.ngrok.com/get-started/setup)
  • we use https://5f87-45-117-24-8.au.ngrok.io as local https url as example(chagne it as your local https url)
• config https to forward https link to local express service
  • (https://5f87-45-117-24-8.au.ngrok.io -> http://localhost:80)
• test if you can download static file apple-app-site-association via https (
  • e.g. https://5f87-45-117-24-8.au.ngrok.io/apple-app-site-association

3. add https service domain name to App's associated domain

• setup app applink configure as ngrok local https service (e.g. applinks:5f87-45-117-24-8.au.ngrok.io)

4. add test links into IOS simulator

• reinstall Ladbrokes/Neds to simulator
• on simulator, set up url link under a contacts (for clicking and activate universal link)
  • e.g. https://5f87-45-117-24-8.au.ngrok.io/blog/2022/06/02/daily-racing-tips-friday-3rd-june-2 should open ladbrokes app on simulator and open blog then navigate to corresponding page

Related MRs:

Can refer to MRs as example to setup local universal links:

• https://git.neds.sh/technology/code/ui/frontend/-/merge_requests/11174
• https://git.neds.sh/technology/code/ui/react-native/-/merge_requests/5994

For Android

to be continued...