search

matrix-org / matrix.to

A simple stateless privacy-protecting URL redirecting service for Matrix
http://matrix.to
Apache License 2.0
932 stars 199 forks source link

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

Open ara4n opened 2 years ago

ara4n commented 2 years ago

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
image image

Come back, blue button!

Smartphone (please complete the following information):

AbhishekJamhoriya commented 2 years ago

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

Spectre-ak commented 2 years ago

is this issue still open?

MadLittleMods commented 2 years ago

@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 https://github.com/matrix-org/matrix.to/issues/262#issuecomment-1092377481)

MadLittleMods commented 2 years ago

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 commented 2 years ago

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:

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:

❌ 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 commented 2 years ago

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 https://github.com/vector-im/element-web/issues/7378

MadLittleMods commented 2 years ago

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 https://github.com/vector-im/element-web/issues/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.