[issue] back button will back to wrong page (should in the explore tab not my capture tab)

[sync-by-unito]

Your email:
[email protected]

Is this a general issue/FR report or a ticket that involve your personal account?:
No personal information involved

Select product:
Capture App

One line to describe the issue you see or the feature you want to add:
[issue] back button will back to wrong page

Let us know what do you expect to see?:
When user in the prod page, and then press the back button, it should back to right page.

1. If user enter from creator page, it should back to creator page.
2. If user enter from explore page, it should back to explore page.

Please provide some simple steps to help us reproduce the issue or understand how do you want to see the feature.:

1. Open any prod page(asset page on explore tab)
2. Press profile tab icon( the bottom right icon)
3. Choose any asset, and then back to profile tab
4. Switch to explore tab (prod page), press the back button
   Will see the asset page instead of explore page.

What's the device or browser do you use?:
All device will happened this

User story
As a Capture App User,
I want to the back button in the upper left corner of my screen could lead the right page
so that I can return to the previous page.

———————————————
This task was submitted through Issue Report/Feature Request
https://form.asana.com/?k=OlNjzNIasZt0uOT5gzb7pw&d=1200886955782960

┆Issue is synchronized with this Asana task by Unito

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung i think this one needs some help with Sam

[sync-by-unito]

➤ Sam commented:

Kenny Hung, it's more like ionic task I will take this task.

[sync-by-unito]

➤ Sam commented:

I'm not sure if bubble iframe is affecting ionic route. Need more time for research.

When back button is pressed bubble navigates back and maybe also effecting window.history of ionic app 🤔

[sync-by-unito]

➤ Sam commented:

Kenny Hung, it also happens for settings page 😅

[sync-by-unito]

➤ Sam commented:

I conducted small testing:

• Created test.html with back button
• when back button is clicked I call window.history.back();
• I used test.html inside explore tab
• See attachment for demo

Summary:
Navigation inside iframe is effecting navigation of ionic app, therefore we have this issue. I assume Bubble's Go to previous page (Step 2) might use window.history.back().

Potential solution find a way to isolate iframe navigation from ionic navigation (WIP).

[sync-by-unito]

➤ Sam commented:

Relevant Stack overflow suggestion How to prevent IFRAME from redirecting top-level window ( https://stackoverflow.com/a/21347627/6133329 ).
Tried didn't worked. Will try other options.

[sync-by-unito]

➤ Sam commented:

I tried to understand better and try all screens (probably we can rename it [issue] iframe + ionic navigation)

This issue happens when user

1. go to explore tab (tab Bump @capacitor/cli from 2.2.1 to 2.3.0 #1)

2. open any asset or user profile

3. go to capture tab (tab Bump @types/node from 12.12.50 to 14.0.23 #3)

4. open any screen from capture tab (tab Bump @types/node from 12.12.50 to 14.0.23 #3)
   1. capture details
   2. wallets page
   3. invite friends
   4. settings
   5. data policy
   6. terms of use
   7. activities

5. close any screen from capture app that was opened previously

6. go back to explore tab (tab Bump @types/node from 12.12.50 to 14.0.23 #3)

7. click go back button

8. it will go back to screen from step 4.

Here is the demo
https://app.claap.io/numbers-protocol/issue-iframe-ionic-navigation-c-O35CsUM4Uy-W6YDAUEBNDaA ( https://app.claap.io/numbers-protocol/issue-iframe-ionic-navigation-c-O35CsUM4Uy-W6YDAUEBNDaA )

[sync-by-unito]

➤ Sam commented:

Kenny Hung, (cc: Tammy Yang)
Can we please move this task to next mileston/sprint. It's more than just changing back button functionaility. It requires to change back button features in all pages (wallets, inbox, etc).

Also in wallets page if I open Buy Num page and go back it will stuck in loop so I need to fix that as well.

[sync-by-unito]

➤ Kenny Hung commented:

This task should be more important than [issue] Error message when without device permission ( https://app.asana.com/0/1201016280880500/1203710087434660/f ).
I'll push it into next sprint first.

[sync-by-unito]

➤ Sam commented:

Developer note ( https://ireadyoulearn.info/2022/02/27/advanced-navigation-of-single-page-applications-inside-an-iframe/ ):

https://app.asana.com/app/asana/-/get_asset?asset_id=1204142108316917 ( https://app.asana.com/app/asana/-/get_asset?asset_id=1204142108316917 )

Todo: check how back navigation works in bubble apps.

[sync-by-unito]

➤ Sam commented:

Developer note: ( https://medium.com/analytics-vidhya/angular-routing-imperative-vs-popstate-7d254b495c54 )

Summary: Angular apps have 2 types of navigation.

Imperative navigation & Popstate navigation.
Imperative navigation: Is any navigation that is triggered by using the router ( https://Clicking the browser back and forward buttons Using the window.history object’s go() and back() methods Using Angular’s Location service methods such as back() or forward() ) object’s.
Popstate navigation: Is any navigation that is triggered by browser specific actions and is not exclusive to Angular. It’s a standard browser navigation. This navigation type can be triggered by doing the following;

1. Clicking the browser back and forward buttons
2. Using the window.history ( https://developer.mozilla.org/en-US/docs/Web/API/Window/history ) object’s go() and back() methods
3. Using Angular’s Location service ( https://angular.io/api/common/Location#forward ) methods such as back() or forward()

So I assume bubble navigate back uses window.history.back()thus causing back button issue.

capture ionic uses Imperative navigation
capture iframe uses Popstate navigation:

One solution that might work is to use Popstate navigation in capture ionic.

[sync-by-unito]

➤ Sam commented:

Developer note: ( https://ionicframework.com/docs/angular/navigation#non-linear-routing )
As fall back option try re-structure tabs.

[sync-by-unito]

➤ Sam commented:

Seems like it worked 🤞. Will do proper testing tomorrow morning if everything works will mark as completed.

[sync-by-unito]

➤ Sherry Chung commented:

Kenny Hung [user test feedback].

In general, this issue is fixed and there are no other questions.

However, I found that the layout of asset page (entering from My Capture) and product page (entering from Explore) is different.

On asset page, there's no lower banner of the "3 tabs" icon. (see below image)

If we choose to fix the page layout and make the 2 layouts the same (eg. remove the lower banner with 3 tabs on the product page. And this also matches Figma). Maybe we won't need to spend time fixing the back button issue described in this task.

[Remind] When encountering issues, removing features that cause this issue is also a solution.