From 50d76827769f3858d9bf19827c267f5a1712a83f Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Thu, 19 Sep 2024 21:07:52 -0400
Subject: [PATCH] Fix DevTools from losing connection (#1767)

* Fix DevTools from losing connection

* Create kind-seals-arrive.md
---
 .changeset/kind-seals-arrive.md                 | 5 +++++
 extension/src/background/index.ts               | 6 ++++++
 extension/src/background/store/apiMiddleware.ts | 6 ++----
 extension/src/contentScript/index.ts            | 4 ----
 extension/src/devpanel/index.tsx                | 4 ----
 5 files changed, 13 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/kind-seals-arrive.md

diff --git a/.changeset/kind-seals-arrive.md b/.changeset/kind-seals-arrive.md
new file mode 100644
index 00000000..4cc3c585
--- /dev/null
+++ b/.changeset/kind-seals-arrive.md
@@ -0,0 +1,5 @@
+---
+'remotedev-redux-devtools-extension': patch
+---
+
+Fix DevTools from losing connection
diff --git a/extension/src/background/index.ts b/extension/src/background/index.ts
index f8831473..48ffe24e 100644
--- a/extension/src/background/index.ts
+++ b/extension/src/background/index.ts
@@ -29,3 +29,9 @@ chrome.storage.onChanged.addListener((changes) => {
     else removeMenu();
   }
 });
+
+// https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#keep_a_service_worker_alive_continuously
+setInterval(
+  () => chrome.storage.local.set({ 'last-heartbeat': new Date().getTime() }),
+  20000,
+);
diff --git a/extension/src/background/store/apiMiddleware.ts b/extension/src/background/store/apiMiddleware.ts
index 68a734c8..0b8dc20c 100644
--- a/extension/src/background/store/apiMiddleware.ts
+++ b/extension/src/background/store/apiMiddleware.ts
@@ -553,8 +553,7 @@ function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
     console.log(`Connected to tab ${id}`);
     if (port.sender!.frameId) id = `${id}-${port.sender!.frameId}`;
     connections.tab[id] = port;
-    listener = (msg: ContentScriptToBackgroundMessage<S, A> | 'heartbeat') => {
-      if (msg === 'heartbeat') return;
+    listener = (msg: ContentScriptToBackgroundMessage<S, A>) => {
       console.log(`Message from tab ${id}: ${msg.name}`);
       if (msg.name === 'INIT_INSTANCE') {
         if (typeof id === 'number') {
@@ -593,8 +592,7 @@ function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
     connections.panel[id] = port;
     monitors++;
     toAllTabs({ type: 'START' });
-    listener = (msg: BackgroundAction | 'heartbeat') => {
-      if (msg === 'heartbeat') return;
+    listener = (msg: BackgroundAction) => {
       console.log(`Message from monitor ${id}: ${msg.type}`);
       store.dispatch(msg);
     };
diff --git a/extension/src/contentScript/index.ts b/extension/src/contentScript/index.ts
index 9da069b4..c72072e9 100644
--- a/extension/src/contentScript/index.ts
+++ b/extension/src/contentScript/index.ts
@@ -343,7 +343,3 @@ function handleMessages<S, A extends Action<string>>(
 prefetchOptions();
 
 window.addEventListener('message', handleMessages, false);
-
-setInterval(() => {
-  bg?.postMessage('heartbeat');
-}, 15000);
diff --git a/extension/src/devpanel/index.tsx b/extension/src/devpanel/index.tsx
index de4f6e4a..38749a8e 100644
--- a/extension/src/devpanel/index.tsx
+++ b/extension/src/devpanel/index.tsx
@@ -116,10 +116,6 @@ function init() {
   }
   bgConnection = chrome.runtime.connect({ name });
 
-  setInterval(() => {
-    bgConnection.postMessage('heartbeat');
-  }, 15000);
-
   bgConnection.onMessage.addListener(
     <S, A extends Action<string>>(
       message: PanelMessageWithSplitAction<S, A>,