Demo

Hi, Can you please provide a demo code regarding how to alter the service-worker original logic?
I managed to append code, and I can’t manage to exclude some URL paths from being cached.

I tried the following code:

self.addEventListener('fetch', function (event) {
    console.log("Fetch url:", event.request.url); // tslint:disable-line
    if (event.request.url.indexOf('auth') > -1) {
         console.log("Returning false"); // tslint:disable-line
         return false;
     }
});

Logs are written, but the path is being cached anyway.

Also, if I want to replace the whole service worker CRA code, how can I predict webpack’s file names ahead? I don’t want to eject for this.

[tszarzynski]

@CodeJjang I played a little bit and this piece of code seems to do the job:

var blacklist = ['index.html'];

for (let [key, val] of urlsToCacheKeys) {
  if (blacklist.some(e => val.match(e))) {
    urlsToCacheKeys.delete(key);
  }
}

You just have to append it to original SW.

[tszarzynski]

@CodeJjang Ok, I get your point now.

First thing, the purpose of this script wasn’t to amend caching strategy of CRA. Only adding some extra features on top of it. Or replacing it completely if necessary. It’s a pretty dummy thing.

If I understand correctly you want to implement your own caching strategy.

I can suggest to solutions here:

1. If you look into the code of Sw generated by CRA you’ll find an array called precacheConfig at the beginning of the file. I’d try to append a piece of code that filters out the elements that you don’t want to be cached from that list. Sounds a little bit hacky, but could possibly work if you just want to blacklist one thing.

2. You can also completely remove SW generated by CRA and build your own one. Have a look at sw-precache. That’s what CRA is using under the hood. It supports glob pattern matching in a config file. So you don’t really have to know the actual filenames generated by CRA build script.

Does it make sense?