Merge pull request #220 from remix-pwa/dev

Moving `sw` new patch upstream

packages/sw/CHANGELOG.md

@@ -1,3 +1,10 @@
+## @remix-pwa/sw 3.0.5-dev.1 (2024-05-06)
+
+
+### Bug Fixes
+
+* **sw:** added `ignoreRoutes` option to strategy 7ea97c0
+
 ## @remix-pwa/sw 3.0.4 (2024-05-05)
 
 

packages/sw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-pwa/sw",
-  "version": "3.0.4",
+  "version": "3.0.5-dev.1",
   "description": "Service Worker APIs and utilities for Remix PWA",
   "repository": {
     "type": "git",

packages/sw/src/cache/BaseStrategy.ts

@@ -41,6 +41,22 @@ export abstract class BaseStrategy implements CacheStrategy {
     return request;
   }
 
+  /**
+   * A utility method to ensure the route is supported by the strategy.
+   *
+   * @param request - The request to check.
+   * @returns {boolean} `true` if the route is supported, `false` otherwise.
+   */
+  protected isRouteSupported(request: Request): boolean {
+    const url = new URL(request.url);
+
+    if (this.options.ignoreRoutes && this.options.ignoreRoutes.length) {
+      return !this.options.ignoreRoutes.some(pattern => url.pathname.match(pattern));
+    }
+
+    return true;
+  }
+
   /**
    * Abstract method to handle requests.
    * Must be implemented by subclasses.

packages/sw/src/cache/CacheFirst.ts

@@ -23,7 +23,7 @@ export class CacheFirst extends BaseStrategy {
   async handleRequest(req: Request | string): Promise<Response> {
     const request = this.ensureRequest(req);
 
-    if (!isHttpRequest(request)) {
+    if (!isHttpRequest(request) || !this.isRouteSupported(request)) {
       return fetch(request);
     }
 

packages/sw/src/cache/CacheOnly.ts

@@ -29,7 +29,7 @@ export class CacheOnly extends BaseStrategy {
   async handleRequest(req: Request | string): Promise<Response> {
     const request = this.ensureRequest(req);
 
-    if (!isHttpRequest(request)) {
+    if (!isHttpRequest(request) || !this.isRouteSupported(request)) {
       return fetch(request);
     }
 

packages/sw/src/cache/NetworkFirst.ts

@@ -1,5 +1,5 @@
 import { isHttpRequest } from '../utils/utils.js';
-import { BaseStrategy, CACHE_TIMESTAMP_HEADER } from './BaseStrategy.js';
+import { BaseStrategy } from './BaseStrategy.js';
 import type { CacheOptions, CacheableResponseOptions, NetworkFriendlyOptions } from './types.js';
 import { mergeHeaders } from './utils.js';
 
@@ -25,7 +25,7 @@ export class NetworkFirst extends BaseStrategy {
   async handleRequest(req: Request | string): Promise<Response> {
     const request = this.ensureRequest(req);
 
-    if (!isHttpRequest(request)) {
+    if (!isHttpRequest(request) || !this.isRouteSupported(request)) {
       return fetch(request);
     }
 

packages/sw/src/cache/StaleWhileRevalidate.ts

@@ -26,7 +26,7 @@ export class StaleWhileRevalidate extends BaseStrategy {
   async handleRequest(req: Request | string): Promise<Response> {
     const request = this.ensureRequest(req);
 
-    if (!isHttpRequest(request)) {
+    if (!isHttpRequest(request) || !this.isRouteSupported(request)) {
       return fetch(request);
     }
 

packages/sw/src/cache/__test__/base-strategy.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable dot-notation */
 import { afterAll, afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { BaseStrategy } from '../BaseStrategy.js';
@@ -75,6 +76,15 @@ describe('BaseStrategy Testing Suite', () => {
     expect(strategy._ensureRequest(urlRequest)).toBeInstanceOf(Request);
   });
 
+  test('checks if the route is supported by the strategy', () => {
+    const strategy = new MockStrategy('test-cache', { ignoreRoutes: [/\/api\//] });
+    const request = new Request('https://example.com/assets/image.jpg');
+    const unsupportedRequest = new Request('https://example.com/api/data');
+
+    expect(strategy['isRouteSupported'](request)).toBe(true);
+    expect(strategy['isRouteSupported'](unsupportedRequest)).toBe(false);
+  });
+
   test('cleans up the cache based on maxAgeSeconds option', async () => {
     const strategy = new MockStrategy('test-cache', { maxAgeSeconds: 1 }); // 1 second for testing
     const mockCache = {

packages/sw/src/cache/types.ts

@@ -2,8 +2,18 @@
  * Defines the options for cache strategies.
  */
 export interface CacheOptions {
+  /**
+   * The maximum age of a cached item in seconds.
+   */
   maxAgeSeconds?: number;
+  /**
+   * The maximum number of items to store in the cache.
+   */
   maxEntries?: number;
+  /**
+   * A list of routes to ignore when caching.
+   */
+  ignoreRoutes?: string[] | RegExp[];
 }
 
 export type CacheableResponseOptions = {

packages/sw/src/message/NavigationHandler.ts

@@ -56,7 +56,7 @@ export class NavigationHandler extends MessageHandler {
   private async handleNavigation(event: any) {
     const { data } = event;
     const { isSsr, location } = data.payload;
-    const documentUrl = location.pathname + location.search + location.hash;
+    const documentUrl: string = location.pathname + location.search + location.hash;
 
     if (
       (this.allowList.length > 0 && !this.allowList.some(pattern => documentUrl.match(pattern))) ||

packages/sw/src/types.ts

@@ -3,8 +3,6 @@ import type { ActionFunction, AppLoadContext, DataFunctionArgs, LoaderFunction }
 import type { ServerRouteModule } from '@remix-run/server-runtime/dist/routeModules.js';
 import type { ServerRoute } from '@remix-run/server-runtime/dist/routes.js';
 
-import type { Logger } from './logger/logger.js';
-
 /**
  * An object of unknown type for routes worker actions and loaders provided
  * by the worker's `getLoadContext` function.
@@ -97,7 +95,7 @@ export type DefaultErrorHandler = (error: Error, args: WorkerDataFunctionArgs) =
  * The `getLoadContext` function used to create a globally accessible
  * `context` object for worker actions and loaders.
  */
-export type GetLoadContextFunction = (event: FetchEvent) => WorkerLoadContext;
+export type GetLoadContextFunction = (event: FetchEvent) => AppLoadContext;
 
 declare global {
   interface ServiceWorkerGlobalScope {

playground/package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@remix-pwa/client": "3.0.4",
     "@remix-pwa/push": "2.10.0",
-    "@remix-pwa/sw": "3.0.3",
+    "@remix-pwa/sw": "3.0.4",
     "@remix-pwa/sync": "2.0.2",
     "@remix-pwa/worker-runtime": "2.1.1",
     "@remix-run/node": "^2.8.1",