feat: studio service worker to preview uploaded medias

Author: farnabaz

package.json

@@ -14,6 +14,10 @@
     "./app/utils": {
       "types": "./dist/app/utils.d.ts",
       "default": "./dist/app/utils.js"
+    },
+    "./app/service-worker": {
+      "types": "./dist/app/service-worker.d.ts",
+      "default": "./dist/app/service-worker.js"
     }
   },
   "main": "./dist/module/module.mjs",

src/app/src/service-worker.ts

@@ -0,0 +1,80 @@
+export const serviceWorker = () => `
+self.addEventListener('fetch', event => {
+  const url = new URL(event.request.url);
+  const isSameDomain = url.origin === self.location.origin;
+
+  if (!isSameDomain) {
+    return event.respondWith(fetch(event.request));
+  }
+
+  if (url.pathname.startsWith('/_ipx/_/') || ['jpg', 'png', 'jpeg', 'gif', 'webp'].includes(url.pathname.split('.').pop())) {
+    console.log('Fetching from IndexedDB:', url.pathname);
+    return event.respondWith(fetchFromIndexedDB(url));
+  }
+
+  event.respondWith(fetch(event.request))
+})
+
+function fetchFromIndexedDB(url) {
+  const dbKey = ['public-assets:', url.pathname.replace('/_ipx/_/', '').replace('/', ':')].join('')
+  return getData(dbKey).then(data => {
+    if (!data) {
+      return fetch(event.request);
+    }
+
+    const json = JSON.parse(data)
+    const parsed = parseDataUrl(json.modified.raw);
+    const bytes = base64ToUint8Array(parsed.base64);
+
+    return new Response(bytes, {
+      headers: { 'Content-Type': parsed.mime }
+    });
+  })
+}
+
+function parseDataUrl(dataUrl) {
+  // Example: data:image/png;base64,iVBORw0KG...
+  const match = dataUrl.match(/^data:(.+);base64,(.+)$/);
+  if (!match) return null;
+  return {
+    mime: match[1],
+    base64: match[2]
+  };
+}
+
+function base64ToUint8Array(base64) {
+  const binary = atob(base64);
+  const len = binary.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+// IndexedDB
+function openDB() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('nuxt-content-studio-media', 1);
+    request.onupgradeneeded = event => {
+      const db = event.target.result;
+      db.createObjectStore('drafts', { keyPath: 'id' });
+    };
+    request.onsuccess = event => resolve(event.target.result);
+    request.onerror = event => reject(event.target.error);
+  });
+}
+
+// Read data from the object store
+function getData(key) {
+  return openDB().then(db => {
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction('drafts', 'readonly');
+      const store = tx.objectStore('drafts');
+      const request = store.get(key);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  });
+}
+`

src/app/vite.config.ts

@@ -100,7 +100,7 @@ export default defineConfig({
     cssCodeSplit: false,
     outDir: '../../dist/app',
     lib: {
-      entry: ['./src/index.ts', './src/utils.ts'],
+      entry: ['./src/index.ts', './src/utils.ts', './src/service-worker.ts'],
       formats: ['es'],
     },
     sourcemap: false,

src/module/src/module.ts

@@ -146,6 +146,10 @@ export default defineNuxtModule<ModuleOptions>({
       route: '/__nuxt_content/studio',
       handler: runtime('./server/routes/admin'),
     })
+    addServerHandler({
+      route: '/sw.js',
+      handler: runtime('./server/routes/sw'),
+    })
     // addServerHandler({
     //   route: '/__nuxt_content/studio/auth/google',
     //   handler: runtime('./server/routes/auth/google.get'),

src/module/src/runtime/host.ts

@@ -260,6 +260,10 @@ export function useStudioHost(user: StudioUser): StudioHost {
       .then((_localDatabaseAdapter) => {
         localDatabaseAdapter = _localDatabaseAdapter
         isMounted.value = true
+      }).then(() => {
+        if ('serviceWorker' in navigator) {
+          navigator.serviceWorker.register('/sw.js')
+        }
       })
   })()
 

src/module/src/runtime/server/routes/sw.ts

@@ -0,0 +1,7 @@
+import { serviceWorker } from 'nuxt-studio/app/service-worker'
+import { eventHandler, setHeader } from 'h3'
+
+export default eventHandler(async (event) => {
+  setHeader(event, 'Content-Type', 'application/javascript')
+  return serviceWorker()
+})