Fix: Revise method to keep service worker alive. (#655)

* Remove chrome.storage.local.get interval calls * Remove left over contents * Show messaging to user when serviceworker is slept. * Get isUsingCDP and allowedNumberOfTabs.
GoogleChromeLabs · May 5, 2024 · a5561ab · a5561ab
1 parent fc3b0c6
commit a5561ab
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 13 deletions.
diff --git a/packages/extension/src/constants.ts b/packages/extension/src/constants.ts
@@ -15,7 +15,7 @@
  */
 export const ALLOWED_NUMBER_OF_TABS = 1;
 export const WEBPAGE_PORT_NAME = 'psat-webpage';
-export const DEVTOOL_PORT_NAME = 'psat-devtool';
+export const SERVICE_WORKER_PORT_NAME = 'psat-serviceworker';
 
 export const SETTING_PAGE_CONTROLS = [
   {

diff --git a/packages/extension/src/contentScript/index.ts b/packages/extension/src/contentScript/index.ts
@@ -41,6 +41,7 @@ import { TOOLTIP_CLASS } from './constants';
 import {
   DEVTOOLS_SET_JAVASCSCRIPT_COOKIE,
   GET_JS_COOKIES,
+  SERVICE_WORKER_PORT_NAME,
   TABID_STORAGE,
   WEBPAGE_PORT_NAME,
 } from '../constants';
@@ -62,6 +63,11 @@ class WebpageContentScript {
    */
   port: chrome.runtime.Port | null = null;
 
+  /**
+   * Serviceeworker Connection port
+   */
+  serviceWorkerPort: chrome.runtime.Port | null = null;
+
   /**
    * TabId of the current Tab
    */
@@ -146,6 +152,13 @@ class WebpageContentScript {
 
       if (message?.payload?.type === TABID_STORAGE) {
         this.tabId = message.payload.tabId;
+        chrome.runtime.sendMessage({
+          setInPage: true,
+          type: 'PING',
+          payload: {
+            tabId: this.tabId,
+          },
+        });
       }
 
       if (message?.payload?.type === GET_JS_COOKIES) {
@@ -163,6 +176,11 @@ class WebpageContentScript {
         port.onMessage.addListener(this.onMessage);
         port.onDisconnect.addListener(this.onDisconnect);
       }
+      if (port.name.startsWith(SERVICE_WORKER_PORT_NAME)) {
+        this.serviceWorkerPort = port;
+        port.onMessage.addListener(this.onMessage);
+        port.onDisconnect.addListener(this.onDisconnect);
+      }
     });
   }
 
@@ -293,6 +311,8 @@ class WebpageContentScript {
         setInPage: false,
       });
     }
+    this.serviceWorkerPort?.disconnect();
+    this.serviceWorkerPort = null;
   }
 
   /**

diff --git a/packages/extension/src/serviceWorker/index.ts b/packages/extension/src/serviceWorker/index.ts
@@ -36,6 +36,7 @@ import {
   INITIAL_SYNC,
   POPUP_CLOSE,
   POPUP_OPEN,
+  SERVICE_WORKER_PORT_NAME,
   SERVICE_WORKER_RELOAD_MESSAGE,
   SERVICE_WORKER_TABS_RELOAD_COMMAND,
   SET_TAB_TO_READ,
@@ -169,12 +170,6 @@ chrome.runtime.onStartup.addListener(async () => {
     syncCookieStore = new SynchnorousCookieStore();
   }
 
-  // @see https://developer.chrome.com/blog/longer-esw-lifetimes#whats_changed
-  // We're doing this to keep the service worker active, preventing data loss.
-  setInterval(() => {
-    chrome.storage.local.get();
-  }, 28000);
-
   // Sync cookie data between popup and Devtool.
   // @todo Only send the data from the active tab and the differences.
   setInterval(() => {
@@ -309,9 +304,6 @@ chrome.runtime.onInstalled.addListener(async (details) => {
 
   // @see https://developer.chrome.com/blog/longer-esw-lifetimes#whats_changed
   // Doing this to keep the service worker alive so that we dont loose any data and introduce any bug.
-  setInterval(() => {
-    chrome.storage.local.get();
-  }, 28000);
 
   // @todo Send tab data of the active tab only, also if sending only the difference would make it any faster.
   setInterval(() => {
@@ -635,6 +627,51 @@ chrome.runtime.onMessage.addListener(async (request) => {
 
   const incomingMessageTabId = request.payload.tabId;
 
+  if ('PING' === request?.type) {
+    if (
+      syncCookieStore &&
+      !syncCookieStore?.tabs[incomingMessageTabId]?.portRef
+    ) {
+      syncCookieStore.tabs[incomingMessageTabId].portRef = chrome.tabs.connect(
+        Number(incomingMessageTabId),
+        {
+          name: `${SERVICE_WORKER_PORT_NAME}-${incomingMessageTabId}`,
+        }
+      );
+
+      if (syncCookieStore.tabs[incomingMessageTabId].portRef) {
+        setInterval(() => {
+          syncCookieStore?.tabs[incomingMessageTabId].portRef?.postMessage({
+            status: 'ping',
+          });
+        }, 10000);
+      }
+
+      syncCookieStore.tabs[
+        incomingMessageTabId
+      ].portRef.onDisconnect.addListener(() => {
+        if (!syncCookieStore) {
+          chrome.runtime.sendMessage({
+            type: 'SERVICE_WORKER_SLEPT',
+          });
+          syncCookieStore = new SynchnorousCookieStore();
+          (async () => {
+            const settings = await chrome.storage.sync.get();
+            globalIsUsingCDP = settings.isUsingCDP ?? false;
+            tabMode = settings.allowedNumberOfTabs;
+          })();
+          return;
+        }
+
+        if (syncCookieStore.tabs[incomingMessageTabId].portRef) {
+          syncCookieStore.tabs[incomingMessageTabId].portRef = null;
+        }
+
+        clearInterval(10000);
+      });
+    }
+  }
+
   if (DEVTOOLS_OPEN === incomingMessageType) {
     const dataToSend: { [key: string]: string | boolean } = {};
     dataToSend['tabMode'] = tabMode;
@@ -715,9 +752,6 @@ chrome.windows.onCreated.addListener(async () => {
 
   // @see https://developer.chrome.com/blog/longer-esw-lifetimes#whats_changed
   // Doing this to keep the service worker alive so that we dont loose any data and introduce any bug.
-  setInterval(() => {
-    chrome.storage.local.get();
-  }, 28000);
 
   // We do not want to clear content settings if a user has create one more window.
   if (totalWindows.length < 2) {

diff --git a/packages/extension/src/store/synchnorousCookieStore.ts b/packages/extension/src/store/synchnorousCookieStore.ts
@@ -49,6 +49,7 @@ class SynchnorousCookieStore {
       devToolsOpenState: boolean;
       popupOpenState: boolean;
       newUpdates: number;
+      portRef: any;
     };
   } = {};
 
@@ -306,6 +307,7 @@ class SynchnorousCookieStore {
       devToolsOpenState: false,
       popupOpenState: false,
       newUpdates: 0,
+      portRef: null,
     };
   }
 

diff --git a/packages/extension/src/view/devtools/stateProviders/cookie/cookieProvider.tsx b/packages/extension/src/view/devtools/stateProviders/cookie/cookieProvider.tsx
@@ -217,6 +217,7 @@ const Provider = ({ children }: PropsWithChildren) => {
   }, [allowedNumberOfTabs, tabFrames]);
 
   const messagePassingListener = useCallback(
+    // eslint-disable-next-line complexity
     async (message: {
       type: string;
       payload: {
@@ -230,9 +231,15 @@ const Provider = ({ children }: PropsWithChildren) => {
       if (!message.type) {
         return;
       }
+
       const tabId = chrome.devtools.inspectedWindow.tabId;
       const incomingMessageType = message.type;
 
+      if (incomingMessageType === 'SERVICE_WORKER_SLEPT') {
+        setContextInvalidated(true);
+        localStorage.setItem('contextInvalidated', 'true');
+      }
+
       if (SET_TAB_TO_READ === incomingMessageType) {
         const tab = await getTab(tabId?.toString() || '');
         setTabUrl(tab?.url ?? '');