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 does not cache script files #4181

Closed
wesleycho opened this issue Mar 19, 2018 · 8 comments
Closed

Service worker does not cache script files #4181

wesleycho opened this issue Mar 19, 2018 · 8 comments

Comments

@wesleycho
Copy link

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes, although this is irrelevant to this issue

Which terms did you search for in User Guide?

Service Worker, Service Workers

Environment

  1. node -v: 8.9.1
  2. npm -v: 5.5.1
  3. yarn --version (if you use Yarn): 1.5.1
  4. npm ls react-scripts (if you haven’t ejected): 1.1.1

Then, specify:

  1. Operating system: macOS 10.13.5
  2. Browser and version (if relevant): N/A

Steps to Reproduce

(Write your steps here:)

  1. Create a new project with CRA
  2. Execute a production build (yarn build)
  3. Serve the application behind a server that intercepts requests to any static assets in the built project and redirects for authentication
  4. Expire the authentication session
  5. Refresh

Notice then that the app script is never cached, which then is requested by the browser and returns potentially a login page from the server redirection

Expected Behavior

I expect the service worker to cache main.js.

Actual Behavior

The service worker generated does not include any JS script reference.

Reproducible Demo

Unfortunately I cannot link a reproducible demo here for legal reasons.

Note that this was reported prior in #3595 but never fixed. This is a serious issue for us because if the index.html file is cached but the script is not, when the service worker loads the cached index.html file, it will then make a request for the app script, but the request will never properly return the data because of the authentication layer. Disabling the authentication requirement is not an option, so our only workaround currently is to disable the service worker.

There does not appear to be a technical limitation preventing this from being possible that I can tell, as the CSS is properly cached by the service worker, and the service worker precache webpack plugin does support script caching with importScripts.

I would love to see this fixed, as it is the only issue gating us using service workers - unfortunately I do not have the time until at least a month later to start to do a deep dive & get legal approval (impending work deadline & vacation for a month). I would be happy to demonstrate a reproduction in person though if necessary (I work for one of the biggest tech employers in the South Bay if it helps).

@andriijas
Copy link
Contributor

can you provide your asset-manifest.json and service-worker.js from your build dir or create an isolated repository demonstrating the issue?

@wesleycho
Copy link
Author

Unfortunately no, due to legal reasons. This should be wholly reproducible from scratch (minus the authentication steps) and can be easily seen from code analysis of the generated service worker & there being no inclusion of the app script main.js anywhere though.

@andriijas
Copy link
Contributor

I scaffolded a new CRA app and compiled the production build. the main.js is in the service-worker.js file.

Whats the file size of your main.js?

@wesleycho
Copy link
Author

1.9 MB - this should be fine based on what I see https://github.com/GoogleChromeLabs/sw-precache#maximumfilesizetocacheinbytes-number

@surielmx
Copy link

surielmx commented Apr 9, 2018

Hi, I have the same issue, my project has service worker, but apparently don't exists. Lighthouse respond 'Does not register a service worker'. Do I need to do extra configuration?

@drewbard
Copy link

drewbard commented May 8, 2018

Most likely the issue is your bundled javascript is larger than the default 2 MB sw-precache limit. To help debug this you should comment out https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/webpack.config.prod.js#L475 to see if it's skipping a static resource. You can also check out your bundled js with source analyzer.

Maybe this max size should be emphasized in the service worker section of the README?

@jdetle
Copy link

jdetle commented May 10, 2018

@drewbard, I think from previous conversations the fix should also include a meaningful error message in the build process.

See #4260, #3882 (comment).

It's important to note that errors from this ARE NOT solved by unregistering the service worker.

@stale
Copy link

stale bot commented Nov 2, 2018

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 7 days if no further activity occurs.

@stale stale bot added the stale label Nov 2, 2018
@Timer Timer closed this as completed Nov 2, 2018
@lock lock bot locked and limited conversation to collaborators Jan 9, 2019
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants