Service worker fetch with authentication

Question

I have a PWA hosted on SharePoint Online.

Description: https://weblogs.asp.net/soever/spa-series-turn-our-showtitle-app-into-a-progressive-web-app

Code repository: https://github.com/svdoever/sharepoint-progressive-web-apps/tree/master/ShowTitleProgressiveWebApp

I use a service worker where I try to implement caching of fetch requests to resources also living in the same location. These fetch requests have to obey authentication done against the SharePoint Online STS server, and I get the errors as shown in the screenshot below:

I have no clue on how to prevent "requests are blocked by CORS policy" errors and get caching working. Are credential headers not passed from the web page fetch to the service worker fetch?

My service worker code is as follows:

/* code from https://developers.google.com/web/fundamentals/getting-    started/primers/service-workers */

var CACHE_NAME = 'sptitle-cache-v1';
var urlsToCache = [
    'favicon-16x16.png',
    'index.html',
    'es6-promise.min.js',
    'fetch.min.js'
];

self.addEventListener('install', function (event) {
    console.log('Service Worker installing.');
    // Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function (cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('activate', function(event) {
  console.log('Service Worker activating.');  
});

self.addEventListener('fetch', function (event) {
    console.log("service worker intercepting fetch()");
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                // Cache hit - return response
                if (response) {
                    console.log('respond from cache for url ' + response.url);
                    return response;
                }
                // IMPORTANT: Clone the request. A request is a stream and
                // can only be consumed once. Since we are consuming this
                // once by cache and once by the browser for fetch, we need
                // to clone the response.
                var fetchRequest = event.request.clone();
                console.log("fetching request: " + fetchRequest);
                return fetch(fetchRequest).then(
                    function (response) {
                        // Check if we received a valid response
                        if (!response || response.status !== 200 || response.type !== 'basic') {
                            //console.log("Invalid response from fetch(): ", response);
                            return response;
                        }

                        // IMPORTANT: Clone the response. A response is a stream
                        // and because we want the browser to consume the response
                        // as well as the cache consuming the response, we need
                        // to clone it so we have two streams.
                        var responseToCache = response.clone();

                        caches.open(CACHE_NAME)
                            .then(function (cache) {
                                console.log("Cache the fetched response for request ", event.request);
                                cache.put(event.request, responseToCache);
                            });

                        return response;
                    }
                );
            }
            )
    );
});

Answer 1

You have to pass no-cors credential mode manually in the fetch request.

ie return fetch(fetchRequest,{mode: 'no-cors'}).then

because you are trying to access cross-origin request.