sw-precache config incorrectly serves favicon.ico (with index.html)

[Enselic]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

I read https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app

Environment

1. node -v: v6.10.3
2. npm -v: 4.6.1
3. yarn --version (if you use Yarn): Not used
4. npm ls react-scripts (if you haven’t ejected): react-scripts@1.0.10

Then, specify:

1. Operating system: Linux SVP1321M2EB 4.4.0-53-generic Recursively copy the template folder #74-Ubuntu SMP Fri Dec 2 15:59:10 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux
2. Browser and version (if relevant): Google Chrome Version 59.0.3071.86 (Official Build) (64-bit)

Steps to Reproduce

1. create-react-app favicon-sw-repro
2. cd favicon-sw-repro
3. npm run build
4. npm install -g serve
5. serve -s build
6. Go to http://localhost:5000/ in a browser that support service workers. I used Google Chrome
7. Then go to http://localhost:5000/favicon.ico in the same browser

Expected Behavior

favicon.ico is served, either by the service-worker or by serve directly

Actual Behavior

index.html is served.
(If you Shift+F5 to bypass service-worker, the correct favicon.ico is served)

Reproducible Demo

This is not a MCVE (although the step-by-step above is) but if you want to see the issue live you can visit
https://sequencediagram.io/ (to install service worker) and then https://sequencediagram.io/favicon.ico

Other info

As far as I know, favicon.ico is not a special case in service workers i.e. a proper service worker should handle favicon.ico properly.

Btw, thanks for create-react-app, it is awesome!

[Timer]

/cc @jeffposnick

[jeffposnick]

Visiting http://localhost:5000/favicon.ico, by entering in that URL in a browser's location bar, triggers a navigation request. The service worker that create-react-app generates has special logic in place to respond to navigation requests with the contents of index.html, which is the expected behavior for a single-page app.

I'm assuming that you navigated to http://localhost:5000/favicon.ico just as a way of checking whether the resource exists and was being served properly. If you'd like to do that, then you can make a non-navigation request for that URL, which will match the behavior of your browser when it requests the URL in order to display the appropriate tab icon.

// Run this manually in the JS console if you want to check your server's response:
fetch('http://localhost:5000/favicon.ico').then(response => console.log(`A response with status ${response.status} was returned.`));

[Enselic]

Thanks for the quick and informative reply, that made the current behavior make more sense.

My original problem was that I added another page.html to public/ that the SW hijacked. To MCVE my problem I reported for favicon.ico. If the solution would have been to make the SW ignore everything from public/ (except index.html of course) it would have worked for me.

However, I totally buy that there is no problem for favicon.ico so, and that multi-HTML builds are out of scope for create-react-app, so I think I will serve page.html from a subdomain to bypass the SW. (I don't want to eject because I like a clean source tree)

Closing the issue since I don't except any action on your part.

[Timer]

Thanks for the informative response, @jeffposnick! Will keep this in mind in the future. 😄