I have a standard app, Ionic 5, capacitor 2.4. The app consists of multiple pages. Each page has a header and a content area. My app communicates with a backend. In case the app is offline or can’t communicate with the backend for any other reason, I want to display a little notification banner on the very top of the app, in all screens, in all situations. So I tried to insert my notification banner in the app component:
<ion-app> <ion-split-pane contentId="main-content"> <ion-router-outlet id="main-content" [swipeGesture]="false"> <app-connectivity-status></app-connectivity-status> </ion-router-outlet> </ion-split-pane> </ion-app>
app-connectivity-status is my little component which displays the notification in case there is a connection issue.
Unfortunately this leads to the banner just overlapping the header of the pages, it’s not pushing them down (which is probably the desired behaviour of a header in general…).
And in case a page spins up a modal, the notification is not visible at all in this modal of course.
As this is kind of a common scenario (I’ve seen a couple of apps which display connection issues to the user like that), is there any recommended solution for such a case?
Of course it would work to put my component in all headers of all pages, and also on top of all modal components, but this would be somewhat annoying I think.
Any help appreciated,