Use fallback for Cache API if not supported in CI

Author: MetRonnie

src/components/cylc/workspace/Lumino.vue

@@ -47,6 +47,7 @@ import { watchWithControl } from '@/utils/reactivity'
 import { replacer, reviver } from '@/utils/json'
 import { useDefaultView } from '@/views/views'
 import { eventBus } from '@/services/eventBus'
+import { useWorkspaceLayoutsCache } from '@/composables/cacheStorage'
 
 import '@lumino/default-theme/style'
 
@@ -113,7 +114,7 @@ const resizeObserver = new ResizeObserver(() => {
   boxPanel.update()
 })
 
-const layoutsCache = window.caches.open('workspace-layouts')
+const layoutsCache = useWorkspaceLayoutsCache()
 const layoutWatcher = watchWithControl(views, saveLayout, { deep: true })
 
 onMounted(async () => {

src/composables/cacheStorage.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/** @type {Map<string,Response>} */
+const fallbackStore = new Map()
+
+/**
+ * Returns a Cache object for storing workspace layouts.
+ *
+ * This uses CacheStorage if available, otherwise falls back to a non-persistent store.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Cache
+ */
+export function useWorkspaceLayoutsCache () {
+  return window.caches?.open('workspace-layouts') ?? Promise.resolve({
+    // Fallback for environments without Cache API support (e.g. Cypress Firefox on GH Actions).
+    // Does not persist across page reloads, but oh well.
+    async match (key) {
+      console.error('Cache API not available; falling back to non-persistent store for workspace layouts.')
+      return fallbackStore.get(key)?.clone()
+    },
+    async put (key, value) {
+      fallbackStore.delete(key)
+      fallbackStore.set(key, value)
+    },
+    async delete (key) {
+      fallbackStore.delete(key)
+    },
+    async keys () {
+      return Array.from(fallbackStore.keys())
+    },
+  })
+}

tests/e2e/specs/workspace.cy.js

@@ -107,7 +107,6 @@ describe('Workspace view and component/widget', () => {
   })
 
   it('Saves and restores layout when navigating', () => {
-    cy.clearLayoutsCache(false)
     // We will drag tab to the right to split into 2 panes
     const dragOptions = { clientX: 950, clientY: 330, force: true }
 
@@ -169,9 +168,15 @@ describe('Workspace view and component/widget', () => {
     cy.visit('/#/workspace/one')
     expectRememberedLayout()
 
-    // Refresh
-    cy.reload()
-    expectRememberedLayout()
+    cy.window().then((win) => {
+      if (win.caches) {
+        // Test page refresh
+        cy.reload()
+        expectRememberedLayout()
+      } else {
+        cy.log('Cache API not supported; skipping page refresh test.')
+      }
+    })
   })
 
   it('Resets layout', () => {

tests/e2e/support/commands.js

@@ -41,13 +41,11 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-Cypress.Commands.add('clearLayoutsCache', (value = true) => {
-  // Clear any stored workspace layouts (or not)
-  Cypress.env('clearLayoutsCache', value)
-})
-
-Cypress.on('window:before:load', async (win) => {
-  if (Cypress.env('clearLayoutsCache')) {
-    await win.caches.delete('workspace-layouts')
-  }
+Cypress.Commands.add('clearLayoutsCache', () => {
+  // Clear any stored workspace layouts
+  cy.window().then((win) => new Cypress.Promise(
+    (resolve) => {
+      win.caches?.delete('workspace-layouts')?.then(resolve) ?? resolve()
+    }
+  ))
 })