Ionic 5 after internet connects reload current page

i am using https://github.com/apache/cordova-plugin-network-information.

once internet connected back, imges are broken still. how to load those after connectivity?

 this.network.onConnect().subscribe(() => {
      console.log('network connected');
      // reload current page
      this.networkState.next(false);
    }, error => console.error('Error while connecting', error));

@freshbie This can be achieved via a hack, Navigate to some sample component and then navigate to the component that you want to reload.

this.router.navigateByUrl('/sampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);

Or finally, invoke the function again.

this.ngOnInit();

This will re-run the services that bind the information with the images or anything else inherent that interferes with refreshing the images in the container.

@1antares1 thanks for the reply, unfortunately it didn’t work;
i have a network service and a page that shows no internet connection.when i try your code, it is redirecting but not calling ngOninit to load again.

Untitled-document-Google-Docs

This is what i am planning to achieve

What I would do instead is to target the exact issue.

Presumably you have a companion onDisconnect handler. In it, I would change the bound [src] property of all image elements to an “unavailable, offline” dummy value pointing to something inside your assets. Then, in onConnect, restore the [src] bindings to their ordinary online values and let change detection do its job.

@rapropos thanks for the reply.
i have over 30 pages.subscribe disconnect and connect handler in all these pages will be a long process.now whenever internet disconnects a modal shows, over the current page.it will dismiss only when there is internet.if i can reload current route, that will be easy and for future pages i don’t have to write extra subscriptions.

Well then @freshbie , You would have to move the logic that allows you to get the information in an Ionic Lifecycle Event and not OnInit. E.g.: ionViewWillEnter or ionViewDidEnter.

In such a way, that each time you redirect or enter, the information always loads for the first time.

Not that anybody need care about my opinion, but I strongly disagree with this.

The only things I rely on with lifecycle events (be they Angular or Ionic ones) are:

  • the “constructor-y” one will have been called at least once before the user can interact with the component;
  • the “constructor-y” one won’t get called twice in a row without an intervening call to the “destructor-y” one

Notably absent here is any notion involving whether we have navigated away from and back to any given page.

These forums are littered with threads complaining about how lifecycle events aren’t triggered under certain conditions (such as when hosted underneath tabs, or embedded in another component or page), or are triggered too frequently (such as when pages get evicted from cache due to lack of resources).

App developers relying on framework internals are cancerous to frameworks, because they bring political pressure (whether intended or not) that forces the framework authors to calcify, prioritizing bugwards compatibility over true innovation.

Let’s say tomorrow Ionic wanted to implement a new LRU caching system designed to improve performance. Apps relying on view layer lifecycle events to manage business layer problems like data freshness will suddenly stop working correctly, the app developers will whine about it, and the idea will get scrapped for no good reason.

@rapropos i considered your opinion.But i would like to know is there a global solution for this.so that need not to edit each page for the same.

I guess that depends on how you define “global”, and it might help to know what these images are, where they’re coming from, how they’re used, etc.

The most “global” of a solution I would feel comfortable using would be some sort of ImageService that acts as a universal dispatcher, but even then you would have to make some sort of modifications to every page to use it.

I still am partial to some sort of wrapper component that automatically substitutes a special “no connection” placeholder when the network is dead. If you combined it with the functionality built into <ion-img> that only loads the image when the component is visible, I think that would go a long way towards reducing excess chatter.

Otherwise, if you really want global, I think the only guaranteed way to ensure you bypass any caches would be to nuke everything from orbit with something like window.location.reload(), but that would cause your app to basically restart.

If the app is totally unusable offline, then that would be another option, I suppose - when the network goes down, your app displays a “sorry, network down, try again later” message and simply quits.

Everything is depending, dear @rapropos

Lifecycle events were born by the Ionic team because no component, unlike Angular, are destroyed when interacting with others, since you interact with “Pages” (you have enter and leave events, although they have already been built).

You have to have discretion when using them, yes. But it isn’t a total limitation, and of course, future changes could break in, but this happens in every gradual update of all frameworks with very different versions: With Angular, including.

@freshbie A solution that comes to mind is that you validate it from the Router events through a subscription from the App.component. Something typical like:

this.router.events.pipe(
    filter((e): e is NavigationEnd => e instanceof NavigationEnd),
    map(e => {
         // to do
})).subscribe();

Through there, you could handle a service that uses your BasePage (the same Base that all your components inherit and do work there before or after you pass to a page).

So I, in my own situations, I handle the passing of information through states on the components without the need to subscribe in all the ngOnInit of the Pages that are only executed once.

Good luck! :wink: