fix(EAR-3809): Start service worker prior to page load. (#6369)

* fix(EAR-3809): service worker is running in prod, but not intercepting fetch requests. Per mdn service work lifecycle docs, attempting to load service worker prior to page load -- to ensure is properly set.

* chore(ear-3809): jest unit tests needs to have module mapped import for service worker

* chore: update unit test mocks

Author: wiedld

jest.config.js

@@ -19,6 +19,8 @@ module.exports = {
     'react-dnd$': 'react-dnd/dist/cjs',
     'react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
     'dnd-core$': 'dnd-core/dist/cjs',
+    'worker-plugin/loader!../workers/downloadHelper':
+      '<rootDir>/src/shared/workers/downloadHelper',
   },
   globals: {
     'ts-jest': {

src/dashboards/selectors/index.test.ts

@@ -115,6 +115,7 @@ describe('Dashboards.Selector', () => {
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
         subscriptionsCertificateInterest: false,
+        workerRegistration: null,
       },
     }
 
@@ -140,6 +141,7 @@ describe('Dashboards.Selector', () => {
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
         subscriptionsCertificateInterest: false,
+        workerRegistration: null,
       },
     }
 
@@ -173,6 +175,7 @@ describe('Dashboards.Selector', () => {
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
         subscriptionsCertificateInterest: false,
+        workerRegistration: null,
       },
     }
 
@@ -206,6 +209,7 @@ describe('Dashboards.Selector', () => {
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
         subscriptionsCertificateInterest: false,
+        workerRegistration: null,
       },
     }
 
@@ -235,6 +239,7 @@ describe('Dashboards.Selector', () => {
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
         subscriptionsCertificateInterest: false,
+        workerRegistration: null,
       },
     }
 

src/mockState.tsx

@@ -36,6 +36,7 @@ export const localState: LocalStorage = {
       },
       flowsCTA: {alerts: true, explorer: true, tasks: true},
       subscriptionsCertificateInterest: false,
+      workerRegistration: null,
     },
   },
   flags: {

src/shared/actions/app.ts

@@ -12,6 +12,7 @@ export enum ActionTypes {
   SetFlowsCTA = 'SET_FLOWS_CTA',
   Noop = 'NOOP',
   SetSubscriptionsCertificateInterest = 'SET_SUB_CERT_INTEREST',
+  SetWorkerRegistration = 'SET_WORKER_REGISTRATION',
 }
 
 export type Action =
@@ -25,6 +26,7 @@ export type Action =
   | ReturnType<typeof setVersionInfo>
   | ReturnType<typeof setFlowsCTA>
   | ReturnType<typeof setSubscriptionsCertificateInterest>
+  | ReturnType<typeof setWorkerRegistration>
 
 // ephemeral state action creators
 
@@ -84,3 +86,11 @@ export const setSubscriptionsCertificateInterest = () =>
   ({
     type: ActionTypes.SetSubscriptionsCertificateInterest,
   } as const)
+
+export const setWorkerRegistration = (
+  workerRegistration: Promise<ServiceWorkerRegistration>
+) =>
+  ({
+    type: ActionTypes.SetWorkerRegistration,
+    payload: {workerRegistration},
+  } as const)

src/shared/components/CSVExportButton.tsx

@@ -12,11 +12,6 @@ import {runDownloadQuery} from 'src/timeMachine/actions/queries'
 // Types
 import {AppState} from 'src/types'
 
-// Worker
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import downloadWorker from 'worker-plugin/loader!../workers/downloadHelper'
-
 type Props = ConnectedProps<typeof connector>
 
 interface State {
@@ -28,8 +23,8 @@ class CSVExportButton extends PureComponent<Props, State> {
     super(props)
     this.state = {browserSupportsDownload: false}
 
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register(downloadWorker).then(
+    if (props.workerRegistration) {
+      ;(props.workerRegistration as Promise<ServiceWorkerRegistration>).then(
         () => this.setState({browserSupportsDownload: true}),
         function (err) {
           console.error(
@@ -81,7 +76,7 @@ const mstp = (state: AppState) => {
   const activeQueryText = getActiveQuery(state).text
   const disabled = activeQueryText === ''
 
-  return {disabled}
+  return {disabled, workerRegistration: state.app.persisted.workerRegistration}
 }
 
 const mdtp = {

src/shared/contexts/app.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useCallback} from 'react'
+import React, {FC, useCallback, useEffect} from 'react'
 import {useSelector, useDispatch} from 'react-redux'
 
 import {
@@ -10,6 +10,7 @@ import {
   disablePresentationMode,
   setFlowsCTA as setFlowsCTAAction,
   setSubscriptionsCertificateInterest as setSubscriptionsCertificateInterestAction,
+  setWorkerRegistration,
 } from 'src/shared/actions/app'
 import {
   timeZone as timeZoneFromState,
@@ -27,6 +28,17 @@ import {presentationMode as presentationModeCopy} from 'src/shared/copy/notifica
 import {AppState, TimeZone, Theme, NavBarState, FlowsCTA} from 'src/types'
 import {event} from 'src/cloud/utils/reporting'
 
+// Worker -- load prior to page load event, in order to intercept fetch in http/2.
+// see service worker life cycle. https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import downloadWorker from 'worker-plugin/loader!../workers/downloadHelper'
+
+let workerRegistration = null
+if ('serviceWorker' in navigator) {
+  workerRegistration = navigator.serviceWorker.register(downloadWorker)
+}
+
 interface AppSettingContextType {
   timeZone: TimeZone
   theme: Theme
@@ -35,6 +47,7 @@ interface AppSettingContextType {
   navbarMode: NavBarState
   flowsCTA: FlowsCTA
   subscriptionsCertificateInterest: boolean
+  workerRegistration: Promise<ServiceWorkerRegistration>
 
   setTimeZone: (zone: TimeZone) => void
   setTheme: (theme: Theme) => void
@@ -53,6 +66,7 @@ const DEFAULT_CONTEXT: AppSettingContextType = {
   navbarMode: 'collapsed' as NavBarState,
   flowsCTA: {alerts: true, explorer: true, tasks: true} as FlowsCTA,
   subscriptionsCertificateInterest: false,
+  workerRegistration,
 
   setTimeZone: (_zone: TimeZone) => {},
   setTheme: (_theme: Theme) => {},
@@ -135,6 +149,10 @@ export const AppSettingProvider: FC = ({children}) => {
     dispatch(setSubscriptionsCertificateInterestAction())
   }, [dispatch])
 
+  useEffect(() => {
+    dispatch(setWorkerRegistration(workerRegistration))
+  }, [workerRegistration])
+
   return (
     <AppSettingContext.Provider
       value={{
@@ -145,6 +163,7 @@ export const AppSettingProvider: FC = ({children}) => {
         navbarMode,
         flowsCTA,
         subscriptionsCertificateInterest,
+        workerRegistration,
 
         setTimeZone,
         setTheme,

src/shared/reducers/app.test.ts

@@ -25,6 +25,7 @@ describe('Shared.Reducers.appReducer', () => {
       versionInfo: {version: '', commit: ''},
       flowsCTA: {explorer: true, tasks: true, alerts: true},
       subscriptionsCertificateInterest: false,
+      workerRegistration: null,
     },
   }
 

src/shared/reducers/app.ts

@@ -19,6 +19,7 @@ export interface AppState {
     versionInfo: VersionInfo
     flowsCTA: FlowsCTA
     subscriptionsCertificateInterest: boolean
+    workerRegistration: Promise<ServiceWorkerRegistration>
   }
 }
 
@@ -36,6 +37,7 @@ const initialState: AppState = {
     versionInfo: {version: '', commit: ''},
     flowsCTA: {explorer: true, tasks: true, alerts: true},
     subscriptionsCertificateInterest: false,
+    workerRegistration: null,
   },
 }
 
@@ -126,6 +128,13 @@ const appPersistedReducer = (
       }
     }
 
+    case ActionTypes.SetWorkerRegistration: {
+      return {
+        ...state,
+        workerRegistration: action.payload.workerRegistration,
+      }
+    }
+
     default:
       return state
   }