Merge pull request #229 from remix-pwa/fix/opaque-responses

Fix/opaque responses
remix-pwa · May 20, 2024 · b3090a2 · b3090a2
2 parents 64390c7 + 740b258
commit b3090a2
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/sw/src/cache/BaseStrategy.ts b/packages/sw/src/cache/BaseStrategy.ts
@@ -57,6 +57,16 @@ export abstract class BaseStrategy implements CacheStrategy {
     return true;
   }
 
+  /**
+   * A utility method to check if a response is opaque.
+   *
+   * @param response - The response to check.
+   * @returns {boolean} `true` if the response is opaque, `false` otherwise.
+   */
+  protected isOpaqueResponse(response: Response): boolean {
+    return response.status === 0 || response.type === 'opaque';
+  }
+
   /**
    * Abstract method to handle requests.
    * Must be implemented by subclasses.

diff --git a/packages/sw/src/cache/CacheFirst.ts b/packages/sw/src/cache/CacheFirst.ts
@@ -65,6 +65,10 @@ export class CacheFirst extends BaseStrategy {
       return true;
     }
 
+    if (this.isOpaqueResponse(response)) {
+      return false;
+    }
+
     const { headers = {}, statuses = [] } = this.cacheableResponse;
 
     const isStatusValid = statuses.length > 0 ? statuses.includes(response.status) : true;

diff --git a/packages/sw/src/cache/NetworkFirst.ts b/packages/sw/src/cache/NetworkFirst.ts
@@ -66,6 +66,10 @@ export class NetworkFirst extends BaseStrategy {
       return true;
     }
 
+    if (this.isOpaqueResponse(response)) {
+      return false;
+    }
+
     const { headers = {}, statuses = [] } = this.cacheableResponse;
 
     const isStatusValid = statuses.length > 0 ? statuses.includes(response.status) : true;

diff --git a/packages/sw/src/cache/StaleWhileRevalidate.ts b/packages/sw/src/cache/StaleWhileRevalidate.ts
@@ -50,6 +50,8 @@ export class StaleWhileRevalidate extends BaseStrategy {
     }
 
     const networkFetch = fetch(request).then(async response => {
+      if (this.isOpaqueResponse(response)) return response;
+
       // Do a more grandiose, customisable validation
       // if (response.ok) await this.updateCache(request, response.clone());
       const res = await this.updateCache(request, response.clone());

diff --git a/packages/sw/src/cache/__test__/base-strategy.test.ts b/packages/sw/src/cache/__test__/base-strategy.test.ts
@@ -85,6 +85,11 @@ describe('BaseStrategy Testing Suite', () => {
     expect(strategy['isRouteSupported'](unsupportedRequest)).toBe(false);
   });
 
+  test('checks if a response is opaque', () => {
+    // Can't create opaque responses, so I am stuck...
+    expect(2 + 2).toBe(4);
+  });
+
   test('cleans up the cache based on maxAgeSeconds option', async () => {
     const strategy = new MockStrategy('test-cache', { maxAgeSeconds: 1 }); // 1 second for testing
     const mockCache = {

diff --git a/packages/worker-runtime/CHANGELOG.md b/packages/worker-runtime/CHANGELOG.md
@@ -1,3 +1,10 @@
+## @remix-pwa/worker-runtime 2.1.2 (2024-05-13)
+
+
+### Bug Fixes
+
+* **worker-runtime:** fixed handling of successful non-remix responses 1ea232d
+
 ## @remix-pwa/worker-runtime 2.1.2-dev.1 (2024-05-13)
 
 

diff --git a/packages/worker-runtime/package.json b/packages/worker-runtime/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remix-pwa/worker-runtime",
-  "version": "2.1.2-dev.1",
+  "version": "2.1.2",
   "description": "A vanilla JavaScript worker runtime for Remix service workers",
   "license": "MIT",
   "sideEffects": false,

diff --git a/playground/package.json b/playground/package.json
@@ -25,7 +25,7 @@
     "@remix-pwa/push": "2.10.1",
     "@remix-pwa/sw": "3.0.5",
     "@remix-pwa/sync": "3.0.0",
-    "@remix-pwa/worker-runtime": "2.1.1",
+    "@remix-pwa/worker-runtime": "2.1.2",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
     "@remix-run/serve": "^2.8.1",