Show best practice of multi level Lazy Loading Pages for URLS and PWA

Ionic Framework ionic-v3
1

Hi we are running from a long time into many many problems using LazyLoading pages in PWA and WebApp.

So perhaps someone of you can help us figure out which is the best approach to do a big heavy app with a lot of pages on a WebApp PWA context.

Let me explain what we are trying to do.

We have our APP.COMPONENT which is only holding the ROOT NAV element. IF we are authenticated we would load our LoginPage if we are not Authenticated we would load our MainPage.
If we can enter LoginPage or should be redirect to MainPage we are handling from ionic guard ionCanEnter.
If we are not authenticated we can load as default page the LoginPage and that is no problem.

If we are logged in we load MainPage.

So MainPage now has an second NAV component, where we would load many of our other pages, like a Dashboard.
A DashboardPage has a segment for IonicPage, like an ID.

So the structure is something like that

         -----> Login Page

APP NAV
                            -----> DashboarPage (segment: id)
         -----> Main Page   -----> Page2
                            -----> Page 3

Our Main Problem is handling auth guards where we opened some bugs on github, and handling navigation with URLS.

So if you navigate to
a) / load Login Page or Main Page, depending on if user authenticated, that is not a problem
b) /loginpage redirect to MainPage if you are already authenticated
c) /mainpage redirect to LoginPage if you are not authenticated, if you are authenticated load DashboardPage with default ID segment public
d) /mainpage/dashboard redirect to Default DasboardPage which is /mainpage/dashboard/public

teorically all this should work very very easy, but there are many many problems with lazyloading, routes and multi level navigation.

So please, share some BEST PRACTICE on how we should do something like that.

thx

2

I don’t know if it’s best practice, but I don’t care if someone navigates to a page. I care if they see data. So I keep all data in providers, and pages subscribe to data streams from those providers. In the providers, the data streams are set to “normal” if the auth state is confirmed, and to Observable.([]) if the auth state is null etc. So if you’re not logged in and you go to a page, you can see the title of the page, but nothing in the database.

I took this approach because I didn’t trust Ionic page guards, and decided not to use them at all. That was my whole plan. But now that I’ve done it, I think there are some things that recommend it. You only need to subscribe to auth state in providers, not in every page. So that reduces Observable overhead. And all I need to do is to ensure the front end mirrors the back end. Anything I don’t want the user to see, I put in provider logic and in database rules. So in that sense the logic is super simple.

3

Hi, for security reason that’s a good thing, also our server cares about it. So if you see the page doesn’t mean you see the data and that’s fine.

But as we use the app also as WebApp and also as PWA the minimum requirement to navigation utility is to handle urls as angular router and others.

IMO: There are many problems for it, and I hope some of the team could help on figure out how we should handle this behavior. They work on a PWA solution but dosn’t have a router for it?
thx

4

That’s the current state of Ionic, yes. Maybe there will be some routing improvements for PWAs by the end of the year. Until then, I’m not sure what else you want. It’s a mess, and I don’t understand the benefit of banging your head against a wall.

2 Likes
5

You are right. But we need Ionic and we need a WebApp, it doesn’t need to be perfect for now. But I need only a best way to do it. URLS not working as they should on a WebApp is not a really funny! So perhapse we are doing something wrong and that’s why we ask ionic which is the best way to this. :slight_smile: thx