已安装PWA经SAML认证后重定向显示Service Worker代码而非UI问题

Let's break down your problem and walk through the fixes step by step:

Core Issue #

After successful SAML authentication, your app is redirecting directly to sw.js via a 302 response. When browsers access sw.js directly, they render the raw JavaScript file content instead of triggering Service Worker registration or loading your app's actual UI. The Chromium bug fix you added addresses navigation mode quirks, but it doesn't resolve the root problem of the incorrect redirect target.

Step 1: Fix the SAML Redirect Target (Most Critical) #

Update your SAML identity provider (IdP) or server configuration so that post-authentication 302 redirects point to your app's entry page (like / or /index.html), not sw.js. Service Workers are background scripts for your app—they should never be the target of a user-facing redirect. This is the permanent solution to your problem.

Step 2: Add a Safety Net in Your Service Worker #

Even with the redirect fixed, add a fallback in your fetch event to catch accidental navigation requests to sw.js and redirect them to your app's home page. Modify your existing fetch logic like this:

self.addEventListener('fetch', function(event) {
  let request = event.request;
  
  // Catch navigation requests targeting sw.js and redirect to home
  if (request.mode === 'navigate' && request.url.includes('sw.js')) {
    event.respondWith(Response.redirect('/'));
    return;
  }

  if (request.method === 'GET') {
    request = new Request(request.url, {
      method: 'GET',
      headers: request.headers,
      mode: request.mode === 'navigate' ? 'cors' : request.mode,
      credentials: request.credentials,
      redirect: request.redirect
    });
  }

  event.respondWith(
    // Use the modified request (not event.request) to apply your Chromium fix correctly
    fetch(request)
    .then(function(response) {
      return caches.open(cacheDynamic)
      .then(function(cache) {
        cache.put(request.url, response.clone());
        return response;
      })
    })
    .catch(function(err) {
      console.log('[Error fetching]', err);
      return caches.match(request)
      .then(function(response){
        // Fallback to offline page if no cached response exists
        return response || caches.match('/offline.html');
      })
    })
  );
});

Key improvements here:

• We add a check to catch navigation requests to sw.js and immediately redirect to the root path
• We use the updated request variable (not event.request) in the fetch call to ensure your Chromium bug fix is applied correctly

Step 3: Verify Service Worker Registration #

Double-check that your app's entry page (e.g., index.html) properly registers the Service Worker, so it runs in the background instead of being accessed directly:

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service Worker registered:', reg.scope))
      .catch(err => console.error('Service Worker registration failed:', err));
  });
}
</script>

Final Notes #

Fixing the SAML redirect target is the permanent solution—the Service Worker safety net is just a guardrail to prevent similar issues in the future. Once you update the redirect to point to your app's entry page, your UI should load as expected after authentication.

内容的提问来源于stack exchange，提问作者Andres.R