feat: Swipe back to `defaultHref` page

aeharding commented 1 year ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Configurable option to swipe back to defaultHref page.

Describe the Use Case

Say you have a feed-based app with the following routes:

/feeds - List of feeds
/feeds/:name - Feed by name
/ - Redirects to /feeds/home

Upon app load, the app redirects / to /feeds/home so the user can immediately start browsing their home feed.

However, the user may want to view a list of their feeds. So, there’s an <IonBackButton> with defaultHref="/feeds" and text="Feeds".

This works fine! However, the user has to manually press the back button to go back. They cannot swipe back to the feeds page since the feeds page isn’t mounted in the DOM.

One thing I keep hearing from users it it would be cool if they could use a swipe back gesture instead of needing to manually press the back button. Because the user can swipe back everywhere else in the app, it’s a little bit jarring when they cannot for this one page.

Describe Preferred Solution

I’ve been thinking of ways this could be cleanly implemented on Ionic’s side with a nice clean API, and one idea I had is: What if <IonBackButton> had a premountDefaultHrefIfNeeded attribute?

Essentially, when a page is loaded, if there is no page to swipe back to (e.g. defaultHref will be utilized when back is clicked) then the defaultHref page is premounted so that the user can swipe back to it.

Describe Alternatives

I’ve been trying many different ways to do this without a library-side change, including loading /feeds and then immediately redirecting to /feeds/home on load (works OKish, but many edge cases to deal with on a tabbed route setup and shows the page change animation on app start), and even tried using a <Nav> virtual page for the feed list (couldn’t get it to work right).

Related Code

No response

Additional Information

Page could be premounted on IonViewDidEnter with the contents of defaultHref at that moment. This would ensure no animation performance issues.
If defaultHref is computed and defaultHref changes after IonViewDidEnter, it is ignored (since there is now a page in the history, defaultHref is no longer used)
In terms of HTML5 navigation, I think it should just replace the current route just like pressing the back button does.

liamdebeasi commented 1 year ago

Thanks for the report. The purpose of swipe to go back is to go back to a view the user was previously on. I think it would be confusing for a user to be able to swipe back to a view they were never on in the first place.

Instead, I'd recommend pushing the /feeds route and then the /feeds/home route so you get both pages on the stack. The benefit of this is it results in the desired behavior, and users are aware that they were on /feeds before being directed to /feeds/home.

This is the pattern that native iOS follows:

https://github.com/ionic-team/ionic-framework/assets/2721089/2d2df238-d250-47d3-a729-8b168e818deb

In the example above, rather than jumping directly to the "Location" view, iOS pushes the "Privacy & Security" view first so users can swipe to go back.

aeharding commented 1 year ago

Yeah, that makes sense seeing the Settings example! This was something Apollo does but doesn't mean its necessarily the right behavior.

Just checking - there's no way to push a route with no animation while allowing the swipe back animation to work, right?

liamdebeasi commented 1 year ago

You should be able to push without an animation: https://ionicframework.com/docs/react/navigation#useionrouter

I believe if routerDirection is none then no animation will be played.

aeharding commented 1 year ago

https://github.com/ionic-team/ionic-framework/assets/2166114/a891d1fa-f569-4649-935e-2b07b2e30d47

@liamdebeasi I just found a use case where Apple App Store app allows swipe back to a page you were never on. Please see screenshot. :)

I'm reopening, hopefully that is OK!

aeharding commented 9 months ago

In case anyone else is reading looking for a workaround, I found that if you push a route with a custom animation that has no forward animation but has the standard back animation, you can instantly push the route but still allow swipes back! It works really well.

That being said, it would be awesome if Ionic handled this out of the box.

https://github.com/aeharding/voyager/blob/6944eb1deb8d171cdd8caea050e9ddbd7476da34/src/features/community/list/CommunitiesListRedirectBootstrapper.tsx#L59

ionic-team / ionic-framework