Issues with HTTP 401 basic auth revalidation

Browser & Platform: all browsers, mostly mobile

Issue or Feature Request Description: After implementing offline page in our web-app we noticed that our non-production environment which are covered with basic auth are getting 401 unless visiting root, when disabling the service worker everything is working fine for us 😕, this is not happening all the time but I would say 90% of time

here is the code:

import {registerRoute, NavigationRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
import {precacheAndRoute} from 'workbox-precaching';
import {skipWaiting, clientsClaim} from 'workbox-core';
import * as navigationPreload from 'workbox-navigation-preload';

const CACHE_NAME = 'offline-app';
const FALLBACK_HTML_URL = '/index.html';

skipWaiting();
clientsClaim();
navigationPreload.enable();

precacheAndRoute(self.__WB_MANIFEST, {
    ignoreURLParametersMatching: [
        /token-[^-]*\.json/,
        /\.(?:map)$/,
    ],
});

self.addEventListener('install', async (event) => {
    await /** @type {ExtendableEvent} */(event).waitUntil(
        caches.open(CACHE_NAME)
            .then((cache) => cache.add(
                new Request(FALLBACK_HTML_URL, {credentials: 'same-origin'}),
            )),
    );
});

const navigationHandler = async (params) => {
    try {
        return await new NetworkOnly({
            fetchOptions: {
                credentials: 'same-origin',
            },
        }).handle(params);
    } catch {
        return caches.match(FALLBACK_HTML_URL, {
            cacheName: CACHE_NAME,
        });
    }
};

registerRoute(
    new NavigationRoute(navigationHandler, {
        denylist: [
            /token-[^-]*\.json/,
            /\.(?:map)$/,
        ],
    }),
);

and here is a video

[jeffposnick]

So actually, I think the issue is more about https://chromestatus.com/feature/5682567464353792 not working as expected, as I’m able to reproduce this issue by following thee steps in https://glitch.com/edit/#!/sw-basic-auth?path=README.md%3A9%3A0 without any navigation preload.

I’m going to follow up with some folks from the Chrome engineering team to figure out what’s up, and see if it’s a bug with Chrome or something else.

In the short-term, though, I wouldn’t rely on using HTTP basic auth that expires after a period of time if you’re using a service worker.

[jeffposnick]

After debugging this a bit more with the live reproduction, I think we can narrow things down to a combination of using workbox-navigation-preload with HTTP basic auth. Once the existing auth token expires, a preloaded HTTP 401 response is being used to satisfy the navigation request, and you’re never presented with another basic auth login screen. (This seems to happen more often on Android for some reason.)

I’m going to think a bit about the next steps here—it might be that we need to check the navigation preload response’s HTTP status and not use it when it’s not 200. I’m currently not clear on the heuristic used to determine whether Chrome will display the basic auth login screen or not.

Disabling navigation preload for your basic auth-protected staging environment may be sufficient as a workaround in the meantime.