服务工作者缓存进度

Question

I am new to java script as well as to PWA.

I am trying to load all of my contents images/css/audio/video/.html into the cache using cache API which i did successfully using https://developers.google.com and other resources.

My question now is:
Soon the contents load into the cache the SW(service worker) should tell that all the contents have been loaded. I tried to loop through the static contents which i want to cache, and tried to use alert but it says

Uncaught (in promise) ReferenceError: alert is not defined

1. How would SW tell the main page (say index.html) that the contents have been cached without clicking any button or interaction?

2. And if there is a possibility of the progress bar which can show the progress of loading the contents into the cache?

3. as well as telling your actual cache capacity is 'this' and after loading the contents left is 'this' ?

Answer 1

You need to add a client.postMessage() to the service worker on the 'activate' event (which occurs after caching is complete), and navigator.serviceWorker.addEventListener('message') Fn to your content page index.html or whatever.

Here's code I use:

// activate with notification TO DOM (!)
global.addEventListener('activate', event => {
  event.waitUntil(async function() {
    await global.clients.claim();
    delay(5000).then(() => {
      data = 'activated';
      console.log('activate msg => dom: ' + data);
      global.clients.matchAll().then(all => all.map(client => client.postMessage(data)));
    });
  }());
});

and on content page script:

navigator.serviceWorker.addEventListener('message', function(event) {
  console.log('sw message: ' + event.data);
  if ( event.data === 'activated' ) {
    somefunctions();
  }
});

Note global.clients.matchAll() broadcasts the message to everything under control of the service worker, which you might not want.