Add Smart App Banner to prompt users to download the native iOS app

[MadLittleMods]

Your use case

What would you like to do?

Add Smart App Banner to prompt users to download the native iOS app from the App Store.

Why would you like to do it?

Element Web on mobile is unusable and marked as experimental.

How would you like to achieve it?

See the Implement a Smart App Banner on Your Website section on https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners

Have you considered any alternatives?

No response

Additional context

Full context for improving the first time user experience for iOS users: matrix-org/matrix.to#263

[t3chguy]

I wonder if the smart banner can work dynamically, because we can't hardcode it into index.html as the iOS app being pointed to may be the wrong one depending on the deployment - and given Element is all static files, would need to be injected after reading config.json brand mobile_builds ios

[t3chguy]

https://stackoverflow.com/questions/31289530/load-ios-smart-app-banner-through-javascript claims it doesn't work if injected async, but is rather old so may no longer be the case

[niquewoodhouse]

Figma example of smart app banners. Think we should do this.

[t3chguy]

As per my comments above, the smart app banner for iOS may not be possible due to the async nature of our purely client-side SPA config mechanisms (config.json is read by the client, not injected by the server) - but does need more testing by someone with an iOS device.

[germain-gg]

@t3chguy I can see that we added code for a smart banner as part of #22224 in /mobile_guide
I believe we can not inject dynamic app id indeed.

Considering marking this issue as complete and folks who fork the app can change the app id.

[t3chguy]

@gsouquet that PR didn't add any such thing 😇

[t3chguy]

I think another issue is that some iOS browsers (cough iPadOS) lie and claim to be a desktop browser, so the app banner won't be shown as the user won't be taken to the mobile_guide

[germain-gg]

@t3chguy it definitely did, look at src/vector/mobile_guide/index.html the following meta tag was added

<meta name="apple-itunes-app" content="app-id=id1083446067">

I think another issue is that some iOS browsers (cough iPadOS) lie and claim to be a desktop browser, so the app banner won't be shown as the user won't be taken to the mobile_guide

Yes that is an issue, but that is not part of this and should be tackled as part of #14962 and #15035

[t3chguy]

the following meta tag was added

Yes, after being removed from a few lines lower, by the auto-formatter

[germain-gg]

Closing as this feature already exists on Element Web.