feat: add caching to service worker

src/sw.ts

@@ -32,6 +32,13 @@ interface GetVerifiedFetchUrlOptions {
   path: string
 }
 
+interface StoreReponseInCacheOptions {
+  response: Response
+  cacheKey: string
+  isMutable: boolean
+  cache: Cache
+}
+
 /**
  ******************************************************
  * "globals"
@@ -40,6 +47,8 @@ interface GetVerifiedFetchUrlOptions {
 declare let self: ServiceWorkerGlobalScope
 let verifiedFetch: VerifiedFetch
 const channel = new HeliaServiceWorkerCommsChannel('SW')
+const IMMUTABLE_CACHE = 'IMMUTABLE_CACHE'
+const MUTABLE_CACHE = 'MUTABLE_CACHE'
 const urlInterceptRegex = [new RegExp(`${self.location.origin}/ip(n|f)s/`)]
 const updateVerifiedFetch = async (): Promise<void> => {
   verifiedFetch = await getVerifiedFetch()
@@ -85,6 +94,7 @@ self.addEventListener('fetch', (event) => {
   const request = event.request
   const urlString = request.url
   const url = new URL(urlString)
+  log('helia-sw: incoming request url: %s:', event.request.url)
 
   if (isConfigPageRequest(url) || isSwAssetRequest(event)) {
     // get the assets from the server
@@ -98,10 +108,9 @@ self.addEventListener('fetch', (event) => {
   }
 
   if (isRootRequestForContent(event)) {
-    // intercept and do our own stuff...
     event.respondWith(fetchHandler({ path: url.pathname, request }))
   } else if (isSubdomainRequest(event)) {
-    event.respondWith(fetchHandler({ path: url.pathname, request }))
+    event.respondWith(getResponseFromCacheOrFetch(event))
   }
 })
 
@@ -177,13 +186,93 @@ function isSwAssetRequest (event: FetchEvent): boolean {
   return isActualSwAsset
 }
 
+/**
+ * Set the expires header on a response object to a timestamp based on the passed ttl interval
+ */
+function setExpiresHeader (response: Response, ttlSeconds: number = 3600): void {
+  const expirationTime = new Date(Date.now() + ttlSeconds * 1000)
+
+  response.headers.set('Expires', expirationTime.toUTCString())
+}
+
+/**
+ * Checks whether a cached response object has expired by looking at the expires header
+ * Note that this ignores the Cache-Control header since the expires header is set by us
+ */
+function hasExpired (response: Response): boolean {
+  const expiresHeader = response.headers.get('Expires')
+
+  if (expiresHeader == null) {
+    return false
+  }
+
+  const expires = new Date(expiresHeader)
+  const now = new Date()
+
+  if (expires < now) {
+    return true
+  }
+
+  return false
+}
+
+async function getResponseFromCacheOrFetch (event: FetchEvent): Promise<Response> {
+  const { protocol } = getSubdomainParts(event.request.url)
+  const url = new URL(event.request.url)
+  const isMutable = protocol === 'ipns'
+  const cacheKey = `${event.request.url}-${event.request.headers.get('Accept') ?? ''}`
+  trace('helia-sw: cache key: %s', cacheKey)
+  const cache = await caches.open(isMutable ? MUTABLE_CACHE : IMMUTABLE_CACHE)
+  const cachedResponse = await cache.match(cacheKey)
+
+  if ((cachedResponse != null) && !hasExpired(cachedResponse)) {
+  // If there is an entry in the cache for event.request,
+  // then response will be defined and we can just return it.
+    log('helia-ws: cached response HIT for %s (expires: %s) %o', cacheKey, cachedResponse.headers.get('Expires'), cachedResponse)
+
+    trace('helia-ws: updating cache for %s in the background', cacheKey)
+    // 👇 update cache in the background (don't await)
+    fetchHandler({ path: url.pathname, request: event.request })
+      .then(async response => storeReponseInCache({ response, isMutable, cache, cacheKey }))
+      .catch(err => {
+        err('helia-ws: failed updating response in cache for %s in the background', cacheKey, err)
+      })
+
+    return cachedResponse
+  }
+
+  // 👇 fetch because no cached response was found
+  const response = await fetchHandler({ path: url.pathname, request: event.request })
+
+  void storeReponseInCache({ response, isMutable, cache, cacheKey }).catch(err => {
+    err('helia-ws: failed storing response in cache for %s', cacheKey, err)
+  })
+
+  return response
+}
+
+async function storeReponseInCache ({ response, isMutable, cache, cacheKey }: StoreReponseInCacheOptions): Promise<void> {
+  // 👇 only cache successful responses
+  if (!response.ok) {
+    return
+  }
+
+  // Clone the response since streams can only be consumed once.
+  const respToCache = response.clone()
+
+  if (isMutable) {
+    trace('helia-ws: setting expires header on response key %s before storing in cache', cacheKey)
+    // 👇 Set expires header to an hour from now for mutable (ipns://) resources
+    // Note that this technically breaks HTTP semantics, whereby the cache-control max-age takes precendence
+    // Seting this header is only used by the service worker asd a mechanism similar to stale-while-revalidate
+    setExpiresHeader(respToCache, 3600)
+  }
+
+  log('helia-ws: storing cache key %s in cache', cacheKey)
+  void cache.put(cacheKey, respToCache)
+}
+
 async function fetchHandler ({ path, request }: FetchHandlerArg): Promise<Response> {
-  /**
-   * > Any global variables you set will be lost if the service worker shuts down.
-   *
-   * @see https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/lifecycle
-   */
-  verifiedFetch = verifiedFetch ?? await getVerifiedFetch()
   // test and enforce origin isolation before anything else is executed
   const originLocation = await findOriginIsolationRedirect(new URL(request.url))
   if (originLocation !== null) {
@@ -197,6 +286,13 @@ async function fetchHandler ({ path, request }: FetchHandlerArg): Promise<Respon
     })
   }
 
+  /**
+   * > Any global variables you set will be lost if the service worker shuts down.
+   *
+   * @see https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/lifecycle
+   */
+  verifiedFetch = verifiedFetch ?? await getVerifiedFetch()
+
   /**
    * Note that there are existing bugs regarding service worker signal handling:
    * * https://bugs.chromium.org/p/chromium/issues/detail?id=823697