From a627129221e148cc5080399952585b8e1fc745a6 Mon Sep 17 00:00:00 2001
From: Nicolai Kuntze <nicolaikuntze@hs-mainz.de>
Date: Mon, 20 Jul 2026 17:32:47 +0200
Subject: [PATCH 1/7] Fix output-control popup not scrollable on mobile

.output-control__inner capped its height with max-height on mobile but
used overflow-y: visible, so a snapserver device/group list taller than
the popup just overflowed off-screen with no way to scroll to it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/scss/components/_output-control.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/scss/components/_output-control.scss b/src/scss/components/_output-control.scss
index 01b973137..b6f194242 100755
--- a/src/scss/components/_output-control.scss
+++ b/src/scss/components/_output-control.scss
@@ -284,7 +284,8 @@
 			padding: 0;
 			border-radius: 0;
 			max-height: calc(100vh - 140px);
-			overflow-y: visible;
+			overflow-y: auto;
+			-webkit-overflow-scrolling: touch;
 
 			@include theme('dark') {
 				box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.6);

From 4ad10b29eedaa56a8a0d36b1425e8b5edfd38c88 Mon Sep 17 00:00:00 2001
From: Nicolai Kuntze <nicolaikuntze@hs-mainz.de>
Date: Mon, 20 Jul 2026 18:32:57 +0200
Subject: [PATCH 2/7] Fix output-control popup top clipped behind mobile
 address bar

max-height: calc(100vh - 140px) sizes the popup using the full
layout viewport, which on mobile includes space the browser's
address bar can occupy. When the address bar is visible, the
actually-visible viewport is shorter than 100vh, so the popup
(anchored to the bottom, growing upward) extends above what's
visible, hiding its top row. Add a 100dvh override, which tracks
the real visible viewport, after the 100vh fallback for browsers
that don't support dvh.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/scss/components/_output-control.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scss/components/_output-control.scss b/src/scss/components/_output-control.scss
index b6f194242..6be0f9d98 100755
--- a/src/scss/components/_output-control.scss
+++ b/src/scss/components/_output-control.scss
@@ -284,6 +284,7 @@
 			padding: 0;
 			border-radius: 0;
 			max-height: calc(100vh - 140px);
+			max-height: calc(100dvh - 140px);
 			overflow-y: auto;
 			-webkit-overflow-scrolling: touch;
 

From 21a647702006eb1793e666aa6a275eee2fb0dcb4 Mon Sep 17 00:00:00 2001
From: Nicolai Kuntze <nicolaikuntze@hs-mainz.de>
Date: Mon, 20 Jul 2026 20:16:51 +0200
Subject: [PATCH 3/7] Fix output-control popup unclosable when auto-expanded on
 mobile

On mobile the popup only auto-opens via PlaybackControls expanding
(force_expanded=true), which also hides the popup's own close button
(display:none in CSS) and suppressed its own click-outside overlay.
That left no way to dismiss just the output-control popup - only
tapping in the empty space above it (collapsing the whole playback
bar) worked. Always render the click-outside overlay regardless of
force_expanded so the popup can close independently.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/js/components/Fields/OutputControl.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/components/Fields/OutputControl.js b/src/js/components/Fields/OutputControl.js
index 0c4d334d9..f531aa12c 100755
--- a/src/js/components/Fields/OutputControl.js
+++ b/src/js/components/Fields/OutputControl.js
@@ -261,7 +261,7 @@ const OutputControl = ({ force_expanded }) => {
   if (expanded) {
     return (
       <span className="output-control">
-        {!force_expanded && <div className="click-outside" onClick={() => setExpanded(false)} />}
+        <div className="click-outside" onClick={() => setExpanded(false)} />
         <button
           className="control speakers active"
           onClick={() => setExpanded(false)}

From 4ebb8e7bd5fee27302d1e994d43a5eedd23f20b7 Mon Sep 17 00:00:00 2001
From: Nicolai Kuntze <nicolaikuntze@hs-mainz.de>
Date: Tue, 21 Jul 2026 06:10:16 +0200
Subject: [PATCH 4/7] Add plain-language context to error notifications

Errors surfaced through handleException often ended up either blank
or as a bare technical fragment (e.g. "Could not load your profile"
with no explanation, or a raw "SyntaxError: JSON.parse: unexpected
end of input"). Add a humanizeError util that recognises common
failure shapes (invalid/empty JSON responses, network failures,
expired/revoked OAuth grants, known HTTP status codes) and prefixes
the description with a plain-language explanation, applied centrally
in the HANDLE_EXCEPTION handler so every existing call site benefits.

Also:
- handleException now falls back to a plain Error object's .message
  for the description, and no longer throws when data.error is
  undefined (message derivation had the same unguarded access).
- Wrap the JSON.parse of xhr.responseText in HANDLE_EXCEPTION in a
  try/catch - a non-JSON error response would otherwise throw inside
  the exception handler itself.
- Spotify getMe() and refreshToken() failures now get specific
  messages pointing at expired/revoked authorization, since that was
  the actual root cause behind the vague errors we hit in practice.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/js/services/core/actions.js    |  5 ++-
 src/js/services/core/middleware.js | 18 ++++++--
 src/js/services/spotify/actions.js |  7 +++-
 src/js/util/errors.js              | 67 ++++++++++++++++++++++++++++++
 4 files changed, 91 insertions(+), 6 deletions(-)
 create mode 100644 src/js/util/errors.js

diff --git a/src/js/services/core/actions.js b/src/js/services/core/actions.js
index ff9e80369..21db114fa 100755
--- a/src/js/services/core/actions.js
+++ b/src/js/services/core/actions.js
@@ -8,7 +8,7 @@ export function handleException(message = '', data = {}, description = null, sho
   if (!message) {
     if (data.message) {
       message = data.message;
-    } else if (data.error.message) {
+    } else if (data.error && data.error.message) {
       message = data.error.message;
     }
   }
@@ -19,6 +19,9 @@ export function handleException(message = '', data = {}, description = null, sho
       description = data.error.message;
     } else if (data.error && data.error.description) {
       description = data.error.description;
+    } else if (data.message && data.message !== message) {
+      // Covers plain Error/SyntaxError objects passed straight through as `data`
+      description = data.message;
     }
   }
 
diff --git a/src/js/services/core/middleware.js b/src/js/services/core/middleware.js
index 358f5516a..533caf981 100755
--- a/src/js/services/core/middleware.js
+++ b/src/js/services/core/middleware.js
@@ -11,6 +11,7 @@ import {
   titleCase,
 } from '../../util/helpers';
 import { ensureLoaded } from '../../util/library';
+import { humanizeError } from '../../util/errors';
 import {
   formatTracks,
   formatTrack,
@@ -70,15 +71,26 @@ const CoreMiddleware = (function () {
         // Construct meaningful message and description
         if (!description) {
           if (action.data.xhr && action.data.xhr.responseText) {
-            const xhr_response = JSON.parse(action.data.xhr.responseText);
-            if (xhr_response.error && xhr_response.error.message) {
-              description = xhr_response.error.message;
+            try {
+              const xhr_response = JSON.parse(action.data.xhr.responseText);
+              if (xhr_response.error && xhr_response.error.message) {
+                description = xhr_response.error.message;
+              }
+            } catch (e) {
+              // Response wasn't JSON; fall through to the status line below
+            }
+            if (!description) {
+              description = `${action.data.xhr.status} ${action.data.xhr.statusText}`;
             }
           } else if (action.data.xhr) {
             description = `${action.data.xhr.status} ${action.data.xhr.statusText}`;
           }
         }
 
+        // Add plain-language context to descriptions that are otherwise just
+        // a bare exception message or HTTP status line
+        description = humanizeError(description, action.data);
+
         // Strip out non-essential store info
         delete exported_state.core.albums;
         delete exported_state.core.artists;
diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js
index 0d47a00ed..4ce6aae93 100755
--- a/src/js/services/spotify/actions.js
+++ b/src/js/services/spotify/actions.js
@@ -122,7 +122,9 @@ const request = ({
         },
         (error) => {
           dispatch(coreActions.handleException(
-            error.error,
+            'Could not refresh your Spotify authorization',
+            error,
+            'This usually means your Spotify authorization has expired or been revoked. Try reconnecting Spotify in Settings.',
           ));
 
           reject(error);
@@ -329,8 +331,9 @@ export function getMe() {
         },
         (error) => {
           dispatch(coreActions.handleException(
-            'Could not load your profile',
+            'Could not load your Spotify profile',
             error,
+            'This usually means your Spotify authorization has expired or is invalid. Try reconnecting Spotify in Settings.',
           ));
         },
       );
diff --git a/src/js/util/errors.js b/src/js/util/errors.js
new file mode 100644
index 000000000..42d93d39e
--- /dev/null
+++ b/src/js/util/errors.js
@@ -0,0 +1,67 @@
+// Friendlier explanations for HTTP status codes, keyed by status.
+const HTTP_STATUS_EXPLANATIONS = {
+  0: 'Could not reach the server. Check your network connection, or that the server is running.',
+  400: 'The request was invalid or rejected by the server.',
+  401: 'You are not authenticated, or your session has expired.',
+  403: 'You do not have permission to do that.',
+  404: 'The requested resource could not be found. It may have been removed or renamed.',
+  408: 'The request timed out.',
+  429: 'Too many requests were sent in a short period. Wait a moment and try again.',
+  500: 'The server encountered an internal error.',
+  502: 'The server is temporarily unavailable (bad gateway).',
+  503: 'The server is temporarily unavailable.',
+  504: 'The server took too long to respond (gateway timeout).',
+};
+
+// Common failure signatures that are technically accurate but meaningless to
+// a non-technical reader, mapped to a plain-language explanation of what
+// likely happened.
+const PATTERN_EXPLANATIONS = [
+  {
+    pattern: /unexpected end of (json )?input|json\.parse|unexpected token/i,
+    explanation: 'The server returned an empty or invalid response. This usually means the request failed partway through, your session expired, or the connection was interrupted.',
+  },
+  {
+    pattern: /failed to fetch|networkerror|network request failed|load failed|err_internet_disconnected|err_connection|err_name_not_resolved/i,
+    explanation: 'Could not reach the server. Check your network connection.',
+  },
+  {
+    pattern: /invalid_grant|refresh token expired|grant has been revoked/i,
+    explanation: 'Your authorization for this service has expired or been revoked. Try reconnecting it in Settings.',
+  },
+  {
+    pattern: /timed? ?out/i,
+    explanation: 'The request took too long and timed out.',
+  },
+];
+
+const extractStatus = (data = {}) => {
+  if (data.xhr && typeof data.xhr.status === 'number') return data.xhr.status;
+  if (typeof data.status === 'number') return data.status;
+  return null;
+};
+
+/**
+ * Takes a raw error description (often a bare exception message or HTTP
+ * status line) and, where we recognise the shape of the problem, prefixes it
+ * with a plain-language explanation of the likely cause. Falls back to the
+ * original description untouched when nothing is recognised, so this is
+ * always safe to apply.
+ */
+export function humanizeError(description, data = {}) {
+  if (!description || typeof description !== 'string') return description;
+
+  const matchedPattern = PATTERN_EXPLANATIONS.find(({ pattern }) => pattern.test(description));
+  if (matchedPattern) {
+    return `${matchedPattern.explanation} (${description})`;
+  }
+
+  const status = extractStatus(data);
+  if (status !== null && HTTP_STATUS_EXPLANATIONS[status]) {
+    return `${HTTP_STATUS_EXPLANATIONS[status]} (${description})`;
+  }
+
+  return description;
+}
+
+export default humanizeError;

From 7b3a2d63d0ae381c2c13f984f09b2ab0b5405d1e Mon Sep 17 00:00:00 2001
From: Nicolai Kuntze <nicolaikuntze@hs-mainz.de>
Date: Wed, 5 Aug 2026 10:21:58 +0200
Subject: [PATCH 5/7] Address PR review: move error explanations into
 translation file, use optional chaining

- Humanized error explanations now live under errors.* in en.yaml
  (via i18n()) instead of being hardcoded in JS, so they're
  translatable like the rest of the UI.
- Replace `x && x.y` null checks with optional chaining per review
  feedback.
---
 src/js/locale/en.yaml              | 16 ++++++++++++++
 src/js/services/core/actions.js    |  6 ++---
 src/js/services/core/middleware.js |  2 +-
 src/js/util/errors.js              | 35 ++++++++++--------------------
 4 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/js/locale/en.yaml b/src/js/locale/en.yaml
index 214ddef59..fe54163c7 100755
--- a/src/js/locale/en.yaml
+++ b/src/js/locale/en.yaml
@@ -18,6 +18,22 @@ errors:
   cannot_reorder:
     title: Cannot reorder items
     description: Remove sort/filters and try again
+  invalid_response: The server returned an empty or invalid response. This usually means the request failed partway through, your session expired, or the connection was interrupted.
+  network_unreachable: Could not reach the server. Check your network connection.
+  authorization_expired: Your authorization for this service has expired or been revoked. Try reconnecting it in Settings.
+  request_timeout: The request took too long and timed out.
+  http_status:
+    0: Could not reach the server. Check your network connection, or that the server is running.
+    400: The request was invalid or rejected by the server.
+    401: You are not authenticated, or your session has expired.
+    403: You do not have permission to do that.
+    404: The requested resource could not be found. It may have been removed or renamed.
+    408: The request timed out.
+    429: Too many requests were sent in a short period. Wait a moment and try again.
+    500: The server encountered an internal error.
+    502: The server is temporarily unavailable (bad gateway).
+    503: The server is temporarily unavailable.
+    504: The server took too long to respond (gateway timeout).
 actions:
   play: Play
   play_all: Play all
diff --git a/src/js/services/core/actions.js b/src/js/services/core/actions.js
index 21db114fa..9c35f55c3 100755
--- a/src/js/services/core/actions.js
+++ b/src/js/services/core/actions.js
@@ -8,16 +8,16 @@ export function handleException(message = '', data = {}, description = null, sho
   if (!message) {
     if (data.message) {
       message = data.message;
-    } else if (data.error && data.error.message) {
+    } else if (data.error?.message) {
       message = data.error.message;
     }
   }
   if (!description) {
     if (data.description) {
       description = data.description;
-    } else if (data.error && data.error.message) {
+    } else if (data.error?.message) {
       description = data.error.message;
-    } else if (data.error && data.error.description) {
+    } else if (data.error?.description) {
       description = data.error.description;
     } else if (data.message && data.message !== message) {
       // Covers plain Error/SyntaxError objects passed straight through as `data`
diff --git a/src/js/services/core/middleware.js b/src/js/services/core/middleware.js
index 533caf981..ad64d2df7 100755
--- a/src/js/services/core/middleware.js
+++ b/src/js/services/core/middleware.js
@@ -73,7 +73,7 @@ const CoreMiddleware = (function () {
           if (action.data.xhr && action.data.xhr.responseText) {
             try {
               const xhr_response = JSON.parse(action.data.xhr.responseText);
-              if (xhr_response.error && xhr_response.error.message) {
+              if (xhr_response.error?.message) {
                 description = xhr_response.error.message;
               }
             } catch (e) {
diff --git a/src/js/util/errors.js b/src/js/util/errors.js
index 42d93d39e..3ad65b659 100644
--- a/src/js/util/errors.js
+++ b/src/js/util/errors.js
@@ -1,37 +1,24 @@
-// Friendlier explanations for HTTP status codes, keyed by status.
-const HTTP_STATUS_EXPLANATIONS = {
-  0: 'Could not reach the server. Check your network connection, or that the server is running.',
-  400: 'The request was invalid or rejected by the server.',
-  401: 'You are not authenticated, or your session has expired.',
-  403: 'You do not have permission to do that.',
-  404: 'The requested resource could not be found. It may have been removed or renamed.',
-  408: 'The request timed out.',
-  429: 'Too many requests were sent in a short period. Wait a moment and try again.',
-  500: 'The server encountered an internal error.',
-  502: 'The server is temporarily unavailable (bad gateway).',
-  503: 'The server is temporarily unavailable.',
-  504: 'The server took too long to respond (gateway timeout).',
-};
+import { i18n } from '../locale';
 
 // Common failure signatures that are technically accurate but meaningless to
-// a non-technical reader, mapped to a plain-language explanation of what
-// likely happened.
+// a non-technical reader, mapped to the translation key holding a
+// plain-language explanation of what likely happened.
 const PATTERN_EXPLANATIONS = [
   {
     pattern: /unexpected end of (json )?input|json\.parse|unexpected token/i,
-    explanation: 'The server returned an empty or invalid response. This usually means the request failed partway through, your session expired, or the connection was interrupted.',
+    key: 'errors.invalid_response',
   },
   {
     pattern: /failed to fetch|networkerror|network request failed|load failed|err_internet_disconnected|err_connection|err_name_not_resolved/i,
-    explanation: 'Could not reach the server. Check your network connection.',
+    key: 'errors.network_unreachable',
   },
   {
     pattern: /invalid_grant|refresh token expired|grant has been revoked/i,
-    explanation: 'Your authorization for this service has expired or been revoked. Try reconnecting it in Settings.',
+    key: 'errors.authorization_expired',
   },
   {
     pattern: /timed? ?out/i,
-    explanation: 'The request took too long and timed out.',
+    key: 'errors.request_timeout',
   },
 ];
 
@@ -53,12 +40,14 @@ export function humanizeError(description, data = {}) {
 
   const matchedPattern = PATTERN_EXPLANATIONS.find(({ pattern }) => pattern.test(description));
   if (matchedPattern) {
-    return `${matchedPattern.explanation} (${description})`;
+    const explanation = i18n(matchedPattern.key);
+    if (explanation) return `${explanation} (${description})`;
   }
 
   const status = extractStatus(data);
-  if (status !== null && HTTP_STATUS_EXPLANATIONS[status]) {
-    return `${HTTP_STATUS_EXPLANATIONS[status]} (${description})`;
+  if (status !== null) {
+    const explanation = i18n(`errors.http_status.${status}`);
+    if (explanation) return `${explanation} (${description})`;
   }
 
   return description;

From 61cc0277fc87c6247f494dec3a34def3c300368c Mon Sep 17 00:00:00 2001
From: Nicolai Kuntze <nicolaikuntze@hs-mainz.de>
Date: Fri, 7 Aug 2026 17:31:46 +0200
Subject: [PATCH 6/7] Fix stuck 'Searching Spotify' notification and silent
 library-fetch failures

getSearchResults never resolved its process notification on request
failure or on cancel-button click, leaving it stuck in the UI forever.
The five Spotify library-fetch actions had the same underlying gap
(no rejection handler at all), silently swallowing errors and leaking
stuck process state on any failed request.
---
 src/js/services/spotify/actions.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js
index 4ce6aae93..7d1696c4e 100755
--- a/src/js/services/spotify/actions.js
+++ b/src/js/services/spotify/actions.js
@@ -470,6 +470,10 @@ export function getLibraryMoods(forceRefetch) {
             items_uris: arrayOf('uri', libraryItems),
           }));
         }
+      })
+      .catch((error) => {
+        dispatch(uiActions.processFinished(processKey));
+        dispatch(coreActions.handleException('Could not load library moods', error));
       });
 
     let endpoint = `browse/categories?limit=50&country=${country}&locale=${locale}`;
@@ -644,6 +648,12 @@ export function getSearchResults(query, limit = 50, offset = 0) {
     request({ dispatch, getState, endpoint })
       .then(
         (response) => {
+          const processor = getState().ui.processes[processKey];
+          if (processor && processor.status === 'cancelling') {
+            dispatch(uiActions.processCancelled(processKey));
+            return;
+          }
+
           if (response.tracks !== undefined) {
             dispatch(coreActions.searchResultsLoaded(
               getSearchResultKey({ provider: 'spotify', type: 'tracks', term }),
@@ -679,6 +689,7 @@ export function getSearchResults(query, limit = 50, offset = 0) {
           dispatch(uiActions.processFinished(processKey));
         },
         (error) => {
+          dispatch(uiActions.processFinished(processKey));
           dispatch(coreActions.handleException(
             'Could not load search results',
             error,
@@ -1733,6 +1744,10 @@ export function getLibraryPlaylists(forceRefetch) {
             items_uris: arrayOf('uri', libraryItems),
           }));
         }
+      })
+      .catch((error) => {
+        dispatch(uiActions.processFinished(processKey));
+        dispatch(coreActions.handleException('Could not load library playlists', error));
       });
 
     fetch(`me/playlists?limit=50${forceRefetch ? `&refetch=${Date.now()}` : ''}`);
@@ -1778,6 +1793,10 @@ export function getLibraryAlbums(forceRefetch) {
             items_uris: arrayOf('uri', libraryItems),
           }));
         }
+      })
+      .catch((error) => {
+        dispatch(uiActions.processFinished(processKey));
+        dispatch(coreActions.handleException('Could not load library albums', error));
       });
 
     fetch(`me/albums?limit=50${forceRefetch ? `&refetch=${Date.now()}` : ''}`);
@@ -1825,6 +1844,10 @@ export function getLibraryArtists(forceRefetch) {
             items_uris: arrayOf('uri', libraryItems),
           }));
         }
+      })
+      .catch((error) => {
+        dispatch(uiActions.processFinished(processKey));
+        dispatch(coreActions.handleException('Could not load library artists', error));
       });
 
     fetch(`me/following?type=artist&limit=50${forceRefetch ? `&refetch=${Date.now()}` : ''}`);
@@ -1869,6 +1892,10 @@ export function getLibraryTracks(forceRefetch) {
             items_uris: arrayOf('uri', libraryItems),
           }));
         }
+      })
+      .catch((error) => {
+        dispatch(uiActions.processFinished(processKey));
+        dispatch(coreActions.handleException('Could not load library tracks', error));
       });
 
     fetch(`me/tracks?limit=50${forceRefetch ? `&refetch=${Date.now()}` : ''}`);

From 6bdfe549959e91e1bcda03fe60b10e09a8f22f25 Mon Sep 17 00:00:00 2001
From: Nicolai Kuntze <nicolaikuntze@hs-mainz.de>
Date: Fri, 7 Aug 2026 18:47:15 +0200
Subject: [PATCH 7/7] Make service worker network-first instead of cache-first

The fetch handler served every cached response indefinitely with no
invalidation path: the cache is only purged in 'activate', which only
fires when the service worker script's own bytes change - something a
plain webpack rebuild of app.min.js/app.min.css never does. In
practice, once a browser cached the app bundle on first visit, it kept
serving that exact bundle forever, silently masking every subsequent
deploy (bug fixes included) until a user manually cleared the service
worker/cache storage.

Flip to network-first: always attempt a live fetch first (still
caching successful GET responses under the same blacklist rules as
before), and only fall back to the cache when the network request
itself fails. The cache now serves its intended purpose - an offline
fallback - without being able to hide live updates from users who are
online.
---
 src/service-worker.js | 62 +++++++++++++++++++++----------------------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/service-worker.js b/src/service-worker.js
index ec3f2fa4d..de41ab379 100755
--- a/src/service-worker.js
+++ b/src/service-worker.js
@@ -26,41 +26,39 @@ self.addEventListener('fetch', (event) => {
   const { request } = event;
 
   event.respondWith(
+    caches.open('iris').then((cache) => fetch(request)
+      // Network-first: always prefer a live response so app updates (new
+      // JS/CSS bundles, fresh API data) are visible immediately, rather
+      // than being masked by a stale cache indefinitely. This cache is
+      // now purely an offline fallback, not a source of truth.
+      .then((liveResponse) => {
+        const isBlacklisted = inBlacklist(request.url);
 
-    // Opens Cache objects that start with 'font'.
-    caches.open('iris').then((cache) => cache.match(request)
-      .then((response) => {
-        if (response) {
-          return response;
-        }
-
-        // Not cached, so we make the request, return that and also save response in cache
-        return fetch(request)
-          .then((liveResponse) => {
-            const isBlacklisted = inBlacklist(request.url);
-
-            // Only cache successful GET requests
-            if (
-              !isBlacklisted
-                && request.method === 'GET'
-                && liveResponse.status >= 200
-                && liveResponse.status < 400
-            ) {
-              // Fixes Edge browser "'chrome-extension' is unsupported" issue
-              // See https://stackoverflow.com/questions/49157622/service-worker-typeerror-when-opening-chrome-extension
-              if (!/^https?:$/i.test(new URL(request.url).protocol)) return;
+        // Only cache successful GET requests
+        if (
+          !isBlacklisted
+            && request.method === 'GET'
+            && liveResponse.status >= 200
+            && liveResponse.status < 400
+        ) {
+          // Fixes Edge browser "'chrome-extension' is unsupported" issue
+          // See https://stackoverflow.com/questions/49157622/service-worker-typeerror-when-opening-chrome-extension
+          if (!/^https?:$/i.test(new URL(request.url).protocol)) return liveResponse;
 
-              cache.put(request, liveResponse.clone());
-            } else {
-              console.info(`Not caching ${isBlacklisted ? '(blacklisted) ' : ''}${request.method} ${request.url}`);
-            }
+          cache.put(request, liveResponse.clone());
+        } else {
+          console.info(`Not caching ${isBlacklisted ? '(blacklisted) ' : ''}${request.method} ${request.url}`);
+        }
 
-            return liveResponse;
-          });
+        return liveResponse;
+      })
+      // Network unavailable (offline): fall back to whatever we have cached.
+      .catch(() => cache.match(request).then((cachedResponse) => {
+        if (cachedResponse) {
+          return cachedResponse;
+        }
 
-        // Exceptions from match() or fetch()
-      }).catch((error) => {
-        throw error;
-      })),
+        throw new Error(`Network request failed and no cached response is available for ${request.url}`);
+      }))),
   );
 });