Service Worker Install fails: "cannot read property 'addAll of undefined"

Question

So I'll keep this succinct: When trying to install, my service worker fails. This is all of my code in sw.js:

var cacheName = 'randomstring';
var filesToCache = [ '/' ];

self.addEventListener('install', function (e) {
    console.log('[ServiceWorker] Install');
    e.waitUntil(
        caches.open(cacheName)
            .then(function (cache) {
                console.log('[ServiceWorker] About to fail');
                return cache.addAll(filesToCache);
            })
    );
});

I get an exception because cache is undefined (on the cache.addAll bit).

Not really sure why this is the case?

I've used service workers before and never encountered this issue. This is my first time using a service worker with an ASP.Net back-end though, so not sure if that's the problem?

Answer 1

So, I figured this out. I was going to vote to close the question, but I figured I'd leave it here as I saw some other people with this issue who didn't know how to resolve it. Even though it's super-stupid :) (or more accurately, I am).

So I was running the website via the "Play" button, aka "Start Debugging", which, in Visual Studio 2017, launches a special Chrome window, in which the above error will be thrown.

To work around the issue, I can (or you can, internet traveller of the future) simply start without debugging, host the website in IIS, etc.

EDIT: If there's a better workaround where I can use the service worker in debug mode, please suggest it and I'll mark that as the answer. For my specific problem though, the above workaround is fine :).

Answer 2

Encountered the same problem and found some other ways.

VS recognises "chrome.exe" while debugging and adds some parameters, that´s why service workers won´t working.

There is an option Debug => Option => Debugging => General => Enable javascript debugging for asp.net (Chrome, Edge and FireFox). If you don´t want to use js debugging in vs - like me because i use chrome for js debugging - just deactivate this option and service workers will work. VS Enable JS Debugging in Chrome

Alternatively you can add chrome as a new "browser" and switch the browser for debugging. Because vs recognise "chrome.exe" make a symlink via administative commandline "mklink chromedirect.exe chrome.exe" and add it as new browser in visual studio.

This can be done under the "Play" context menu => Browse with. VS Play Context Menu

Just add chromedirect.exe without any arguments and a friendly name like "Google Chrome Direct". After that you can switch to the browsers and select if you want VS JS Debugging or not.