swimple 1.0.1 → 1.0.2

package/README.md

@@ -712,7 +712,57 @@ self.addEventListener("fetch", (event) => {
 });
 ```
 
-### Example 5: Logout with Cache Clear
+### Example 5: Different Strategies for Different Scopes
+
+You can compose multiple `handleRequest` methods to use different caching strategies for different scopes. For example, you might want `stale-while-revalidate` for static assets like fonts, and `cache-first` for API endpoints.
+
+```javascript
+// sw.js
+import { createHandleRequest } from "swimple";
+
+// Handler for fonts - use stale-while-revalidate for instant loading
+const handleFontsRequest = createHandleRequest({
+  cacheName: "fonts-cache-v1",
+  scope: ["/fonts/"],
+  defaultStrategy: "stale-while-revalidate",
+  defaultTTLSeconds: 86400, // Fresh for 24 hours
+  defaultStaleTTLSeconds: 604800 // Stale for up to 7 days
+});
+
+// Handler for API - use cache-first for fast responses
+const handleApiRequest = createHandleRequest({
+  cacheName: "api-cache-v1",
+  scope: ["/api/"],
+  defaultStrategy: "cache-first",
+  defaultTTLSeconds: 300 // Fresh for 5 minutes
+});
+
+self.addEventListener("fetch", (event) => {
+  // Try fonts handler first
+  let response = handleFontsRequest(event);
+  if (response) {
+    event.respondWith(response);
+    return;
+  }
+
+  // Then try API handler
+  response = handleApiRequest(event);
+  if (response) {
+    event.respondWith(response);
+    return;
+  }
+
+  // Fall through to network for other requests
+});
+```
+
+With this setup:
+
+- Requests to `/fonts/*` will use `stale-while-revalidate` - returning cached fonts immediately while updating in the background
+- Requests to `/api/*` will use `cache-first` - returning from cache if fresh, otherwise fetching from network
+- Each scope uses its own cache (`fonts-cache-v1` and `api-cache-v1`), so they can be managed independently
+
+### Example 6: Logout with Cache Clear
 
 ```javascript
 // Client code
@@ -728,7 +778,7 @@ async function logout() {
 }
 ```
 
-### Example 6: Custom Request Handler Chain
+### Example 7: Custom Request Handler Chain
 
 Your service worker might have other "handlers" or "middlewares" that need to be called before the cache handler.
 

package/example/index.html

@@ -4,6 +4,38 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>swimple - Simple Service Worker Caching</title>
+    <link rel="icon" type="image/png" href="/logo.png" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:title"
+      content="swimple - Simple Service Worker Caching"
+    />
+    <meta
+      property="og:description"
+      content="A simple service worker library for request caching with automatic invalidation."
+    />
+    <meta property="og:image" content="/logo.png" />
+    <meta property="og:site_name" content="swimple" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary" />
+    <meta
+      name="twitter:title"
+      content="swimple - Simple Service Worker Caching"
+    />
+    <meta
+      name="twitter:description"
+      content="A simple service worker library for request caching with automatic invalidation."
+    />
+    <meta name="twitter:image" content="/logo.png" />
+
+    <!-- General meta -->
+    <meta
+      name="description"
+      content="A simple service worker library for request caching with automatic invalidation."
+    />
     <style>
       * {
         margin: 0;
@@ -42,6 +74,18 @@
         gap: 1rem;
       }
 
+      .header-logo {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
+
+      .header-logo img {
+        width: 100px;
+        height: 100px;
+        flex-shrink: 0;
+      }
+
       header h1 {
         font-size: 2.5rem;
         color: #2563eb;
@@ -465,9 +509,12 @@
     <header>
       <div class="container">
         <div class="header-content">
-          <div>
-            <h1>swimple</h1>
-            <p>A simple service worker library for request caching</p>
+          <div class="header-logo">
+            <img src="/logo.svg" alt="swimple logo" />
+            <div>
+              <h1>swimple</h1>
+              <p>A simple service worker library for request caching</p>
+            </div>
           </div>
           <a
             href="https://github.com/wes-goulet/swimple"
@@ -496,7 +543,7 @@
         <h2>Simple, Automatic Request Caching</h2>
         <p>
           swimple provides automatic caching with smart invalidation for your
-          service worker. Minimal configuration, maximum performance.
+          service worker.
         </p>
       </section>
 

package/example/logo.svg

@@ -0,0 +1,18 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Hexagon (like service worker icon shape) -->
+  <path d="M 100 17.5 L 175 58.75 L 175 141.25 L 100 182.5 L 25 141.25 L 25 58.75 Z"
+        fill="#3b82f6"
+        stroke="#2563eb"
+        stroke-width="3"/>
+
+  <!-- "swimple" text inside hexagon -->
+  <text x="100" y="100"
+        font-family="system-ui, -apple-system, sans-serif"
+        font-size="22"
+        font-weight="700"
+        fill="white"
+        text-anchor="middle"
+        dominant-baseline="middle">
+    swimple
+  </text>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swimple",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A simple service worker library for request caching",
   "type": "module",
   "main": "./src/index.js",