How to use a Service Worker With BASIC Authentication (NTLM, Negotiate)

Question

I have been trying to use a service worker within a IIS hosted web site that caches some of the static content of the site. The site is an internal application that uses Windows Authentication. I have been able to register and run a service worker without too much hassle, but as soon as I open the caches and start adding files to the cache, the promise fails with an authorisation failure. the returned HTTP result is 401 Unauthorised. This is the usual response for the first few requests until the browser and the server are able to negotiate the authorisation.

I will post some code soon that should help with the explanation.

EDIT

var staticCacheName = 'app-static-v1';
console.log("I AM ALIVE");
this.addEventListener('install', function (event) {
    console.log("AND I INSTALLED!!!!");
    var urlsToCache = [
        //...many js files to cache
        '/scripts/numeral.min.js?version=2.2.0',
        '/scripts/require.js',
        '/scripts/text.js?version=2.2.0',
        '/scripts/toastr.min.js?version=2.2.0',
    ];


    event.waitUntil(
        caches.open(staticCacheName).then(function (cache) {
            cache.addAll(urlsToCache);
        }).catch(function (error) {
            console.log(error);
        })
    );
});

Answer 1

This is just a guess, given the lack of code, but if you're doing something like:

caches.open('my-cache').then(cache => {
  return cache.add('page1.html'); // Or caches.addAll(['page1.html, page2.html']);
});

you're taking advantage of the implicit Request object creation (see section 6.4.4.4.1) that happens when you pass in a string to cache.add()/cache.addAll(). The Request object that's created uses the default credentials mode, which is 'omit'.

What you can do instead is explicitly construct a Request object containing the credentials mode you'd prefer, which in your case would likely be 'same-origin':

caches.open('my-cache').then(cache => {
  return cache.add(new Request('page1.html', {credentials: 'same-origin'}));
});

If you had a bunch of URLs that you were passing an array to cache.addAll(), you can .map() them to a corresponding array of Requests:

var urls = ['page1.html', 'page2.html'];
caches.open('my-cache').then(cache => {
  return cache.addAll(urls.map(url => new Request(url, {credentials: 'same-origin'})));
});