Chrome unable to fetch css from s3 in service worker

user_1602453 0
Viewed 474

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

service-worker google-chrome amazon-s3 javascript
2 Answers
user_135659660

I'm not sure what exactly changed but I was doing some more tests and suddenly the files from S3 just work. I didn't change anything about my Bucket so there was either a fix on the side of Chrome or S3.

Anyways thanks to all the people trying to help

user_16024530
Related