remix-pwa · ShafSpecs · Sep 26, 2023 · Sep 26, 2023 · Sep 26, 2023 · Sep 26, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cache/CHANGELOG.md b/packages/cache/CHANGELOG.md
@@ -1,3 +1,15 @@
+## @remix-pwa/cache 2.0.9-dev.1 (2023-09-26)
+
+
+### Bug Fixes
+
+* **cache:** fixed LRU cleanup workflow in cache 2dc0449
+
+
+### Performance Improvements
+
+* **cache:** slightly improved lru algo bec7ca3
+
 ## @remix-pwa/cache 2.0.8 (2023-09-25)
 
 

diff --git a/packages/cache/package.json b/packages/cache/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remix-pwa/cache",
-  "version": "2.0.8",
+  "version": "2.0.9-dev.1",
   "description": "A thin-layered wrapper around the browser's Cache Storage API that supercharges your Remix PWA's caching capabilities.",
   "repository": {
     "type": "git",

diff --git a/packages/cache/src/cache.ts b/packages/cache/src/cache.ts
@@ -153,21 +153,44 @@ export class RemixCache implements CustomCache {
   }
 
   private async _lruCleanup() {
-    if ((await this.length()) >= this._maxItems) {
-      this._values().then(async values => {
-        const val = values.sort((a, b) => {
-          // @ts-ignore
-          const aMeta = a.clone().json().metadata;
-          //  @ts-ignore
-          const bMeta = b.clone().json().metadata;
-
-          return aMeta.accessedAt - bMeta.accessedAt;
-        })[0];
+    const isOverflowing = (await this.length()) >= this._maxItems;
+
+    if (isOverflowing) {
+      if (process.env.NODE_ENV === 'development')
+        console.log(`Cache '${this.name}' is overflowing. Running LRU cleanup.`);
+
+      const cache = await this._openCache();
+      const keys = await cache.keys();
+      const values = (await Promise.all(keys.map(key => cache.match(key)))) as Response[];
+
+      const keyVal = keys.map((key, i) => ({ key, val: values[i] }));
+
+      const comparableArrayPromise = keyVal.map(async val => {
+        const { metadata }: ResponseBody = await val.val.clone().json();
+
+        return {
+          metadata,
+          url: val.key.url,
+        };
+      });
+
+      const comparableArray = await Promise.all(comparableArrayPromise);
+
+      const sortedArr = comparableArray.sort((a, b) => {
+        return a.metadata.accessedAt - b.metadata.accessedAt;
+      });
+
+      const toBeDeletdItems = sortedArr.slice(0, sortedArr.length - this._maxItems + 1);
+
+      if (process.env.NODE_ENV === 'development')
+        console.log(`Deleting ${toBeDeletdItems.length} items from ${this.name} cache.`);
+
+      for (const deleted of toBeDeletdItems) {
         // This runs everytime a new entry is added so that means the array maximum size can never
         // exceed `maxItems + 1` (the new entry + the maxItems), so we can safely slice the array
         // to the maxItems length starting from the first index.
-        this.delete(val.url);
-      });
+        await this.delete(deleted.url);
+      }
     }
   }
 
@@ -371,7 +394,7 @@ export class RemixCache implements CustomCache {
     newHeaders.set('X-Remix-PWA-Original-Content-Type', contentType || 'text/plain');
     newHeaders.set('X-Remix-PWA-TTL', expiresAt.toString());
 
-    response = new Response(
+    const toBeCachedRes = new Response(
       JSON.stringify({
         metadata: {
           accessedAt,
@@ -390,12 +413,17 @@ export class RemixCache implements CustomCache {
       }
     );
 
+    Object.defineProperty(toBeCachedRes, 'url', { value: response.url });
+    Object.defineProperty(toBeCachedRes, 'type', { value: response.type });
+    Object.defineProperty(toBeCachedRes, 'ok', { value: response.ok });
+    Object.defineProperty(toBeCachedRes, 'redirected', { value: response.redirected });
+
     // Cache the updated response and maintain the cache
     try {
       await this._lruCleanup();
-      return await cache.put(request, response.clone());
+      return await cache.put(request, toBeCachedRes.clone());
     } catch (error) {
-      console.error('Failed to put to cache:', error);
+      if (process.env.NODE_ENV === 'development') console.error('Failed to put to cache:', error);
     }
   }
 

diff --git a/packages/dev/CHANGELOG.md b/packages/dev/CHANGELOG.md
@@ -1,4 +1,4 @@
-## @remix-pwa/dev 2.0.25 (2023-09-26)
+## @remix-pwa/dev 2.0.25-dev.1 (2023-09-26)
 
 
 ### Bug Fixes

diff --git a/packages/dev/package.json b/packages/dev/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remix-pwa/dev",
-  "version": "2.0.25",
+  "version": "2.0.25-dev.1",
   "description": "An esbuild compiler for Service Workers in Remix.run",
   "repository": {
     "type": "git",

diff --git a/packages/strategy/CHANGELOG.md b/packages/strategy/CHANGELOG.md
@@ -1,3 +1,13 @@
+## @remix-pwa/strategy 2.1.6-dev.1 (2023-09-26)
+
+
+
+
+
+### Dependencies
+
+* **@remix-pwa/cache:** upgraded to 2.0.9-dev.1
+
 ## @remix-pwa/strategy 2.1.5 (2023-09-25)
 
 

diff --git a/packages/strategy/package.json b/packages/strategy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remix-pwa/strategy",
-  "version": "2.1.5",
+  "version": "2.1.6-dev.1",
   "description": "A collection of service worker strategies for Remix PWA",
   "repository": {
     "type": "git",
@@ -27,14 +27,14 @@
     "node": ">=14.0.0"
   },
   "peerDependencies": {
-    "@remix-pwa/cache": "^2.0.8"
+    "@remix-pwa/cache": "^2.0.9-dev.1"
   },
   "devDependencies": {
     "@remix-pwa/eslint-config": "^0.0.0",
     "@remix-pwa/lint-staged-config": "^0.0.0"
   },
   "dependencies": {
-    "@remix-pwa/cache": "^2.0.8"
+    "@remix-pwa/cache": "^2.0.9-dev.1"
   },
   "homepage": "https://remix-pwa.run",
   "keywords": [

diff --git a/packages/sw/CHANGELOG.md b/packages/sw/CHANGELOG.md
@@ -1,3 +1,20 @@
+## @remix-pwa/sw 2.1.8-dev.1 (2023-09-26)
+
+
+### Bug Fixes
+
+* **sw:** updated `loadServiceWorker` defaults format faf7158
+* **sw:** updated `loadServiceWorker` defaults format cdf73e0
+* **sw:** updated and sorted out sw loader params 32e92ec
+
+
+
+
+
+### Dependencies
+
+* **@remix-pwa/cache:** upgraded to 2.0.9-dev.1
+
 ## @remix-pwa/sw 2.1.7 (2023-09-25)
 
 

diff --git a/packages/sw/package.json b/packages/sw/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remix-pwa/sw",
-  "version": "2.1.7",
+  "version": "2.1.8-dev.1",
   "description": "Service Worker APIs and utilities for Remix PWA",
   "repository": {
     "type": "git",
@@ -28,15 +28,15 @@
     "test": "vitest --run --environment node --threads --single-thread --pass-with-no-tests"
   },
   "peerDependencies": {
-    "@remix-pwa/cache": "^2.0.8",
+    "@remix-pwa/cache": "^2.0.9-dev.1",
     "@remix-run/dev": "^1.15.0 || ^2.0.0",
     "@remix-run/react": "^1.15.0 || ^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "homepage": "https://remix-pwa.run",
   "devDependencies": {
-    "@remix-pwa/cache": "^2.0.8",
+    "@remix-pwa/cache": "^2.0.9-dev.1",
     "@remix-pwa/eslint-config": "^0.0.0",
     "@remix-pwa/lint-staged-config": "^0.0.0",
     "@remix-run/react": "^2.0.0",

diff --git a/packages/sw/src/react/loader.ts b/packages/sw/src/react/loader.ts
@@ -9,37 +9,54 @@ declare global {
   }
 }
 
-export type LoadServiceWorkerOptions = RegistrationOptions & {
-  serviceWorkerUrl?: string;
-  serviceWorkerRegistrationCallback?: (registration: ServiceWorkerRegistration) => Promise<void> | void;
+export type LoadServiceWorkerOptions = {
+  serviceWorkerUrl: string;
+  serviceWorkerRegistrationCallback: (registration: ServiceWorkerRegistration) => Promise<void> | void;
+  scope: RegistrationOptions['scope'];
+  type: RegistrationOptions['type'];
+  updateViaCache?: RegistrationOptions['updateViaCache'];
 };
 
 /**
  * Load service worker in `entry.client` when the client gets hydrated.
  *
  * All parameters are optional.
  *
- * @param  options - Options for loading the service worker.
- * @param  options.serviceWorkerUrl='/entry.worker.js' - URL of the service worker.
- * @param  options.serviceWorkerRegistrationCallback - Callback function when the service worker gets registered. Takes in the `ServiceWorkerRegistration` object.
- * @param  options.registrationOptions - Options for the service worker registration.
+ * @param  serviceWorkerUrl='/entry.worker.js' - URL of the service worker.
+ * @param  serviceWorkerRegistrationCallback - Callback function when the service worker gets registered. Takes in the `ServiceWorkerRegistration` object.
+ * @param  scope - The service worker's registration scope.
+ * @param  type - The service worker's type.
+ * @param  updateViaCache - The service worker's `updateViaCache` option - controls how the browser handles updates to the service worker's script URL, and is one of the following strings:
+ * - `imports` - The browser bypasses the cache and attempts to update the service worker immediately.
+ * - `all` - The browser uses the cache to update the service worker.
+ * - `none` - The browser doesn't use the cache to update the service worker.
  *
  * ### Example
  *
  * ```ts
  * loadServiceWorker({
+ *  serviceWorkerUrl: "/entry.worker.js",
  *  scope: "/",
- *  serviceWorkerUrl: "/entry.worker.js"
+ *  type: "classic",
  * })
  * ```
  */
 export function loadServiceWorker(
-  { serviceWorkerRegistrationCallback, serviceWorkerUrl, ...options }: LoadServiceWorkerOptions = {
+  {
+    scope = '/',
+    serviceWorkerRegistrationCallback = (reg: ServiceWorkerRegistration) => {
+      reg.update();
+    },
+    serviceWorkerUrl = '/entry.worker.js',
+    type = 'classic',
+    updateViaCache,
+  }: LoadServiceWorkerOptions = {
     scope: '/',
-    serviceWorkerUrl: '/entry.worker.js',
+    type: 'classic',
     serviceWorkerRegistrationCallback: (reg: ServiceWorkerRegistration) => {
       reg.update();
     },
+    serviceWorkerUrl: '/entry.worker.js',
   }
 ) {
   if ('serviceWorker' in navigator) {
@@ -53,7 +70,11 @@ export function loadServiceWorker(
       };
 
       try {
-        const registration = await navigator.serviceWorker.register(serviceWorkerUrl!, options);
+        const registration = await navigator.serviceWorker.register(serviceWorkerUrl, {
+          scope,
+          type,
+          updateViaCache: updateViaCache || 'none',
+        });
 
         // await serviceWorkerRegistrationCallback?.(registration); ❌
 

diff --git a/playground/app/entry.worker.ts b/playground/app/entry.worker.ts
@@ -16,8 +16,12 @@ const ASSETS = 'assets-cache';
 const dataCache = Storage.open(DATA, {
   ttl: 60 * 60 * 24 * 7 * 1_000, // 7 days
 });
-const documentCache = Storage.open(PAGES);
-const assetCache = Storage.open(ASSETS);
+const documentCache = Storage.open(PAGES, {
+  maxItems: 3
+});
+const assetCache = Storage.open(ASSETS, {
+  maxItems: 5
+});
 
 let handler = new RemixNavigationHandler({
   dataCache: dataCache,

diff --git a/playground/app/root.tsx b/playground/app/root.tsx
@@ -8,6 +8,7 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  useLocation,
 } from "@remix-run/react";
 
 import stylesheet from './tailwind.css';
@@ -20,12 +21,15 @@ export const links: LinksFunction = () => [
 
 export default function App() {
   useSWEffect();
+  const location = useLocation();
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
       // ...
+      console.log('window update!');
+      window.$ServiceWorkerHMRHandler$();
     }
-  })
+  }, [location])
 
   return (
     <html lang="en">

diff --git a/playground/package.json b/playground/package.json
@@ -29,6 +29,7 @@
     "dexie": "^3.2.4",
     "dotenv": "^16.3.1",
     "isbot": "^3.7.0",
+    "jotai": "^2.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },