Full Stack Architecture and Integration Questions

// pseudocode (javascript-like)
class ClientCache {
  constructor() {
    this.inMemory = new Map()
    this.db = IndexedDB.open('app-cache') // returns null if unsupported
    this.isOnline = navigator.onLine
    window.addEventListener('online', () => this.handleOnline())
  }

  // internal helpers
  now() { return Date.now() }

  async put(key, value, ttlMs = 5*60*1000, meta = {}) {
    entry = { value, expiresAt: this.now()+ttlMs, meta }
    if (this.db) await this.db.put('cache', key, entry)
    else this.inMemory.set(key, entry)
  }

  async get(key) {
    entry = this.db ? await this.db.get('cache', key) : this.inMemory.get(key)
    if (!entry) return null
    if (entry.expiresAt && this.now() > entry.expiresAt) {
      // return stale if offline, otherwise trigger refresh and return null/placeholder
      if (!this.isOnline) return entry.value  // serve offline reads
      this.invalidate(key)
      return null
    }
    return entry.value
  }

  async invalidate(key) {
    if (this.db) await this.db.delete('cache', key)
    else this.inMemory.delete(key)
  }

  // if online, refresh stale keys using stored etag/lastModified
  async handleOnline() {
    this.isOnline = true
    keys = this.db ? await this.db.keys('cache') : Array.from(this.inMemory.keys())
    for (k of keys) {
      entry = this.db ? await this.db.get('cache', k) : this.inMemory.get(k)
      if (!entry) continue
      // if expired or near-expiry -> attempt conditional fetch
      if (this.now() > entry.expiresAt - 60*1000) {
        headers = {}
        if (entry.meta.etag) headers['If-None-Match']=entry.meta.etag
        if (entry.meta.lastModified) headers['If-Modified-Since']=entry.meta.lastModified
        resp = await fetch(k, { headers })
        if (resp.status == 200) {
          body = await resp.json()
          newMeta = { etag: resp.headers.get('ETag'), lastModified: resp.headers.get('Last-Modified') }
          await this.put(k, body, DEFAULT_TTL, newMeta)
        } else if (resp.status == 304) {
          // not modified -> extend TTL
          await this.put(k, entry.value, DEFAULT_TTL, entry.meta)
        } else if (!resp.ok) {
          // leave stale copy for offline resilience, optionally mark failure
        }
      }
    }
  }
}