cachel 1.0.0 → 1.1.0

package/README.md

@@ -4,6 +4,21 @@ Offline-first asset caching for the browser, powered by IndexedDB.
 
 Fetch remote assets once, serve them forever from local cache. Works with any framework or none at all.
 
+![npm](https://img.shields.io/npm/v/cachel)
+![license](https://img.shields.io/npm/l/cachel)
+
+---
+
+## Features
+
+- Fetch and cache remote assets in IndexedDB with one call
+- Batch cache multiple assets with controlled concurrency via `loadMany`
+- Serve cached assets as object URLs, works fully offline
+- Skips network requests for already cached assets
+- Supports images, videos, audio and fonts
+- No service worker required
+- Zero dependencies
+
 ---
 
 ## Install
@@ -59,6 +74,34 @@ Throws if the fetch fails or the content type is not supported.
 
 ---
 
+### `cache.loadMany(urls, chunkSize?)`
+
+Fetches and caches multiple assets in controlled parallel chunks. Returns a status object with results, success count, failed count, and time elapsed in milliseconds.
+
+```javascript
+const status = await cache.loadMany([
+    'https://example.com/logo.png',
+    'https://example.com/hero.jpg',
+    'https://example.com/font.woff2'
+]);
+
+console.log(status);
+// {
+//   results: [...],  // raw Promise.allSettled results
+//   success: 2,
+//   failed: 1,
+//   timeElapsed: 1240  // in milliseconds
+// }
+```
+
+`chunkSize` controls how many assets are fetched in parallel per round. Defaults to `8`, max is `8`. Assets already cached are skipped automatically.
+
+```javascript
+await cache.loadMany(urls, 4); // 4 parallel fetches per round
+```
+
+---
+
 ### `cache.get(url)`
 
 Retrieves a cached asset and returns it as an object URL. Returns `null` if not found.

package/cachel.js

@@ -1,9 +1,10 @@
 import Idb from "./lib/idb.js";
-import convertToBlob from './utils/blob.js';
+import { convertToBlob, chunkify } from './utils/index.js';
 
 class Cachel {
     
     #idb;
+    #defaultChunkSize = 8;
 
     constructor(name = 'idb'){
         this.#idb = new Idb(name);
@@ -56,6 +57,30 @@ class Cachel {
         return this.#idb.clear();
     }
 
+    async loadMany(urls, chunkSize = this.#defaultChunkSize){
+        if(!(Array.isArray(urls) && urls.length)) return;
+        if(chunkSize > this.#defaultChunkSize){
+            console.warn(`cachel: supplied chunkSize is greater than max permissible chunk size; clamping the size to ${this.#defaultChunkSize}`);
+        }
+        chunkSize = Math.min(Math.max(1, chunkSize), this.#defaultChunkSize);
+        const chunks = chunkify(urls, chunkSize);
+        const results = [];
+        const startTime = performance.now();
+        for(const chunk of chunks){
+            const chunkResults = await Promise.allSettled(chunk.map(url => this.load(url)));
+            results.push(...chunkResults);
+        }
+        const timeElapsed = (performance.now() - startTime);
+        const success = results.filter(result => result.status === 'fulfilled').length;
+        const status = {
+            results,
+            success,
+            failed: results.length - success,
+            timeElapsed
+        }
+        return status;
+    }
+
 }
 
 export default Cachel;

package/lib/idb.js

@@ -1,4 +1,4 @@
-import promisify from "../utils/promisify.js";
+import { promisify } from "../utils/index.js";
 
 class Idb {
     #name = null;

package/package.json

@@ -1,12 +1,25 @@
 {
   "name": "cachel",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "cachel.js",
-  "files": [ "cachel.js", "lib/", "utils/", "README.md", "LICENSE" ],
+  "files": [
+    "cachel.js",
+    "lib/",
+    "utils/",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "dev": "live-server"
   },
-  "keywords": ["cache", "indexeddb", "offline", "pwa", "blob", "assets"],
+  "keywords": [
+    "cache",
+    "indexeddb",
+    "offline",
+    "pwa",
+    "blob",
+    "assets"
+  ],
   "author": {
     "name": "Geet Trivedi",
     "url": "https://www.geettrivedi.com"
@@ -17,4 +30,4 @@
   "devDependencies": {
     "live-server": "^1.2.2"
   }
-}
+}

package/utils/chunkify.js

@@ -0,0 +1,10 @@
+const chunkify = (arr, chunkSize) => arr.reduce((chunksArr, item, index) => {
+    const chunkIndex = Math.floor(index/chunkSize);
+    if(!chunksArr[chunkIndex]){
+        chunksArr[chunkIndex] = [];
+    }
+    chunksArr[chunkIndex].push(item);
+    return chunksArr;
+}, []);
+
+export default chunkify;

package/utils/{blob.js → convertToBlob.js}

@@ -1,3 +1,4 @@
+const allowedContentTypes = ['image/', 'video/', 'audio/', 'font/'];
 const convertToBlob = async url => {
     try{
         const response = await fetch(url);
@@ -7,7 +8,6 @@ const convertToBlob = async url => {
         }
 
         const contentType = response.headers.get('content-type');
-        const allowedContentTypes = ['image/', 'video/', 'audio/', 'font/'];
         const isContentTypeAllowed = allowedContentTypes.some(type => contentType.startsWith(type));
 
         if(!isContentTypeAllowed){

package/utils/index.js

@@ -0,0 +1,3 @@
+export { default as promisify } from "./promisify.js";
+export { default as convertToBlob } from "./convertToBlob.js";
+export { default as chunkify } from "./chunkify.js";