Add offline support to svg-render.html via Service Worker

svg-render-sw.js

@@ -0,0 +1,48 @@
+// Service Worker for svg-render.html offline support
+const CACHE_NAME = 'svg-render-v1';
+const urlsToCache = [
+  '/svg-render.html',
+  'https://gist.githubusercontent.com/simonw/aedecb93564af13ac1596810d40cac3c/raw/83e7f3be5b65bba61124684700fa7925d37c36c3/tiger.svg'
+];
+
+// Install event - cache resources
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        return cache.addAll(urlsToCache);
+      })
+      .catch((error) => {
+        console.error('Cache installation failed:', error);
+        // Don't fail installation if example SVG can't be cached
+        return caches.open(CACHE_NAME)
+          .then((cache) => cache.add('/svg-render.html'));
+      })
+  );
+});
+
+// Fetch event - serve from cache, fallback to network
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request)
+      .then((response) => {
+        // Return cached version or fetch from network
+        return response || fetch(event.request);
+      })
+  );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});

svg-render.html

@@ -391,6 +391,14 @@ <h2>Base64 Image Tag:</h2>
 
         // On first load, if a hash fragment exists, use it to populate and render
         window.addEventListener('DOMContentLoaded', loadFromHashIfPresent);
+
+        // Register service worker for offline support
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/svg-render-sw.js')
+                .catch((error) => {
+                    console.log('Service worker registration failed:', error);
+                });
+        }
     </script>
 </body>
 </html>