fix(EAR-3809): explicitly set service worker scope (#6377)

* fix(EAR-3809): explicitly set service worker scope, to be the root origin instead of the static nested scope.

* fix(EAR-3809): make scope as narrow as possible, and claim() with the newest worker loaded, in order to debug failing tests.

* fix(EAR-3809): browser security has scoping rules that can only be narrowed, not broadened.  Therefore the bundle which loads the worker, and the worker itself, has to not be within the static scope.

Author: wiedld

src/shared/components/CSVExportButton.tsx

@@ -25,7 +25,15 @@ class CSVExportButton extends PureComponent<Props, State> {
 
     if (props.workerRegistration) {
       ;(props.workerRegistration as Promise<ServiceWorkerRegistration>).then(
-        () => this.setState({browserSupportsDownload: true}),
+        registrationResult => {
+          if (registrationResult.active.state == 'activated') {
+            this.setState({browserSupportsDownload: true})
+          } else {
+            console.error(
+              'Feature not available, because ServiceWorker is registered but inactive.'
+            )
+          }
+        },
         function (err) {
           console.error(
             'Feature not available, because ServiceWorker registration failed: ',

src/shared/contexts/app.tsx

@@ -28,9 +28,14 @@ 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'
 
-import {registerServiceWorker} from 'src/shared/workers/serviceWorker'
-
-const workerRegistration = registerServiceWorker()
+let workerRegistration
+import(
+  /* webpackPreload: true */
+  /* webpackChunkName: "setup-interceptor" */
+  'src/shared/workers/serviceWorker'
+).then(
+  ({registerServiceWorker}) => (workerRegistration = registerServiceWorker())
+)
 
 interface AppSettingContextType {
   timeZone: TimeZone

src/shared/workers/downloadHelper.ts

@@ -67,3 +67,10 @@ self.addEventListener('fetch', function (event: any) {
     event.respondWith(fetch(event.request))
   }
 })
+
+/// Have the latest version register (including updated registration settings).
+self.addEventListener('activate', event => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  event.waitUntil(clients.claim())
+})

src/shared/workers/serviceWorker.ts

@@ -6,7 +6,9 @@ export const registerServiceWorker = (): Promise<ServiceWorkerRegistration> => {
     workerRegistration = navigator.serviceWorker.register(
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      new URL('../workers/downloadHelper.ts', import.meta.url)
+      new URL('../workers/downloadHelper.ts', import.meta.url),
+      {scope: '/api/v2/query'}
+      /* webpackChunkName: "interceptor" */
     )
   }
 

tsconfig.json

@@ -14,7 +14,6 @@
     "noImplicitUseStrict": false,
     "noUnusedParameters": true,
     "noUnusedLocals": true,
-    "removeComments": true,
     "importHelpers": true,
     "noLib": false,
     "noEmitHelpers": true,

webpack.fast.ts

@@ -7,5 +7,10 @@ module.exports = merge(common, {
   mode: 'none',
   output: {
     filename: `${STATIC_DIR}[contenthash:10].js`,
+    chunkFilename: pathData => {
+      return ['interceptor', 'setup-interceptor'].includes(pathData.chunk.name)
+        ? '[contenthash:10].js'
+        : `${STATIC_DIR}[contenthash:10].js`
+    },
   },
 })

webpack.prod.ts

@@ -15,6 +15,11 @@ module.exports = mergeWebpack(commonWebpack, {
   devtool: 'source-map',
   output: {
     filename: `${DIRECTORY_STATIC}[contenthash:10].js`,
+    chunkFilename: pathData => {
+      return ['interceptor', 'setup-interceptor'].includes(pathData.chunk.name)
+        ? '[contenthash:10].js'
+        : `${DIRECTORY_STATIC}[contenthash:10].js`
+    },
   },
   module: {
     rules: [