Content type for css fonts

[oliveti]

Hi,

The web server is not setting the content type for css fonts. This is resulting in issues with caching these fonts.

You can reproduce issue with this repo : https://github.com/oliveti/angular-sw-font-bug Run ng build --prod and run server from dist.

Or have a look at 'content type' missing in screen captures :

With http-server (OK)

With live-web-server (NOK)

Thank you

[75lb]

If the ws response is correct (first screenshot) and the service worker response is broken, then doesn't that indicate an issue with the service worker and not ws?

[oliveti]

Actually first screenshot is with another web server http-server, but the service worker call happen Because of the missing content type

[75lb]

I downloaded and tested your project, everything is working fine.. the right tab shows both a ttf and woff2 file responding with the correct content-type. Please clear all your service workers and try again.

[oliveti]

I tried also directly with curl, issue seems to come from cache :

MBP-de-Olivier:temp olsp$ curl -I 'http://localhost:4200/assets/fonts/Roboto-Regular.ttf' -H 'If-None-Match: W/"29e9c-1662e850f73"'
HTTP/1.1 304 Not Modified
Vary: Origin
Accept-Ranges: bytes
Last-Modified: Mon, 01 Oct 2018 07:26:04 GMT
Cache-Control: max-age=0
ETag: W/"29e9c-1662e850f73"
Date: Mon, 01 Oct 2018 09:21:24 GMT
Connection: keep-alive

MBP-de-Olivier:temp olsp$ curl -I 'http://localhost:4200/assets/fonts/Roboto-Regular.ttf' -H 'If-None-Match: W/"29e9c-1662e850f73-modified"'
$HTTP/1.1 200 OK
Vary: Origin
Accept-Ranges: bytes
Content-Length: 171676
Last-Modified: Mon, 01 Oct 2018 07:26:04 GMT
Cache-Control: max-age=0
Content-Type: font/ttf
ETag: W/"29e9c-1662e850f73"
Date: Mon, 01 Oct 2018 09:21:33 GMT
Connection: keep-alive

But in that case that's an expected behaviour. 304 should not contain any content type header.

[75lb]

it's not an issue, it's the correct behaviour.

[oliveti]

But still, something is preventing the service worker to cache the font with this web server, I will try to investigate a bit more on this.

[oliveti]

I think what is preventing the service worker from caching could be the behaviour to return an Access-Control-Allow-Origin whenever ws receive an Origin header. And it seems that Chrome is sending an Origin header for font calls made from css.

[oliveti]

Do you want me to open another ticket for this issue ? Would be great to be able to enjoy service workers with this tool.

[75lb]

it's not a bug, no need for another ticket thanks.. If you don't require blanket CORS behaviour, remove CORS from the stack.. Read this wiki page on using middleware then specify a stack which suits you better, e.g. just spa, static and index: ws --stack spa static index.

[oliveti]

Thank to you for your detailed explanations, that's working like a charm !

[75lb]

Good, pleased to hear that. If you feel the documentation could be more clear, feel free to edit the wiki - thanks. 👍