On iOS advertising banner is displayed twice (triple, quadruple, ...)

Important note: occurs only in the iOS Plugin ❗

Describe the bug In very rare and special cases it happens that the advertising banner is displayed twice (triple, quadruple, …). This behavior occurs when the app has been in the background for a long time and very memory-intensive apps have been running during that time. For example the photo app or something similar. If you bring the app to the foreground, the WKWebView is reinitialized and an onDeviceReady is triggered. Now the JavaScript part has reinitialized the state, but the native Swift part still has the old state and creates another banner.

To Reproduce

1. create a fresh new cordova app

cordova create PhoneGap_ios de.test.test Test

cd PhoneGap_ios
cordova platform add ios

cordova plugin add admob-plus-cordova --save --variable APP_ID_ANDROID=ca-app-pub-XXX --variable APP_ID_IOS=XXX

cordova plugin ls

2. open with XCode the Test.xcworkspace

❗ Fix the Error ‘Value for SWIFT_VERSION cannot be empty.’ in Target ➡️ Build Settings ➡️ Swift Complier - Language ➡️ Swift Complier - Version ➡️ Swift 5 ❗ this is another bug 😉

Now you make the first run an you should be see this:

3. change the index.js according to the documentation of the admob-plus plugin

File: Test ➡️ Staging ➡️ www ➡️ js ➡️ index.js

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    // Cordova is now initialized. Have fun!

    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');
    
    banner = new admob.BannerAd({
        adUnitId: 'ca-app-pub-3940256099942544/2934735716',
      })
    
    banner.show()
}

The result should be:

4. Now put the app in the background and use very memory-intensive apps. It sounds strange, but sometimes you have to leave the app in the background for several hours to reproduce.

5. Now bring the app in the foreground

first you see this

then you see that

Expected behavior In this case, the native Swift part must actively check whether there is already a banner. Either the old banner is closed and a new banner is created (this is currently my workaround) or the old banner is reused (seems more complicated to me).

Screenshots see above

Environment

cordova-ios@6.2.0
admob-plus-cordova 1.25.0 "admob-plus-cordova"
latest Version of Cocoa Pods etc.

iMac17,1
XCode Version 13.0 (13A233)
macOS 11.6 (20G165)

iPhone X Plus
iOS 15.0.x

Additional context In my opinion, this is a really critical mistake. As you can see it is very difficult to reproduce. I was unable to recreate the error on all of my iPhone test devices. It was very difficult to even figure out how the error occurred. It depends on the amount of memory used by the Cordova app. Also how long the app has been in the background. And then the iOS also has to reinitialize the WKWebView …

For my workaround, I’ve changed the plugin’s swift code and seems to work. But it is only a solution for the banner and not a clean solution.

[redmasterstudio]

try this solution, it’s work for me

call banner.hide() before enter background document.addEventListener('pause', async () => { banner.hide(); })

and call banner.show() after back to foreground document.addEventListener('resume', async () => { banner.show(); })

[alejandroicod]

I have the exact same problem. I came up with a work around:

function initBanner(id) {
  let banner = new admob.BannerAd({
    adUnitId: 'ca-app-pub-xxxxxxxx' ,
    position: 'bottom',
    npa: status,
    id: id ? Number.parseInt(id) : null
  });

  banner.on('load', (ex) => {
    localStorage.setItem('lastBannerId', ex.adId);
  })

  return banner.show();
}

const lastBannerId = localStorage.getItem('lastBannerId');

await initBanner(lastBannerId)
  .catch(ex => {
    initBanner(null)
  });

Basically I create a new banner using the last Id that was used. In case there is already a banner with that Id it gets destroyed, catch the rejection of the promise and create a new one with Id null (which will force Admob to generate the next available Id).

This way I always make sure there is only one banner visible at a time.