fix: refresh and ttl edgecases (#841)

* fix: hard refresh uses service-worker

* test: remove unused FrameLocator types

* fix: registrationTTL unregisters sw after returning response

* fix: ttl expiry race condition, subdomain+path hard refresh

* fix: config page request recognition & e2e tests

* fix: remove unnecessary renderUI call

Author: SgtPooki

src/index.tsx

@@ -23,24 +23,49 @@ async function renderUi (): Promise<void> {
 
 async function main (): Promise<void> {
   if (!('serviceWorker' in navigator)) {
-    // no service worker, render the UI
+    // no service worker support, render the UI
     await renderUi()
     return
   }
 
   const url = new URL(window.location.href)
   const state = await getStateFromUrl(url)
 
-  if (!state.requestForContentAddressedData) {
+  if (!state.requestForContentAddressedData || state.isConfigRequest) {
     // not a request for content addressed data, render the UI
     await renderUi()
     return
   } else if (state.hasConfig) {
-    // user is requesting content addressed data and has the config already, render the UI
-    await renderUi()
+    // user is requesting content addressed data and has the config already
+    // we need to ensure a SW is registered and let it handle the request
+    const translatedUrl = translateIpfsRedirectUrl(url)
+    if (state.isHardRefresh) {
+      // this is a hard refresh, we need to reload to ensure the service worker captures the request.
+      window.location.replace(translatedUrl.href) // replace with translated URL to remove helia-sw param
+      return
+    }
+    // else, there is some other reason why sw didn't capture the request, ensure sw is registered and reload
+    try {
+      await ensureSwScope()
+      await registerServiceWorker()
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('helia:sw-gateway:index: error ensuring sw scope and registration', err)
+    }
+    window.location.replace(translatedUrl.href) // replace with translated URL to remove helia-sw param
     return
   }
-  // the user is requesting content addressed data and does not have the config, continue with the config loading flow
+
+  /**
+   * **********************************************
+   * From here on, we are handling the case where:
+   * - the user is requesting content addressed data
+   * - the user does not have the config
+   *
+   * We need to load the config, which may involve a redirect to the root domain
+   * before the service worker can be registered
+   * ***********************************************
+   */
   loadingIndicatorElement?.classList.remove('hidden')
 
   if (state.hasConfig && state.isIsolatedOrigin) {

src/lib/constants.ts

@@ -12,6 +12,11 @@ export const QUERY_PARAMS = {
 }
 
 export const HASH_FRAGMENTS = {
+  /**
+   * The hash fragment that is used to request the UI config page.
+   */
+  IPFS_SW_CONFIG_UI: 'ipfs-sw-config',
+
   /**
    * The hash fragment that is used to send the config to the subdomain service worker.
    */

src/lib/first-hit-helpers.ts

@@ -19,9 +19,24 @@ interface NavigationState {
   /**
    * If the user is requesting content addressed data (instead of service worker gateway UI), this will be true.
    *
-   * e.g. sw-gateway landing page, ipfs-sw-config view, ipfs-sw-origin-isolation-warning view, etc.
+   * e.g. NOT the sw-gateway landing page, ipfs-sw-config view, ipfs-sw-origin-isolation-warning view, etc.
    */
   requestForContentAddressedData: boolean
+
+  /**
+   * If the user is requesting content addressed data, the current URL is an isolated subdomain, and we already have the config,
+   * this will be true iff navigator.serviceWorker.controller is null.
+   *
+   * In this case, we need to reload the page to ensure the service worker captures the request.
+   *
+   * @see https://www.w3.org/TR/service-workers/#dom-serviceworkercontainer-controller
+   */
+  isHardRefresh: boolean
+
+  /**
+   * If the user is requesting the config, this will be true.
+   */
+  isConfigRequest: boolean
 }
 
 const log = uiLogger.forComponent('first-hit-helpers')
@@ -135,11 +150,6 @@ function isRequestForContentAddressedData (url: URL): boolean {
     // query param request
     return true
   }
-  if (url.hash.includes('/ipfs-sw-config')) {
-    // hash request for UI page, with no path/subdomain/query indicating request for content addressed data
-    // we need to do this after the path/subdomain/query check because we need to ensure the config is properly loaded from the root domain
-    return false
-  }
   return false
 }
 
@@ -154,10 +164,28 @@ export async function getStateFromUrl (url: URL): Promise<NavigationState> {
   const urlHasSubdomainConfigRequest = hasHashFragment(url, HASH_FRAGMENTS.IPFS_SW_SUBDOMAIN_REQUEST) && url.searchParams.get(QUERY_PARAMS.HELIA_SW) != null
   let hasConfig = false
   const supportsSubdomains = await checkSubdomainSupport(url)
+  let isHardRefresh = false
+  let isConfigRequest = false
 
   if (isIsolatedOrigin) {
     // check if indexedDb has config
     hasConfig = await isConfigSet(uiLogger)
+    if (hasConfig) {
+      // Check service worker state
+      const registration = await navigator.serviceWorker.getRegistration()
+      const hasActiveWorker = registration?.active != null
+      const hasControllingWorker = navigator.serviceWorker.controller != null
+
+      if (hasActiveWorker && !hasControllingWorker) {
+        // this is a hard refresh
+        isHardRefresh = true
+      }
+    }
+  }
+
+  // check if url.hash matches exactly
+  if (url.hash === `#/${HASH_FRAGMENTS.IPFS_SW_CONFIG_UI}`) {
+    isConfigRequest = true
   }
 
   return {
@@ -168,7 +196,9 @@ export async function getStateFromUrl (url: URL): Promise<NavigationState> {
     subdomainParts: { parentDomain, id, protocol },
     compressedConfig: getHashFragment(url, HASH_FRAGMENTS.IPFS_SW_CFG),
     supportsSubdomains,
-    requestForContentAddressedData: isRequestForContentAddressedData(url)
+    requestForContentAddressedData: isRequestForContentAddressedData(url),
+    isHardRefresh,
+    isConfigRequest
   } satisfies NavigationState
 }
 

src/lib/get-subdomain-parts.ts

@@ -1,8 +1,23 @@
 import { dnsLinkLabelDecoder, isInlinedDnsLink } from './dns-link-labels.js'
 
 export interface UrlParts {
+  /**
+   * The CID or DNSLink name or peer ID.
+   *
+   * e.g. `bafyfoo` for `bafyfoo.ipfs.example.com`
+   */
   id: string | null
+  /**
+   * The protocol of the subdomain.
+   *
+   * e.g. `ipfs` for `bafyfoo.ipfs.example.com` or `ipns` for `bafyfoo.ipns.example.com`
+   */
   protocol: string | null
+  /**
+   * The parent domain of the subdomain.
+   *
+   * e.g. `example.com` for `bafyfoo.ipfs.example.com`
+   */
   parentDomain: string
 }
 

src/sw.ts

@@ -188,7 +188,19 @@ self.addEventListener('fetch', (event) => {
   event.waitUntil(requestRouting(event, url).then(async (shouldHandle) => {
     if (shouldHandle) {
       log.trace('handling request for %s', url)
-      event.respondWith(getResponseFromCacheOrFetch(event))
+      event.respondWith(getResponseFromCacheOrFetch(event).then(async (response) => {
+        if (!isServiceWorkerRegistrationTTLValid()) {
+          log('Service worker registration TTL expired, unregistering service worker')
+          const clonedResponse = response.clone()
+          event.waitUntil(
+            clonedResponse.blob().then(() => {
+              log('Service worker registration TTL expired, unregistering after response consumed')
+            }).finally(() => self.registration.unregister())
+          )
+          return response
+        }
+        return response
+      }))
     } else {
       log.trace('not handling request for %s', url)
     }
@@ -201,11 +213,7 @@ self.addEventListener('fetch', (event) => {
  ******************************************************
  */
 async function requestRouting (event: FetchEvent, url: URL): Promise<boolean> {
-  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)) {
+  if (isUnregisterRequest(event.request.url)) {
     event.waitUntil(self.registration.unregister())
     event.respondWith(new Response('Service worker unregistered', {
       status: 200
@@ -759,6 +767,10 @@ function isServiceWorkerRegistrationTTLValid (): boolean {
     /**
      * When we unregister the service worker, the a new one will be installed on the next page load.
      *
+     * Note: returning true here means if the user is not online, we will not unregister the service worker.
+     * However, browsers will have `navigator.onLine === true` if connected to a LAN that is not internet-connected,
+     * so we may want to be smarter about this in the future.
+     *
      * @see https://github.com/ipfs/service-worker-gateway/issues/724
      */
     return true

test-e2e/fixtures/capture-all-sw-responses.ts

@@ -32,7 +32,6 @@ export async function * captureAllSwResponses (page: Page, signal: AbortSignal):
       responseQueue.push(response)
     }
   }
-
   page.on('response', onResponse)
 
   try {

test-e2e/fixtures/locators.ts

@@ -1,10 +1,7 @@
-import type { FrameLocator, Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 export interface GetLocator {
-  (page: Page | FrameLocator): Locator
-}
-export interface GetFrameLocator {
-  (page: Page | FrameLocator): FrameLocator
+  (page: Page): Locator
 }
 
 /**

test-e2e/layout.test.ts

@@ -38,7 +38,8 @@ test.describe('smoketests', () => {
 testSubdomainRouting.describe('smoketests', () => {
   testSubdomainRouting.describe('config section on subdomains', () => {
     // TODO: remove this test because we don't want to support config page on subdomains. See
-    testSubdomainRouting('only config and header are visible on /#/ipfs-sw-config requests', async ({ page, baseURL, rootDomain, protocol }) => {
+    testSubdomainRouting('only config and header are visible on /#/ipfs-sw-config requests', async ({ page, baseURL, rootDomain, protocol, browserName }) => {
+      testSubdomainRouting.skip(browserName === 'firefox', 'Playwright doesn\'t treat hard refreshes correctly in Firefox.')
       await page.goto(baseURL, { waitUntil: 'networkidle' })
       await waitForServiceWorker(page, baseURL)
       await page.goto(`${protocol}//bafkqablimvwgy3y.ipfs.${rootDomain}/#/ipfs-sw-config`, { waitUntil: 'networkidle' })

test-e2e/smoke-test.test.ts

@@ -101,4 +101,37 @@ test.describe('smoke test', () => {
 
     expect(noRegistration).toBe(true)
   })
+
+  test('service worker unregisters automatically when ttl expires', async ({ page, baseURL, protocol, rootDomain, swResponses }) => {
+    await page.goto(baseURL, { waitUntil: 'networkidle' })
+    await waitForServiceWorker(page, baseURL)
+    // set the ttl in milliseconds
+    await setConfig({ page, config: { serviceWorkerRegistrationTTL: 1400 } })
+
+    await page.goto(`${protocol}//bafybeib3ffl2teiqdncv3mkz4r23b5ctrwkzrrhctdbne6iboayxuxk5ui.ipfs.${rootDomain}/root2/root3/root4/`, { waitUntil: 'networkidle' })
+    await waitForServiceWorker(page, baseURL)
+    expect(swResponses.length).toBe(1)
+    const response = swResponses[swResponses.length - 1]
+    expect(response?.status()).toBe(200)
+    expect(response?.headers()['content-type']).toBe('text/html; charset=utf-8')
+    expect(await response?.text()).toContain('hello')
+
+    // wait for the ttl to expire
+    await page.waitForTimeout(1500)
+
+    const response2 = await page.reload({ waitUntil: 'networkidle' })
+    expect(swResponses.length).toBe(2)
+    expect(response2?.status()).toBe(200)
+    expect(response2?.headers()['content-type']).toBe('text/html; charset=utf-8')
+    expect(await response2?.text()).toContain('hello')
+
+    // wait for the TTL invalid setTimeout to run.
+    await page.waitForTimeout(100)
+
+    const noServiceWorkerRegistration = await page.evaluate(async () => {
+      return await window.navigator.serviceWorker.getRegistration() === undefined
+    })
+
+    expect(noServiceWorkerRegistration).toBe(true)
+  })
 })