Cache API clear operation timing after Service Worker backup import in Chrome 80+

What happens first?

When a Service Worker imports a backup, Chrome uses a temporary in‑memory cache that is merged into the persistent CacheStorage once the worker is fully activated. The Cache.clear() method returns a Promise that resolves only after all queued delete operations have finished and the underlying IndexedDB transaction commits.

Confirmed facts (Chrome 80+)

• The import() API is asynchronous and resolves only after the merge into the persistent store is complete.
• Clear resolves after the merge, not before, because the merge is an IndexedDB transaction that must finish before the clear transaction can commit.
• The delay is independent of network latency; it depends on cache size, I/O performance, and the merge algorithm.
• In Chrome 90+ the merge step is faster, but the ordering remains the same.
• If the Service Worker uses skipWaiting() and clients.claim(), the import may be deferred until the new worker takes control, adding extra latency.

How to reliably know the cache is ready

1. Call import() from the Service Worker and wait for its Promise to resolve. This guarantees that the temporary cache has been merged.
2. After the import Promise resolves, open the target cache and call clear(). Chain the Promises so that clear() is executed only after the merge is finished:

   self.import('backup.json').then(() => {
     return caches.open('app-cache');
   }).then(cache => cache.clear());
   

3. Use DevTools Performance panel to confirm that the cacheClear event occurs after the importCompleted event. The timestamps will show the clear promise resolving only after the merge.
4. For manual verification, log timestamps:

   const t1 = performance.now();
   self.import('backup.json').then(() => {
     console.log('import done', performance.now() - t1);
     return caches.open('app-cache');
   }).then(cache => cache.clear()).then(() => {
     console.log('clear done', performance.now() - t1);
   });
   

Pattern to avoid stale content

• Use versioned cache names. Keep the old cache until the new one is fully imported and cleared, then delete the old one.
• Serve from the new cache only after the import and clear Promises have resolved.
• If you need to keep the old cache alive while the new one is being prepared, employ a stale‑while‑revalidate strategy: respond with the old cache, then update in the background.

Missing diagnostic detail

To fine‑tune the timing, could you tell us the approximate size of the cache you are restoring? Large caches (>10 MB) can introduce longer IndexedDB write latencies.