feat: add iframe heartbeat implementation.

packages/@magic-sdk/provider/src/core/view-controller.ts

@@ -113,6 +113,10 @@ async function persistMagicEventRefreshToken(event: MagicMessageEvent) {
   await setItem('rt', event.data.rt);
 }
 
+const PING_INTERVAL = 5000; // 5 seconds
+const RELOAD_THRESHOLD = 10000; // 10 seconds
+const INITIAL_HEARTBEAT_DELAY = 3600000; // 1 hour
+
 export abstract class ViewController {
   public checkIsReadyForRequest: Promise<void>;
   public isReadyForRequest: boolean;
@@ -136,12 +140,17 @@ export abstract class ViewController {
     this.checkIsReadyForRequest = this.waitForReady();
     this.isReadyForRequest = false;
     this.listen();
+    this.startHeartBeat();
   }
 
   protected abstract init(): void;
   protected abstract _post(data: MagicMessageRequest): Promise<void>;
   protected abstract hideOverlay(): void;
   protected abstract showOverlay(): void;
+  protected abstract reloadIframe(): void;
+
+  private lastPingTime = Date.now();
+  private pingTimer: ReturnType<typeof setInterval> | null = null;
 
   /**
    * Send a payload to the Magic `<iframe>` for processing and automatically
@@ -259,6 +268,34 @@ export abstract class ViewController {
     });
   }
 
+  private ping = () => {
+    this._post({ msgType: MagicOutgoingWindowMessage.MAGIC_PING, payload: [] });
+    this.lastPingTime = Date.now();
+  };
+
+  private startHeartBeat = () => {
+    const heartBeatCheck = () => {
+      this.pingTimer = setInterval(() => {
+        this.ping();
+        const timeSinceLastPing = Date.now() - this.lastPingTime;
+
+        if (timeSinceLastPing > RELOAD_THRESHOLD) {
+          this.reloadIframe();
+        }
+      }, PING_INTERVAL);
+    };
+
+    setTimeout(heartBeatCheck, INITIAL_HEARTBEAT_DELAY);
+  };
+
+  protected stopHeartBeat = () => {
+    if (this.pingTimer) {
+      clearInterval(this.pingTimer);
+
+      this.pingTimer = null;
+    }
+  };
+
   /**
    * Listen for messages sent from the underlying Magic `<WebView>`.
    */
@@ -276,5 +313,9 @@ export abstract class ViewController {
         new MagicSDKWarning(SDKWarningCode.ProductAnnouncement, event.data.response.result.product_announcement).log();
       }
     });
+
+    this.on(MagicIncomingWindowMessage.MAGIC_PONG, () => {
+      this.lastPingTime = Date.now();
+    });
   }
 }

packages/@magic-sdk/types/src/core/message-types.ts

@@ -8,10 +8,12 @@ export enum MagicIncomingWindowMessage {
   MAGIC_HANDLE_EVENT = 'MAGIC_HANDLE_EVENT',
   MAGIC_MG_BOX_SEND_RECEIPT = 'MAGIC_MG_BOX_SEND_RECEIPT',
   MAGIC_SEND_PRODUCT_ANNOUNCEMENT = 'MAGIC_SEND_PRODUCT_ANNOUNCEMENT',
+  MAGIC_PONG = 'MAGIC_PONG',
 }
 
 export enum MagicOutgoingWindowMessage {
   MAGIC_HANDLE_REQUEST = 'MAGIC_HANDLE_REQUEST',
+  MAGIC_PING = 'MAGIC_PING',
 }
 
 /** The shape of responding window message datas from the Magic iframe context. */

packages/magic-sdk/src/iframe-controller.ts

@@ -97,6 +97,10 @@ export class IframeController extends ViewController {
         }
       }
     });
+
+    window.addEventListener('beforeunload', () => {
+      this.stopHeartBeat();
+    });
   }
 
   protected async showOverlay() {
@@ -123,4 +127,13 @@ export class IframeController extends ViewController {
       throw createModalNotReadyError();
     }
   }
+
+  protected async reloadIframe() {
+    const iframe = await this.iframe;
+    if (iframe && iframe.contentWindow) {
+      iframe.contentWindow.location.reload();
+    } else {
+      throw createModalNotReadyError();
+    }
+  }
 }