Navigation for Single Page Application

[leramulina]

Hi! I would like to understand what can be a better strategy to make a navigation. I already made an app as web app working in a browser and mobile app for Android (I wrapped it in a code bought from WebViewGold).

Option 1

I made it as Single Page App. Only with the pages index, 404 and reset_pw. Created groups of each other inner pages. Initially each “page” group is hidden. There is a condition that it can be shown when there is a related to that page v parameter in the url.

And when there is a navigation to it I use the following workflow:

1. “go to page” for example index
2. “send more parameters to the page” - use v parameter to describe the page (v=home or v=task-create etc) so I send this v parameter to show the group
3. “send more parameters to the page” - use i parameter to send the id of the current page or group - so I send the specific material parameters to the group that was shown

PRO:

I can use the buttons back and forward both in browser version and in mobile version of the app.

CONTRA:

Not nice ulrs. In the browser the address sooks not really cute like:

“MyApp dot App: premium domain name (Buy now) - myapp.app”
“MyApp dot App: premium domain name (Buy now) - myapp.app”

=========

Option 2

I recently checked the parameters of the page of Bubble where I can choose that this page is a native app page. “this page is a native app”

So there is recommended not to use navigation for app but to hide and show groups.

I tried that method

1. “hide an element” i hide current group
2. “show an element” i show the next group
3. “display data in a popup/group” i send the data to another

PRO:

1. I can set cleaner urls if I send slugs to the group

CONTRA

1. I will not have the opportunity to use the buttons back and forward in browser and app navigation. I do not go to another page. I just hide and show groups.

=========

Option 3

I create a custom state for page index which is responsible for navigation. Let’s say the custom state looks like this:

Let’s say I have a page with all tasks and I want to see a particular task. Tasks to task-view. Task-view group is hidden by default and can be visible if the custom state of index nav is task-view.

So when I click the name of a particular task I start the following workflow:

PRO:

1. I can have cleaner urls if I send slugs to the group

CONTRA

1. I will not have the opportunity to use the buttons back and forward in browser and app navigation. I do not go to another page. I just hide and show groups.

So I have the following questions:

1. What bonuses with this option “this page is a native app” will I get additionally to the standard ones if I use “this page is a native app” option?

2. Concerning these pro and contra. Which way of navigation can be more optimal for you?

3. Is it possible somehow to make clean urls and use navigation button in browser and native app?

[mac2]

Can you set a slug for things like Tasks that are more visually appealing and human understood? Sure, Bubble says not to use URL parameters, but many do it that way with no issue.

Alternatively, I don’t personally think may users need to use the browsers back/forward buttons if you add clear navigation in your app.

[leramulina]

Thank you Yes. I will do it.

[leramulina]

But how about back and forward buttons when people use an app? I think people can try to use them when they use an app. I just don’t want users to feel frustrated if they use buttons back and forward in a browser or app and see that these buttons don’t work.

[mac2]

I would stick to using parameters vs the showing/hiding groups.

Use the slug method I mentioned above to make the URLs prettier, but I don’t think that is even necessary. IMO, 99% of people in this world do not care what a URL looks like. I mean, check Airbnb; those URLs are loaded with parameters that look like trash if we’re talking about prettiness.