feat: add sw registration ttl config (#809)

* fix: use config based service worker registration TTL

* feat: add sw registration TTL config input

* test: fix test and ensure timestamp is available

* chore: minor comment fix

Author: SgtPooki

src/context/config-context.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useCallback, useEffect, useState } from 'react'
-import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultFetchTimeout, defaultGateways, defaultRouters, defaultSupportsSubdomains, getConfig, resetConfig } from '../lib/config-db.js'
+import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultFetchTimeout, defaultGateways, defaultRouters, defaultServiceWorkerRegistrationTTL, defaultSupportsSubdomains, getConfig, resetConfig } from '../lib/config-db.js'
 import { getUiComponentLogger } from '../lib/logger.js'
 import type { ConfigDb } from '../lib/config-db.js'
 import type { ComponentLogger } from '@libp2p/logger'
@@ -26,6 +26,7 @@ export const ConfigContext = createContext<ConfigContextType>({
   debug: defaultDebug(),
   fetchTimeout: defaultFetchTimeout,
   _supportsSubdomains: defaultSupportsSubdomains,
+  serviceWorkerRegistrationTTL: defaultServiceWorkerRegistrationTTL,
   isLoading: true
 })
 
@@ -40,6 +41,7 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement,
   const [enableRecursiveGateways, setEnableRecursiveGateways] = useState(defaultEnableRecursiveGateways)
   const [debug, setDebug] = useState(defaultDebug())
   const [fetchTimeout, setFetchTimeout] = useState(defaultFetchTimeout)
+  const [serviceWorkerRegistrationTTL, setServiceWorkerRegistrationTTL] = useState(defaultServiceWorkerRegistrationTTL)
   const [_supportsSubdomains, setSupportsSubdomains] = useState(defaultSupportsSubdomains)
   const logger = getUiComponentLogger('config-context')
   const log = logger.forComponent('main')
@@ -55,6 +57,7 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement,
     setEnableRecursiveGateways(config.enableRecursiveGateways)
     setDebug(config.debug)
     setFetchTimeout(config.fetchTimeout)
+    setServiceWorkerRegistrationTTL(config.serviceWorkerRegistrationTTL)
   }
   /**
    * We need to make sure that the configDb types are loaded with the values from IDB
@@ -99,6 +102,9 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement,
       case 'fetchTimeout':
         setFetchTimeout(value)
         break
+      case 'serviceWorkerRegistrationTTL':
+        setServiceWorkerRegistrationTTL(value)
+        break
       case '_supportsSubdomains':
         setSupportsSubdomains(value)
         break
@@ -124,6 +130,7 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement,
     enableGatewayProviders,
     enableRecursiveGateways,
     fetchTimeout,
+    serviceWorkerRegistrationTTL,
     debug,
     _supportsSubdomains,
     isLoading

src/lib/config-db.ts

@@ -18,6 +18,16 @@ export interface ConfigDbWithoutPrivateFields extends BaseDbConfig {
    * The timeout for fetching content from the gateway, in milliseconds. User input is in seconds, but we store in milliseconds.
    */
   fetchTimeout: number
+
+  /**
+   * The TTL (time to live) for the service worker, in milliseconds.
+   * This is used to determine if the service worker should be unregistered, in order to trigger a new install.
+   *
+   * @see https://github.com/ipfs/service-worker-gateway/issues/724
+   *
+   * @default 86_400_000 (24 hours)
+   */
+  serviceWorkerRegistrationTTL: number
 }
 
 /**
@@ -38,6 +48,7 @@ export const defaultEnableWss = true
 export const defaultEnableWebTransport = false
 export const defaultEnableGatewayProviders = true
 export const defaultSupportsSubdomains: null | boolean = null
+export const defaultServiceWorkerRegistrationTTL = 86_400_000 // 24 hours
 
 /**
  * The default fetch timeout for the gateway, in seconds.
@@ -64,6 +75,7 @@ export async function resetConfig (logger: ComponentLogger): Promise<void> {
     await configDb.put('enableGatewayProviders', defaultEnableGatewayProviders)
     await configDb.put('debug', defaultDebug())
     await configDb.put('fetchTimeout', defaultFetchTimeout * 1000)
+    await configDb.put('serviceWorkerRegistrationTTL', defaultServiceWorkerRegistrationTTL)
     // leave private/app-only fields as is
   } catch (err) {
     log('error resetting config in db', err)
@@ -88,6 +100,7 @@ export async function setConfig (config: ConfigDbWithoutPrivateFields, logger: C
     await configDb.put('enableGatewayProviders', config.enableGatewayProviders)
     await configDb.put('debug', config.debug ?? defaultDebug())
     await configDb.put('fetchTimeout', config.fetchTimeout ?? (defaultFetchTimeout * 1000))
+    await configDb.put('serviceWorkerRegistrationTTL', config.serviceWorkerRegistrationTTL ?? (defaultServiceWorkerRegistrationTTL * 1000))
     // ignore private/app-only fields
   } catch (err) {
     log('error setting config in db', err)
@@ -119,6 +132,7 @@ export async function getConfig (logger: ComponentLogger): Promise<ConfigDb> {
     let enableGatewayProviders
     let fetchTimeout
     let debug = ''
+    let serviceWorkerRegistrationTTL = defaultServiceWorkerRegistrationTTL
     let _supportsSubdomains = defaultSupportsSubdomains
 
     let config: ConfigDb
@@ -142,6 +156,7 @@ export async function getConfig (logger: ComponentLogger): Promise<ConfigDb> {
       enableGatewayProviders = config.enableGatewayProviders ?? defaultEnableGatewayProviders
       fetchTimeout = config.fetchTimeout ?? (defaultFetchTimeout * 1000)
       _supportsSubdomains ??= config._supportsSubdomains
+      serviceWorkerRegistrationTTL = config.serviceWorkerRegistrationTTL ?? defaultServiceWorkerRegistrationTTL
     } catch (err) {
       log('error loading config from db', err)
     } finally {
@@ -170,6 +185,7 @@ export async function getConfig (logger: ComponentLogger): Promise<ConfigDb> {
       enableGatewayProviders,
       debug,
       fetchTimeout,
+      serviceWorkerRegistrationTTL,
       _supportsSubdomains
     }
   })().finally(() => {

src/pages/config.tsx

@@ -83,14 +83,14 @@ export interface ConfigPageProps extends React.HTMLProps<HTMLElement> {
 
 // Config Page can be loaded either as a page or as a component in the landing helper-ui page
 const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
-  const { setConfig, resetConfig, gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, isLoading: isConfigDataLoading } = useContext(ConfigContext)
+  const { setConfig, resetConfig, gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, serviceWorkerRegistrationTTL, isLoading: isConfigDataLoading } = useContext(ConfigContext)
   const [isSaving, setIsSaving] = useState(false)
   const [error, setError] = useState<Error | null>(null)
   const [resetKey, setResetKey] = useState(0)
 
   const saveConfig = useCallback(async () => {
     try {
-      const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout }
+      const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, serviceWorkerRegistrationTTL }
       setIsSaving(true)
       await storeConfig(config, uiComponentLogger)
       log.trace('config-page: sending RELOAD_CONFIG to service worker')
@@ -104,7 +104,7 @@ const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
     } finally {
       setIsSaving(false)
     }
-  }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout])
+  }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, serviceWorkerRegistrationTTL])
 
   const doResetConfig = useCallback(async () => {
     // we need to clear out the localStorage items and make sure default values are set, and that all of our inputs are updated
@@ -207,6 +207,21 @@ const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
             onChange={(value) => { setConfig('fetchTimeout', value) }}
             resetKey={resetKey}
           />
+          <NumberInput
+            className='e2e-config-page-input e2e-config-page-input-serviceWorkerRegistrationTTL'
+            description='The time for the service worker registration to last, in hours, prior to triggering an explicit unregister event.'
+            label='Service Worker Registration TTL'
+            value={serviceWorkerRegistrationTTL / 1000 / 60 / 60}
+            validationFn={(value) => {
+              if (value < 0.01) {
+                return new Error('Service worker registration TTL must be at least 0.01 hours')
+              }
+              return null
+            }}
+            preSaveFormat={(value) => value * 1000 * 60 * 60}
+            onChange={(value) => { setConfig('serviceWorkerRegistrationTTL', value) }}
+            resetKey={resetKey}
+          />
           <TextInput
             className='e2e-config-page-input e2e-config-page-input-debug'
             description="A string that enables debug logging. Use '*,*:trace' to enable all debug logging."

src/sw.ts

@@ -177,6 +177,12 @@ self.addEventListener('fetch', (event) => {
   const request = event.request
   const urlString = request.url
   const url = new URL(urlString)
+  if (firstInstallTime == null) {
+    // if service worker is shut down, the firstInstallTime may be null
+    log('firstInstallTime is null, getting install timestamp')
+    event.waitUntil(getInstallTimestamp())
+  }
+
   log.trace('incoming request url: %s:', event.request.url)
 
   event.waitUntil(requestRouting(event, url).then(async (shouldHandle) => {
@@ -195,8 +201,8 @@ self.addEventListener('fetch', (event) => {
  ******************************************************
  */
 async function requestRouting (event: FetchEvent, url: URL): Promise<boolean> {
-  if (await isTimebombExpired()) {
-    log.trace('timebomb expired, unregistering service worker')
+  if (!isServiceWorkerRegistrationTTLValid()) {
+    log.trace('Service worker registration TTL expired, unregistering service worker')
     event.waitUntil(self.registration.unregister())
     return false
   } else if (isUnregisterRequest(event.request.url)) {
@@ -748,12 +754,22 @@ function getResponseDetails (response: Response, responseBody: string): Response
   }
 }
 
-async function isTimebombExpired (): Promise<boolean> {
-  firstInstallTime = firstInstallTime ?? await getInstallTimestamp()
+function isServiceWorkerRegistrationTTLValid (): boolean {
+  if (!navigator.onLine) {
+    /**
+     * When we unregister the service worker, the a new one will be installed on the next page load.
+     *
+     * @see https://github.com/ipfs/service-worker-gateway/issues/724
+     */
+    return true
+  }
+  if (firstInstallTime == null || config?.serviceWorkerRegistrationTTL == null) {
+    // no firstInstallTime or serviceWorkerRegistrationTTL, assume new and valid
+    return true
+  }
+
   const now = Date.now()
-  // max life (for now) is 24 hours
-  const timebomb = 24 * 60 * 60 * 1000
-  return now - firstInstallTime > timebomb
+  return now - firstInstallTime <= config.serviceWorkerRegistrationTTL
 }
 
 async function getInstallTimestamp (): Promise<number> {
@@ -789,7 +805,7 @@ async function setOriginIsolationWarningAccepted (): Promise<void> {
     await swidb.put('originIsolationWarningAccepted', true)
     swidb.close()
   } catch (e) {
-    log.error('addInstallTimestampToConfig error: ', e)
+    log.error('setOriginIsolationWarningAccepted error: ', e)
   }
 }
 

test-e2e/config-loading.test.ts

@@ -18,7 +18,8 @@ test.describe('ipfs-sw configuration', () => {
     enableWebTransport: true,
     enableRecursiveGateways: false,
     enableGatewayProviders: false,
-    fetchTimeout: 29 * 1000
+    fetchTimeout: 29 * 1000,
+    serviceWorkerRegistrationTTL: 24 * 60 * 60 * 1000
   }
   test.beforeAll(async () => {
     if (process.env.KUBO_GATEWAY == null || process.env.KUBO_GATEWAY === '') {
@@ -101,7 +102,8 @@ test.describe('ipfs-sw configuration', () => {
       enableWss: !testConfig.enableWss,
       enableWebTransport: !testConfig.enableWebTransport,
       enableRecursiveGateways: !testConfig.enableRecursiveGateways,
-      enableGatewayProviders: !testConfig.enableGatewayProviders
+      enableGatewayProviders: !testConfig.enableGatewayProviders,
+      serviceWorkerRegistrationTTL: 86_400_000
     }
     const compressedConfig = await compressConfig(newConfig)
     const responses: PlaywrightResponse[] = []

test-e2e/fixtures/locators.ts

@@ -24,6 +24,7 @@ export const getConfigGatewaysInput: GetLocator = (page) => page.locator('.e2e-c
 export const getConfigDnsJsonResolvers: GetLocator = (page) => page.locator('.e2e-config-page-input-dnsJsonResolvers')
 export const getConfigDebug: GetLocator = (page) => page.locator('.e2e-config-page-input-debug')
 export const getConfigFetchTimeout: GetLocator = (page) => page.locator('.e2e-config-page-input-fetchTimeout')
+export const getConfigServiceWorkerRegistrationTTL: GetLocator = (page) => page.locator('.e2e-config-page-input-serviceWorkerRegistrationTTL')
 export const getNoServiceWorkerError: GetLocator = (page) => page.locator('.e2e-no-service-worker-error')
 
 export const getHelperUi: GetLocator = (page) => page.locator('.e2e-helper-ui')

test-e2e/fixtures/set-sw-config.ts

@@ -4,7 +4,7 @@
  *
  * Note that this was only tested and confirmed working for subdomain pages.
  */
-import { getConfigDebug, getConfigDnsJsonResolvers, getConfigEnableGatewayProviders, getConfigEnableRecursiveGateways, getConfigEnableWebTransport, getConfigEnableWss, getConfigFetchTimeout, getConfigGatewaysInput, getConfigPage, getConfigPageSaveButton, getConfigRoutersInput } from './locators.js'
+import { getConfigDebug, getConfigDnsJsonResolvers, getConfigEnableGatewayProviders, getConfigEnableRecursiveGateways, getConfigEnableWebTransport, getConfigEnableWss, getConfigFetchTimeout, getConfigGatewaysInput, getConfigPage, getConfigPageSaveButton, getConfigRoutersInput, getConfigServiceWorkerRegistrationTTL } from './locators.js'
 import { waitForServiceWorker } from './wait-for-service-worker.js'
 import type { ConfigDb, ConfigDbWithoutPrivateFields } from '../../src/lib/config-db.js'
 import type { Page } from '@playwright/test'
@@ -91,7 +91,7 @@ export async function getConfigUi ({ page, expectedSwScope }: { page: Page, expe
     }, {})
   })
   const debug = await getConfigDebug(page).locator('textarea').inputValue()
-
+  const serviceWorkerRegistrationTTL = parseInt(await getConfigServiceWorkerRegistrationTTL(page).locator('input').inputValue(), 10) * 1000 * 60 * 60 // convert from hours to milliseconds
   return {
     enableGatewayProviders,
     enableWss,
@@ -101,7 +101,8 @@ export async function getConfigUi ({ page, expectedSwScope }: { page: Page, expe
     gateways,
     dnsJsonResolvers,
     debug,
-    fetchTimeout
+    fetchTimeout,
+    serviceWorkerRegistrationTTL
   }
 }
 
@@ -183,7 +184,8 @@ export async function getConfig ({ page }: { page: Page }): Promise<ConfigDb> {
       enableGatewayProviders: await get('enableGatewayProviders'),
       debug: await get('debug'),
       _supportsSubdomains: await get('_supportsSubdomains'),
-      fetchTimeout: await get('fetchTimeout')
+      fetchTimeout: await get('fetchTimeout'),
+      serviceWorkerRegistrationTTL: await get('serviceWorkerRegistrationTTL')
     }
 
     db.close()

test-e2e/layout.test.ts

@@ -28,7 +28,7 @@ test.describe('smoketests', () => {
       const inputLocator = getConfigPageInput(page)
       // see https://playwright.dev/docs/locators#strictness
       await inputLocator.first().waitFor()
-      expect(await inputLocator.count()).toEqual(9)
+      expect(await inputLocator.count()).toEqual(10)
       const submitButton = getConfigPageSaveButton(page)
       await expect(submitButton).toBeVisible()
     })