Browser Refresh button in the Ionic Conference App?

Ionic Framework ionic-v3
1

I’m currently working on getting my mobile Ionic app working in the desktop browser and one of the issues I am facing is what happens when the user hits the browser refresh button when they are on pages that require nav params etc. I looked at the Ionic Conference app and saw that when you run that in a browser and hit refresh the app always returns to the default view rather than try and display the page the user has refreshed. What I’m not understanding is why this happens e.g when you go to the URL:

http://ionic-team.github.io/ionic-conference-app/www/#/tabs/speakers/sessionDetail/The%20Ionic%20package%20service

what is it that makes the app return to the default view of schedules instead of trying to display the session detail page?

2

Hmm - ok I cloned the repo and locally it doesn’t do that so I guess that’s a server thing.

3

Maybe a problem linked with the Ionic v3 router which gonna be solved with the new v4 routing system?

I’m right now trying to build a PWA with v3 and I face kind of the same problem. Right now to solve it a bit I have set my nginx to reroute everything to root also set the following strategy to remove hashbang in the url in app.module.ts

IonicModule.forRoot(MyApp, {
   locationStrategy: 'path'
 })

But still, I think I do face the same problem too, specially when I run ionic serve

Don’t know if my comment helps but if I understand correctly what you meant, just to say, you are not alone :wink:

1 Like
4

Thanks @reedrichards - nice to know I’m not alone! How have you handled segments and components you have drilled down into? I just entered a comment relating to this here Making a Website Using Ionic & Firebase Hosting

5

I don’t get that question sorry, maybe a language problem. Could you explain a bit what you mean?

6

Sorry! I’m talking about the issue of NavParams being undefined if you hit the browser refresh button on any page (in the situation where you have pushed that page onto the nav stack passing parameters). The conference app uses this list of links in app.module:

 links: [
        { component: SpeakerDetailPage, name: 'SpeakerDetail', segment: 'speakerDetail/:speakerId' },
      ]

I’m assuming that’s the way to handle this issue (although I think objects aren’t supported so for example the speakerDetail component is passed a speakerId which is a string - it couldn’t be an object)

7

Well, I just tried, and it looks like that

  1. I didn’t solved it

but

  1. The thing is, my all is under an http guard (except the login page). Therefore, when I refresh the page, the page try to perform an http-request without params, so it crash an error which is intercepted by the guard and I go back to the login process and land on the first page as I would start or restart the app. Well not that user friendly, but the good thing, I don’t display a 404 or an error :wink: