Why Apple AppClip Card does not launch?

Question

We have an Apple app with associated App Clip. And from our website we would like our users to see the App Clip when they visit a particular url, say, https://www.example.com/abc/xyz/appclip_page. Users initially visit another page, i.e. https://www.example.com/abc/xyz/initial_page. There is a button on the page, when clicked should redirect users to appclip_page. At that point, we want users to see App Clip card launched and complete the associated task without installing full App. But, we do not see the App Clip launching when users visit the url by clicking the button.

1. Created App with app clip configured on apple store connect.
2. Created apple-app-site-association file on the website which is accessible at https://www.example.com/.well-known/apple-app-site-association
3. Added www.example.com to associated domains and it shows as verified in apple store connect.
4. Created the website with pages and added meta tag similar to below in the invocation url page:

Tried using different configurations of apple-app-site-association file, also tried setting up advanced app clip experience for the app. However none of the configuration works and app clip does not launch.

Please find below the association file we use:

{
  "appclips": {
      "apps": [ "TEAMID.com.example.app.Clip" ]
  },
  "applinks": {
      "apps":[],
      "details": [
          {
              "appIDs": [
                  "TEAMID.com.example.app.Clip",
                  "TEAMID.com.example.app"
              ],
              "components": [
                  {
                      "/": "/xyz/company/app/*",
                      "comment": "Launches the app clip for a company on Safari"
                  },
                  {
                      "/": "/xyz/*/app/*",
                      "comment": "Launches the app clip on Safari - regex"
                  }
              ]
          }
      ]
   }
}

Answer 1

The issue is resolved for us by rendering the page corresponding to appclip (https://www.example.com/abc/xyz/appclip_page) on server-side instead of rendering on the client-side.

i.e. A HTML meta tag for the page is required for appclip as described here: https://developer.apple.com/documentation/app_clips/supporting_invocations_from_your_website_and_the_messages_app.
It was initially rendered on client side and caused inconsistent behavior potentially due to slow rendering of page on client side.
Once meta tag rendering is moved to server side, the appclip is being successfully launched as expected.