We just had an issue during deployment wherein the expected CSS file was unavailable, and meteor generated another CSS file with 200 headers. Since the response was 200, our CDN cached the file as well as the service-worker of the browsers.
The content of the generated CSS file was:
.meteor-css-not-found-error { width: 0px;}
Checking meteor, here is the code the generated the CSS above
if (request.url.query && request.url.query['meteor_css_resource']) {
// In this case, we're requesting a CSS resource in the meteor-specific
// way, but we don't have it. Serve a static css file that indicates that
// we didn't have it, so we can detect that and refresh. Make sure
// that any proxies or CDNs don't cache this error! (Normally proxies
// or CDNs are smart enough not to cache error pages, but in order to
// make this hack work, we need to return the CSS file as a 200, which
// would otherwise be cached.)
headers['Content-Type'] = 'text/css; charset=utf-8';
headers['Cache-Control'] = 'no-cache';
res.writeHead(200, headers);
res.write('.meteor-css-not-found-error { width: 0px;}');
res.end();
return;
}
Link to the same code: meteor/webapp_server.js at c5ad2054eb914495b553218cfd4e56befc20312d · meteor/meteor · GitHub
How are we supposed to handle this CSS error file with 200 headers? How are we supposed to detect that and refresh as indicated in the comments?