fix: implement ping-pong mechanism to keep service worker alive

The service worker was becoming inactive when browser tabs lost focus.
Implemented a more reliable ping-pong mechanism that sends regular ping
messages from all UI contexts to the background service, preventing the
browser from considering the service worker inactive.

Author: mkazlauskas

apps/browser-extension-wallet/src/dapp-connector.tsx

@@ -4,6 +4,7 @@ import { render } from 'react-dom';
 import { DappConnectorView } from '@routes';
 import { StoreProvider } from '@stores';
 import '@lib/i18n';
+import '@lib/scripts/keep-alive-ui';
 import 'antd/dist/antd.css';
 import { CurrencyStoreProvider } from '@providers/currency';
 import { DatabaseProvider, AppSettingsProvider, AnalyticsProvider, ExternalLinkOpenerProvider } from '@providers';

apps/browser-extension-wallet/src/lib/scripts/background/services/utilityServices.ts

@@ -319,7 +319,8 @@ export const exposeBackgroundService = (wallet$: Observable<ActiveWallet>): void
         },
         getAppVersion,
         backendFailures$,
-        unhandledError$
+        unhandledError$,
+        ping: async () => 'pong' as const
       }),
       baseChannel: BaseChannels.BACKGROUND_ACTIONS,
       properties: backgroundServiceProperties

apps/browser-extension-wallet/src/lib/scripts/keep-alive-ui.ts

@@ -1,27 +1,29 @@
+import { consumeRemoteApi } from '@cardano-sdk/web-extension';
+import { backgroundServiceProperties } from './background/config';
+import { BackgroundService, BaseChannels } from './types';
 import { runtime } from 'webextension-polyfill';
 import { logger } from '@lace/common';
 
-const TIMEOUT_DURATION = 5000;
+const PING_INTERVAL = 5000; // 5 seconds - same as original
 
-const setupKeepAliveConnection = () => {
-  const port = runtime.connect({ name: 'keepAlive' });
-  port.onDisconnect.addListener(setupKeepAliveConnection);
-};
+const backgroundService = consumeRemoteApi<BackgroundService>(
+  {
+    baseChannel: BaseChannels.BACKGROUND_ACTIONS,
+    properties: backgroundServiceProperties
+  },
+  { runtime, logger }
+);
 
-const setupFirefoxWakeInterval = () => {
-  if (process.env.BROWSER === 'firefox') {
-    setInterval(() => {
-      runtime
-        .sendMessage('ping')
-        .then((response) => {
-          logger.debug('Response received:', response);
-        })
-        .catch((error) => {
-          logger.error('Connection error:', error);
-        });
-    }, TIMEOUT_DURATION);
-  }
+const keepServiceWorkerAlive = () => {
+  setInterval(async () => {
+    try {
+      const response = await backgroundService.ping();
+      logger.debug('Keep-alive ping response:', response);
+    } catch (error) {
+      logger.error('Keep-alive ping failed:', error);
+    }
+  }, PING_INTERVAL);
 };
 
-setupKeepAliveConnection();
-setupFirefoxWakeInterval();
+// Start the keep-alive mechanism
+keepServiceWorkerAlive();

apps/browser-extension-wallet/src/lib/scripts/types/background-service.ts

@@ -112,6 +112,7 @@ export type BackgroundService = {
   getAppVersion: () => Promise<string>;
   backendFailures$: BehaviorSubject<number>;
   unhandledError$: Observable<UnhandledError>;
+  ping: () => Promise<'pong'>;
 };
 
 export type WalletMode = {

apps/browser-extension-wallet/src/popup.tsx

@@ -7,6 +7,7 @@ import { StoreProvider } from '@stores';
 import { CurrencyStoreProvider } from '@providers/currency';
 import { AppSettingsProvider, DatabaseProvider, ThemeProvider, AnalyticsProvider } from '@providers';
 import '@lib/i18n';
+import '@lib/scripts/keep-alive-ui';
 import 'antd/dist/antd.css';
 import './styles/index.scss';
 import 'normalize.css';