CacheStorage and ContentIndex readme examples

virtualstate · Nov 17, 2023 · 156678a · 156678a
1 parent cbe18d2
commit 156678a
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -12,23 +12,25 @@
 
 [//]: # (badges)
 
-### Usage
+# Usage
 
-[`hello.js`](src/tests/worker/service-worker/readme/hello.js)
+## [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
+
+[`worker.js`](src/tests/readme/worker/worker.js)
 ```javascript
 self.addEventListener("fetch", event => {
     event.respondWith(new Response("Hello"))
 });
 ```
 
-[`main.js`](src/tests/worker/service-worker/readme/main.js)
+[`main.js`](src/tests/readme/worker/main.js)
 ```javascript
 import { serviceWorker, createServiceWorkerFetch } from "@virtualstate/internal";
 import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
 
 const pathname = fileURLToPath(import.meta.url);
-const worker = join(dirname(pathname), "./hello.js");
+const worker = join(dirname(pathname), "./worker.js");
 
 const registration = await serviceWorker.register(worker);
 
@@ -42,4 +44,56 @@ console.log(response.status, text); // 200 "Hello";
 
 ```bash
 REDIS_MEMORY=1 node main.js
+```
+
+## [CacheStorage](https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage)
+
+[cache.js](./src/tests/readme/cache/cache.js)
+```javascript
+import { caches } from "@virtualstate/internal";
+
+const cache = await caches.open("cache");
+
+const url = "https://example.com";
+
+await cache.add(url);
+
+const response = await cache.match(url);
+const text = await response.text();
+
+console.log(response.status, text.substring(0, 15), text.length); // 200 "<!doctype html>" 1256;
+```
+
+## [ContentIndex](https://developer.mozilla.org/en-US/docs/Web/API/ContentIndex)
+
+[index.js]()
+```javascript
+import { index, caches } from "@virtualstate/internal";
+
+const entry = {
+    id: "post-1",
+    url: "/posts/amet.html",
+    title: "Amet consectetur adipisicing",
+    description:
+        "Repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.",
+    icons: [
+        {
+            src: "https://javascript.org.nz/logo.png",
+            sizes: "128x128",
+            type: "image/png",
+        },
+    ],
+    category: "article",
+};
+await index.add(entry);
+
+console.log(await index.getAll()) // [{ id: "post-1" }]
+
+const cache = await caches.open("contentIndex");
+
+for (const { src } of entry.icons) {
+    const response = await cache.match(src);
+    const { byteLength } = await response.arrayBuffer();
+    console.log(src, response.status, byteLength) // ... 200 5348
+}
 ```
diff --git a/src/tests/index.tsx b/src/tests/index.tsx
@@ -24,6 +24,8 @@ try {
   // store for workers, but that is a later task
   if (isRedis() && typeof Bun === "undefined") {
     await import("./worker");
+
+    await import("./readme");
   }
 
   // Ensure any data clients are closed

diff --git a/src/tests/readme/cache/cache.js b/src/tests/readme/cache/cache.js
@@ -0,0 +1,12 @@
+import { caches } from "@virtualstate/internal";
+
+const cache = await caches.open("cache");
+
+const url = "https://example.com";
+
+await cache.add(url);
+
+const response = await cache.match(url);
+const text = await response.text();
+
+console.log(response.status, text.substring(0, 15), text.length); // 200 "<!doctype html>";
diff --git a/src/tests/readme/content-index/index.js b/src/tests/readme/content-index/index.js
@@ -0,0 +1,28 @@
+import { index, caches } from "@virtualstate/internal";
+
+const entry = {
+    id: "post-1",
+    url: "/posts/amet.html",
+    title: "Amet consectetur adipisicing",
+    description:
+        "Repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.",
+    icons: [
+        {
+            src: "https://javascript.org.nz/logo.png",
+            sizes: "128x128",
+            type: "image/png",
+        },
+    ],
+    category: "article",
+};
+await index.add(entry);
+
+console.log(await index.getAll()) // [{ id: "post-1" }]
+
+const cache = await caches.open("contentIndex");
+
+for (const { src } of entry.icons) {
+    const response = await cache.match(src);
+    const { byteLength } = await response.arrayBuffer();
+    console.log(src, response.status, byteLength) // ... 200 5348
+}
diff --git a/src/tests/readme/index.ts b/src/tests/readme/index.ts
@@ -0,0 +1,5 @@
+export {}
+
+await import("./worker/main.js");
+await import("./cache/cache.js");
+await import("./content-index/index.js");
diff --git a/...ests/worker/service-worker/readme/main.js → src/tests/readme/worker/main.js b/...ests/worker/service-worker/readme/main.js → src/tests/readme/worker/main.js
@@ -3,7 +3,7 @@ import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
 
 const pathname = fileURLToPath(import.meta.url);
-const worker = join(dirname(pathname), "./hello.js");
+const worker = join(dirname(pathname), "./worker.js");
 
 const registration = await serviceWorker.register(worker);
 

diff --git a/...sts/worker/service-worker/readme/hello.js → src/tests/readme/worker/worker.js b/...sts/worker/service-worker/readme/hello.js → src/tests/readme/worker/worker.js
diff --git a/src/tests/worker/service-worker/index.ts b/src/tests/worker/service-worker/index.ts
@@ -76,6 +76,4 @@ async function waitForServiceWorker(registration: DurableServiceWorkerRegistrati
     }
 
 
-}
-
-await import("./readme/main.js");
+}