I know, I know. HTTP Basic Auth is soooo lame. Yet, I still use it for secret-but-not-super-secret stuff that I want to test out on a server reachable from the public web.

When combining it with a service worker and Web App Manifest, I ran into some issues. I've resolved most of them, but I thought I'd document my findings here mostly for myself, and update as I go along.

Caveat: I need to research if these are good to place there regardless of environment, or if they should be removed in production. Also, I'm still having issues with the authentication dialog not showing up unless I pop open devtools, so I probably need to be adding credentials in more places to have it working 100%.

Adding items to cache – add credentials

If you have calls that look like this:

cache.addAll([
        /* some files */
      ]);

...you’ll need to add credentials to those Request objects:

cache.addAll([
        /* some files */
      ].map(url => new Request(url, {credentials: 'same-origin'})));

Credentials for Web App Manifest

The same logic goes for your manifest.json file: it needs to pass on credentials, and it doesn't by default.

The fix here is simpler: you need to add the crossorigin attribute to the link-tag:

<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">