Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Service Worker Bug in Production, works in dev. #3516

Closed
J4K0B opened this issue Nov 28, 2017 · 4 comments
Closed

Service Worker Bug in Production, works in dev. #3516

J4K0B opened this issue Nov 28, 2017 · 4 comments

Comments

@J4K0B
Copy link

J4K0B commented Nov 28, 2017

Is this a bug report?

Yes

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

Yes

Environment

  1. node -v: 8.2.1

  2. npm -v: 4.6.1

  3. yarn --version (if you use Yarn): 1.2.1

  4. npm ls react-scripts (if you haven’t ejected): empty

  5. Operating system: Windows 10 Pro Insider Preview Build 17025 64Bit

  6. Browser and version (if relevant): Chrome: 62.0.3202.94 Firefox: 57.0

Steps to Reproduce

(Write your steps here:)

  1. clone and install https://github.com/J4K0B/CryptoMemesClient
  2. run npm run build or yarn build
  3. open localhost:5000 in Chrome
  4. change staticCacheName variable in build/sw.js and reload page in chrome

Expected Behavior

Expected the new Service Worker to be "waiting to activate" in Chrome Dev Tools Application tab.

Actual Behavior

New Service Worker is quickly flashing up as installing but vanishes again shortly after.

Additional Information

Doing the same steps leads to the intended behaviour in Firefox.
If I hit Update in Chrome Dev Tools application tab, the App works as expected.
Editing the file in the public folder while in dev mode leads to the intended behaviour in Chrome after hot reload, too.

@gaearon
Copy link
Contributor

gaearon commented Nov 28, 2017

@jeffposnick

@jeffposnick
Copy link
Contributor

You're seeing this because serve is adding in HTTP Cache-Control headers to sw.js, and Chrome (still, unfortunately 😦) honors those headers. Firefox no longer honors them.

screen shot 2017-11-28 at 4 04 54 pm

Back when service worker generation was added to this project, I'm fairly positive that serve was not locally caching anything by default, which led to the type of local "staging" experience that matched what's recommended for development.

I'm going to take a look through https://github.com/zeit/serve/releases and https://github.com/pillarjs/send/releases (which appears to handle the HTTP communications under the hood) to figure out when this behavior changed, and whether it was intentional.

If serve continues to cache everything by default, and also continues to be the tool recommended by npm run build's output, then that will lead to a lot more folks bumping up against this in Chrome, which is not good.

@jeffposnick
Copy link
Contributor

jeffposnick commented Nov 28, 2017

It looks like this is due to serve -s (SPA mode) being used. The caching defaults for that mode changed back in July (commit), which made it into the 6.0.1 release of serve.

There are a few different options:

  1. Update c-r-a to recommend serve -s -c 0 build to host locally with caching disabled.
  2. Work with the folks who maintain serve to get /sw.js and /service-worker.js exempted from caching by default when serve -s is used: Disable /service-worker.js and /sw.js caching in SPA mode? vercel/serve#299
  3. Recommend something other than serve, which seems like a big change to make.
  4. Disable service worker registration, which also seems like a big change to make.

@J4K0B
Copy link
Author

J4K0B commented Nov 29, 2017

Thank you so much for looking into it!

@Timer Timer closed this as completed Dec 5, 2017
@lock lock bot locked and limited conversation to collaborators Jan 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants