Display component on top of your app in all situations (e.g. offline notification)

Ionic Framework
1

Hey,

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,
regards,
Jonas

2

Hi, did you solve this issue?? Thanks in advance

3

Hey, unfortuantely not. I went with the annoying approach… I integrated the notification component in all headers of all pages and modals.

1 Like