Chrome unable to fetch css from s3 in service worker

Question

I'm trying to make my web app work offline with service workers and ran into a strange problem.

I've defined some shell files for my app like in the guide on MDN

const cacheName = 'SiMo-v0.1';
const appShellFiles = [
  '/index.html',
  '/js/build/map.c6393552f9958cd32710.js',
  'https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css',
];

self.addEventListener('install', (e) => {
  console.log('[Service Worker] Install');
  e.waitUntil(
    caches.open(cacheName).then((cache) => {
      console.log('[Service Worker] Caching all: app shell and content');
      return cache.addAll(appShellFiles);
    }),
  );
});

Installing that service worker fails because I get a CORS error for the css file from S3. I have already confirmed that my CORS settings on the bucket are correct and I have also tested in Firefox where the code seems to work.

Additionally I also tried running fetch('https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css') from the developer tools. Which failed in Chrome but also works in Firefox

Edit:
As suggested in the comments I have included an actual CSS file used in the site in the post.
https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css

Answer 1

[Improvement]

For CORS
As the error message shown on chrome, adding { mode: 'no-cors' } in the request option can make chrome success.

fetch('https://intermaps-lynx.s3-eu-west-1.amazonaws.com/css/menu.css', {
    mode: 'no-cors'
})

See more information: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

[Remark]

• I fetch 'https://MY_BUCKET.s3-eu-west-1.amazonaws.com/css/styles.css' would always respond 301 even chrome or Firefox.