0

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'?

3
  • Hey, have you had a look at the addAll function? After that your cache should be initiated and in theory you should be able to tell the delta, not sure about a precise loading status, doubt it, since it is a single promise. developer.mozilla.org/en-US/docs/Web/API/Cache/addAll If you really want a progress bar, consider adding them one by one by using add instead of addAll. Then you can iterate over the resources
    – mchl18
    Dec 13, 2018 at 17:12
  • But it would involve a lot of async handling
    – mchl18
    Dec 13, 2018 at 17:16
  • @mchl18 many thanks for your time and effort! I am aware of addAll and add methods they add contents into the cache. i am also aware of client.postMessage as well which sends a message into the console as a reply. My question is How a service worker can tell/communicate browser that i have finished caching and contents are now available offline? In other words a service worker should send a message into the browser like an alert or pop-up, caching complete, contents are available for offline browsing! If some one can help please, many thanks in advance.
    – zaffar
    Dec 14, 2018 at 9:44

1 Answer 1

-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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.