Database IndexDB

Questions
1

image
image1920×954 133 KB

image
image1920×954 96.1 KB

I have already cached the glb file, but I found that when parsing the glb file, fileTools.ts still converts the graphics and text into a blob. I actually don’t want to convert it to a blob at this time. Is there any way not to convert it to a blob and display these requests in the browser

2

cc @Deltakosh

3

Unfortunately no. We need it to be stored into the IDB and we can only store blob :frowning:
I would highly encourage you to ignore the IDB tech and use Service Workers:

Using Service Workers - Web APIs | MDN

We created IDB long time ago when there was no caching mechanism but today SW are the best solution

4

Is there a built-in Service-Workers plugin in babylonjs currently available? Or are there any cases? I am not very familiar with these, so I can only refer to some information areas to understand

5

service workers are pure web standard tech. You can simply configure them to cache anything you load (like the glb here).

6

You can do something like that in your page:

1. Register the Service Worker (in your main JS file)

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('Service worker registered:', reg.scope))
    .catch(err => console.error('Service worker registration failed:', err));
}

2. Create the Service Worker File (public/sw.js or /sw.js depending on your setup)

const CACHE_NAME = 'glb-cache-v1';

self.addEventListener('install', (event) => {
  console.log('[SW] Installed');
  self.skipWaiting(); // Activate immediately
});

self.addEventListener('activate', (event) => {
  console.log('[SW] Activated');
  event.waitUntil(
    caches.keys().then(cacheNames => 
      Promise.all(
        cacheNames
          .filter(name => name !== CACHE_NAME)
          .map(name => caches.delete(name))
      )
    )
  );
});

self.addEventListener('fetch', (event) => {
  const request = event.request;

  // Only handle .glb file requests
  if (request.url.endsWith('.glb')) {
    event.respondWith(
      caches.open(CACHE_NAME).then(async (cache) => {
        const cached = await cache.match(request);
        if (cached) {
          return cached;
        }

        const response = await fetch(request);
        if (response.ok) {
          cache.put(request, response.clone());
        }
        return response;
      })
    );
  }
});
7

It looks really impressive ，It would be great if babylonjs could be integrated into the engine and started through a switch

8

we have plans to get rid of IDB so it will one day happen :slight_smile:

9

Looking forward to coming soon!!!