messaging.onMessage not firing when in foreground for Chrome and MS Edge

I have the code below in /assets/myfb.js file
I have the token and I'm able to send push notifications to the app.
When the app is in background, it works flawlessly, however when in foreground, the onMessage is not being fired.

> const firebaseConfig = {
> apiKey: "AIzaSyDY3bh7Kss", //MODIFIED
> authDomain: "sim.firebaseapp.com", //MODIFIED
> databaseURL: "https://sim.firebaseio.com", //MODIFIED
> projectId: "sim", //MODIFIED
> storageBucket: "sim", //MODIFIED
> messagingSenderId: "295486054706", //MODIFIED
> appId: "1:29:web:d9a68025", //MODIFIED
> measurementId: "G-GH8M" //MODIFIED
> };
>
> firebase.initializeApp(firebaseConfig);
>
> const messaging = firebase.messaging();
> messaging.usePublicVapidKey('BJ06hXZAmfEC6S4JhlN5-KCQ'); //MODIFIED
> messaging.onTokenRefresh(function() {
> GetAndSaveUpdatedToken();
> });
> messaging.onMessage(function(payload) {
> console.log(payload);
> });
> function GetAndSaveUpdatedToken() {
> }
>
> function FCMDeleteToken() {
> }
> function SaveToken2Server(currentToken, DeviceType, DeviceName) {
>
> }

Parent page includes FCM JS from CDN
>
>
>

and includes JS file shown above.

My notification includes Notification Title, Body, data and Click URL

Help much appreciated.