The “continue” button should not disappear after you click it

[ara4n]

Describe the bug
If you follow a permalink, the continue to open in element button disappears after being clicked. This is very confusing if you want to click it again

To Reproduce
Steps to reproduce the behavior:

1. Go to a matrix.to event permalink
2. Click on open in Element; click continue

Expected behavior
The continue permalink opens in Element; but the continue button remains present on the matrix.to tab rather than vanishing.

This allows for people to try the link again after installing the native app.

Screenshots

First screen	Second screen

Come back, blue button!

Smartphone (please complete the following information):

• Device: iPhone 12
• OS: iOS 15
• Browser: Mobile Safari

[AbhishekJamhoriya]

Hi, @ara4n I would like to work on this issue, so can you please assign me this issue.

[Spectre-ak]

is this issue still open?

[MadLittleMods]

@ara4n It's unclear what your ideal layout and flow is here.

I'm assuming you want the "Continue in your browser" button to still be available. Instead of only having the option to download the app from the app store. Maybe this mock-up matches what you're thinking?

As a note, this flow is broken in a different way nowadays to go straight from "Continue" to https://app.element.io (see #262 (comment))

[MadLittleMods]

Synced out of band with @ara4n, here is the ideal/expected UI here:

1. We should never shuffle people over to mobile web
2. "Continue" takes you to install Element iOS, or deeplinks the app if you already have it installed
   • If app not installed, "Continue" brings you to app store to install (doesn't go to deeplinked content after install)
   • If app installed, "Continue" opens to deeplinked content in app

[MadLittleMods]

Potential solutions

Pre-packaged solutions

There are a few out of the box solutions from Firebase and branch.io but they require using their SDK's and we give up some privacy:

• https://firebase.google.com/docs/dynamic-links
• https://branch.io/how-branch-links-work/
  • https://branch.io/what-is-deep-linking/

It's also not clear to me how their first time user-experience is for people clicking a universal link. When you first install the app and click a universal link, what happens? Does it open mobile Safari with the smart app banner to "Open" in the app at the top like everyone else? That's the sucky part.

Universal links

Synced out of band with @ara4n, here is the ideal/expected UI here:

1. We should never shuffle people over to mobile web

2. "Continue" takes you to install Element iOS, or deeplinks the app if you already have it installed

   • If app not installed, "Continue" brings you to app store to install (doesn't go to deeplinked content after install)
   • If app installed, "Continue" opens to deeplinked content in app

To accomplish this, I was thinking that on matrix.to, the "Continue" button link would look like https://app.element.io/#/room%2F%23Wgpu%3Amatrix.org?redirect=appstore. Then:

• If the app is installed, the universal link will kick in and open the content in the app
• If the app is not installed, it will open in mobile Safari. When Element web sees ?redirect=appstore, we can redirect to the appstore

❌ But I discovered that universal links suck for what we want to do. Universal links are just normal https://app.element.io/ links except that you can register to handle them in your app. This sounds good but the first-time you try a matrix.to link after you have the Element app installed, it still opens mobile Safari first https://app.element.io/ and then has a banner at the top to ask you whether you want to open the link the Element app (see Step 3 in the images below). This means that we can't just blindly redirect to the iOS App Store when we see ?redirect=appstore because the user could also be on https://app.element.io/?redirect=appstore in order to press "Open" in the Safari app banner allow flow.

Step 1	Step 2	Step 3 (click "Open" in the Safari app banner)	Step 4 (finally the app is open)

Note: After you have allowed the "Open in Element app" by pressing "Open" the first time in the Safari banner, subsequent matrix.to links you visit, the "Continue" button starts opening directly in the app now.

If someone starts without the app installed, we could get the same banner experience by adding a "Smart App Banner", where it prompts the user to go view the Element iOS app on the app store, see https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners - we should probably do this in any case because people can stumble upon https://app.element.io/ some other way.

But all of this isn't very viable because we want to avoid going to Element web on mobile altogether. Someone can easily just dismiss the banners or ignore them and try to use mobile Element web which will be a bad time. Even when the user has the app installed, they can ignore the "Open" banner.

If I was an iOS user, I kinda like this behavior because I don't like when websites force me to install apps in order to view content. We should really look into optimizing the main views you would see in mobile Element web coming from matrix.to flows (space, room, message permalink).

Get what we want, custom URL scheme

I think we could get what we want if we used a custom URL scheme and registered to handle that in the Element iOS app.

The scheme could be matrix:// or our own custom element:// one.

When the app is not installed and the user tries to open the app via the custom URL scheme, it will simply throw a "Safari cannot open the page because the address is invalid" toast. We get a preview to see how this could look like because FluffyChat does this:

Initial error when the app is not installed	We get a app store badge to install the app

When the Element iOS app is installed, the custom URL scheme, simply opens the app seamlessly. Update: From a call with @stefanceriu, he mentioned that custom URL schemes ask every time which app they should be opened with which adds a different type of friction.

But as @ara4n originally points out in this issue, we should also keep the "Continue" button with the custom URL scheme link on screen so the user can retry the matrix.to link after they install the native app to get to the content they wanted to see in first place.

Block Element web access with the /mobile_guide

As suggested by @stefanceriu, we could block mobile web users with interstitial screen on the web side.

In Element web, we already have https://app.element.io/mobile_guide/ which we redirect to on mobile iOS and Safari when you visit https://app.element.io/ without any fragment parts so this is viable. We still want universal links to work so we would probably need to render the mobile guide for all links instead of redirecting. Although maybe the universal link could get picked up before we redirect.

Then we probably need to iterate the /mobile_guide so it's more obvious to press "Open" in the Safari app banner to start auto-accepting universal links in the native iOS app.

This flow still feels a little crunchy though for first time users but it might be the easiest.

[t3chguy]

So EW specifically doesn't forward you to the mobile_guide when you're hitting a permalink, iirc this is important for 3pid invites which require EW

https://github.com/vector-im/element-web/blob/384903361d5ff3c608fedecf2105100201c00ca8/src/vector/index.ts#L134

Related element-hq/element-web#7378

[MadLittleMods]

Thanks for the details @t3chguy. I think we can workaround to still allow "verifying a 3pid (but after we've loaded the config)" and load the mobile guide otherwise.

Based on element-hq/element-web#7378 saying redirects stopped the deep links from working, I think we're going to have to load the mobile guide at various URL's instead of redirecting there.