Hello community,

I'm facing a difficulty in implementing the Smart App Banner in my Next.js application, specifically for browsers other than Safari. I would like to share my situation and seek valuable insights from the community on possible solutions or similar experiences.

Problem:
I've followed various tutorials and documentations on how to implement the Smart App Banner, and I managed to get it working perfectly in Safari. However, when testing in other browsers such as Chrome and Firefox, the banner is not displayed as expected. I've tried several approaches, including browser detection and setting specific meta tags, but I haven't succeeded yet.

Additional Context:

I'm using Next.js to develop my web application.
Implementing the Smart App Banner is crucial for promoting the installation of the corresponding mobile application.
My goal is to ensure a consistent experience for users regardless of the browser they are using.
Questions:

Has anyone succeeded in implementing the Smart App Banner for browsers other than Safari in a Next.js application?

Is there any specific approach I might be missing or an important consideration I should take into account?

Is there an alternative to the Smart App Banner that may work more consistently across different browsers?