Add a way for the developer to preload AdMob interstitials #934

Author: EddyVerbruggen

.gitignore

@@ -17,6 +17,7 @@ src/platforms/android/include.gradle
 !src/references.d.ts
 !src/analytics/analytics.d.ts
 !src/storage/storage.d.ts
+!src/admob/admob.d.ts
 !src/messaging/messaging.d.ts
 !src/mlkit/*/index.d.ts
 !src/mlkit/mlkit-cameraview.d.ts

demo/app/main-page.xml

@@ -85,7 +85,7 @@
       <TabViewItem.view>
         <ScrollView>
           <GridLayout columns="*, *"
-                      rows="auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto"
+                      rows="auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto"
                       horizontalAlignment="stretch"
                       class="tab-content">
 
@@ -187,34 +187,37 @@
             <Button row="35" col="0" text="show banner" tap="{{ doShowAdMobBanner }}" class="button button-admob"/>
             <Button row="35" col="1" text="show interstitial" tap="{{ doShowAdMobInterstitial }}" class="button button-admob"/>
 
-            <Button row="36" colSpan="2" text="hide banner" tap="{{ doHideAdMobBanner }}" class="button button-admob"/>
+            <Button row="36" col="0" text="preload interstitial" tap="{{ doPreloadAdMobInterstitial }}" class="button button-admob"/>
+            <Button row="36" col="1" text="show preloaded" tap="{{ doShowPreloadedAdMobInterstitial }}" class="button button-admob"/>
 
-            <Label row="37" colSpan="2" text="Firebase Cloud Messaging" class="subtitle"/>
+            <Button row="37" colSpan="2" text="hide banner" tap="{{ doHideAdMobBanner }}" class="button button-admob"/>
 
-            <Button row="38" col="0" text="add push handlers" tap="{{ messaging.doRegisterPushHandlers }}" class="button button-messaging"/>
-            <Button row="38" col="1" text="get current token" tap="{{ messaging.doGetCurrentPushToken }}" class="button button-messaging"/>
+            <Label row="38" colSpan="2" text="Firebase Cloud Messaging" class="subtitle"/>
 
-            <Button row="39" col="0" text="topic subscribe" tap="{{ messaging.doSubscribeToTopic }}" class="button button-messaging"/>
-            <Button row="39" col="1" text="topic unsubscribe" tap="{{ messaging.doUnsubscribeFromTopic }}" class="button button-messaging"/>
+            <Button row="39" col="0" text="add push handlers" tap="{{ messaging.doRegisterPushHandlers }}" class="button button-messaging"/>
+            <Button row="39" col="1" text="get current token" tap="{{ messaging.doGetCurrentPushToken }}" class="button button-messaging"/>
+
+            <Button row="40" col="0" text="topic subscribe" tap="{{ messaging.doSubscribeToTopic }}" class="button button-messaging"/>
+            <Button row="40" col="1" text="topic unsubscribe" tap="{{ messaging.doUnsubscribeFromTopic }}" class="button button-messaging"/>
             <iOS>
-              <Button row="40" colSpan="2" text="register interactive push" tap="{{ messaging.doRegisterForInteractivePush }}" class="button button-messaging"/>
+              <Button row="41" colSpan="2" text="register interactive push" tap="{{ messaging.doRegisterForInteractivePush }}" class="button button-messaging"/>
             </iOS>
-            <Button row="41" colSpan="2" text="are notifications enabled" tap="{{ messaging.doGetAreNotificationsEnabled }}" class="button button-messaging"/>
+            <Button row="42" colSpan="2" text="are notifications enabled" tap="{{ messaging.doGetAreNotificationsEnabled }}" class="button button-messaging"/>
             <!-- <Button row="39" col="1" text="topic unsubscribe" tap="{{ doUnsubscribeFromTopic }}" class="button button-messaging"/> -->
 
-            <Label row="42" colSpan="2" text="Firebase Crash Reporing / Crashlytics" class="subtitle"/>
+            <Label row="43" colSpan="2" text="Firebase Crash Reporing / Crashlytics" class="subtitle"/>
 
-            <Button row="43" col="0" text="log message" tap="{{ doLogMessage }}" class="button button-crash"/>
+            <Button row="44" col="0" text="log message" tap="{{ doLogMessage }}" class="button button-crash"/>
             <iOS>
-              <Button row="43" col="1" text="force crash :)" tap="{{ doForceCrashIOS }}" class="button button-crash"/>
+              <Button row="44" col="1" text="force crash :)" tap="{{ doForceCrashIOS }}" class="button button-crash"/>
             </iOS>
             <Android>
-              <Button row="43" col="1" text="force crash :)" tap="{{ doForceCrashAndroid }}" class="button button-crash"/>
+              <Button row="44" col="1" text="force crash :)" tap="{{ doForceCrashAndroid }}" class="button button-crash"/>
             </Android>
 
-            <Label row="44" colSpan="2" text="Firebase Invites" class="subtitle"/>
-            <Button row="45" col="0" text="send invitation" tap="{{ sendInvitation }}" class="button button-invites"/>
-            <Button row="45" col="1" text="get invitation" tap="{{ getInvitation }}" class="button button-invites"/>
+            <Label row="45" colSpan="2" text="Firebase Invites" class="subtitle"/>
+            <Button row="46" col="0" text="send invitation" tap="{{ sendInvitation }}" class="button button-invites"/>
+            <Button row="46" col="1" text="get invitation" tap="{{ getInvitation }}" class="button button-invites"/>
           </GridLayout>
 
         </ScrollView>

demo/app/main-view-model.ts

@@ -2,7 +2,7 @@ import { Observable } from "tns-core-modules/data/observable";
 import { alert, prompt } from "tns-core-modules/ui/dialogs";
 import { isIOS } from "tns-core-modules/platform";
 import * as firebase from "nativescript-plugin-firebase";
-import { AddEventListenerResult, storage as firebaseStorage, User } from "nativescript-plugin-firebase";
+import { AddEventListenerResult, storage as firebaseStorage, admob as firebaseAdMob, User } from "nativescript-plugin-firebase";
 import * as fs from "tns-core-modules/file-system";
 import { MessagingViewModel } from './messaging-view-model';
 
@@ -546,8 +546,8 @@ export class HelloWorldModel extends Observable {
   }
 
   public doShowAdMobBanner(): void {
-    firebase.admob.showBanner({
-      size: firebase.admob.AD_SIZE.SMART_BANNER,
+    firebaseAdMob.showBanner({
+      size: firebaseAdMob.AD_SIZE.SMART_BANNER,
       margins: {
         bottom: isIOS ? 50 : 0
       },
@@ -602,6 +602,41 @@ export class HelloWorldModel extends Observable {
     );
   }
 
+  public doPreloadAdMobInterstitial(): void {
+    firebaseAdMob.preloadInterstitial({
+      iosInterstitialId: "ca-app-pub-9517346003011652/6938836122",
+      androidInterstitialId: "ca-app-pub-9517346003011652/6938836122",
+      testing: true,
+      // Android automatically adds the connected device as test device with testing:true, iOS does not
+      iosTestDeviceIds: [
+        "45d77bf513dfabc2949ba053da83c0c7b7e87715", // Eddy's iPhone 6s
+        "fee4cf319a242eab4701543e4c16db89c722731f"  // Eddy's iPad Pro
+      ]
+    }).then(
+        () => console.log("AdMob interstitial preloaded"),
+        errorMessage => {
+          alert({
+            title: "AdMob error",
+            message: errorMessage,
+            okButtonText: "Hmmkay"
+          });
+        }
+    );
+  }
+
+  public doShowPreloadedAdMobInterstitial(): void {
+    firebaseAdMob.showInterstitial().then(
+        () => console.log("AdMob interstitial showing"),
+        errorMessage => {
+          alert({
+            title: "AdMob error",
+            message: errorMessage,
+            okButtonText: "Hmmkay"
+          });
+        }
+    );
+  }
+
   /**
    * Note that an interstitial is supposed to be hidden by clicking the close button,
    * so there's no function to do it programmatically.

demo/package.json

@@ -9,7 +9,7 @@
     }
   },
   "dependencies": {
-    "nativescript-plugin-firebase": "file:../publish/package/nativescript-plugin-firebase-7.1.0.tgz",
+    "nativescript-plugin-firebase": "file:../publish/package/nativescript-plugin-firebase-7.1.1.tgz",
     "nativescript-theme-core": "^1.0.4",
     "nativescript-unit-test-runner": "^0.3.4",
     "tns-core-modules": "^4.2.1"

docs/ADMOB.md

@@ -3,7 +3,7 @@
 ## Enabling AdMob
 Since plugin version 3.10.0 you can use Firebase _AdMob_ features.
 
-_AdMob_ lets you show banners or interstitials (full screen ads) in your app so you can earn a little money.
+_AdMob_ lets you show banners or interstitials (full screen ads) in your app so you can earn some money.
 
 ### iOS
 
@@ -81,8 +81,13 @@ This is a fullscreen ad, so you can earn extra credit on the eternal ladder of a
 
 Note that an interstitial is supposed to be hidden by clicking the close button, so there's no function to do it programmatically.
 
+There's two ways how you can use this function:
+
+* RECOMMENDED: without arguments, and after the Promise of 'preloadInterstitial' resolves. This will show the interstitial immediately.
+* DEPRECATED: with arguments (same as 'preloadInterstitial'). This will preload and _then_ show the interstitial, so a delay will be noticable by the user, which is against Google's policies.
+
 ```js
-  firebase.admob.showInterstitial({
+  firebase.admob.preloadInterstitial({
     iosInterstitialId: "ca-app-pub-9517346003011652/6938836122",
     androidInterstitialId: "ca-app-pub-9517346003011652/6938836122",
     testing: true, // when not running in production set this to true, Google doesn't like it any other way
@@ -92,7 +97,24 @@ Note that an interstitial is supposed to be hidden by clicking the close button,
     ]
   }).then(
       function () {
-        console.log("AdMob interstitial showing");
+        console.log("AdMob interstitial preloaded, you can now call 'showInterstitial' at any time to show it without delay.");
+      },
+      function (errorMessage) {
+        dialogs.alert({
+          title: "AdMob error",
+          message: errorMessage,
+          okButtonText: "Hmmkay"
+        });
+      }
+  );
+```
+
+After the preload Promise resolved successfully, you can show the interstitial at any time you want:
+
+```js
+  firebase.admob.showInterstitial().then(
+      function () {
+        console.log("AdMob interstitial showing.");
       },
       function (errorMessage) {
         dialogs.alert({

src/admob/admob-common.ts

@@ -0,0 +1,20 @@
+export const AD_SIZE = {
+  SMART_BANNER: "SMART",
+  LARGE_BANNER: "LARGE",
+  BANNER: "BANNER",
+  MEDIUM_RECTANGLE: "MEDIUM",
+  FULL_BANNER: "FULL",
+  LEADERBOARD: "LEADERBOARD",
+  SKYSCRAPER: "SKYSCRAPER",
+  FLUID: "FLUID"
+};
+
+export const BANNER_DEFAULTS = {
+  margins: {
+    top: -1,
+    bottom: -1
+  },
+  testing: false,
+  size: "SMART",
+  view: undefined
+};