{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/create-react-app/issues/3882","repository_url":"https://api.github.com/repos/facebook/create-react-app","labels_url":"https://api.github.com/repos/facebook/create-react-app/issues/3882/labels{/name}","comments_url":"https://api.github.com/repos/facebook/create-react-app/issues/3882/comments","events_url":"https://api.github.com/repos/facebook/create-react-app/issues/3882/events","html_url":"https://github.com/facebook/create-react-app/issues/3882","id":290234107,"number":3882,"title":"Cached SW index.html gets a 404 error on old bundle","user":{"login":"rovansteen","id":14931924,"avatar_url":"https://avatars0.githubusercontent.com/u/14931924?v=4","gravatar_id":"","url":"https://api.github.com/users/rovansteen","html_url":"https://github.com/rovansteen","followers_url":"https://api.github.com/users/rovansteen/followers","following_url":"https://api.github.com/users/rovansteen/following{/other_user}","gists_url":"https://api.github.com/users/rovansteen/gists{/gist_id}","starred_url":"https://api.github.com/users/rovansteen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rovansteen/subscriptions","organizations_url":"https://api.github.com/users/rovansteen/orgs","repos_url":"https://api.github.com/users/rovansteen/repos","events_url":"https://api.github.com/users/rovansteen/events{/privacy}","received_events_url":"https://api.github.com/users/rovansteen/received_events","type":"User","site_admin":false},"labels":[{"id":608169145,"url":"https://api.github.com/repos/facebook/create-react-app/labels/issue:%20question%20%3E%20PWA","name":"issue: question > PWA","color":"c5def5","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-01-21T00:03:38Z","updated_at":"2018-02-02T13:47:14Z","closed_at":null,"author_association":"NONE","body":"### Is this a bug report?\r\n\r\nYes\r\n\r\n### Did you try recovering your dependencies?\r\n\r\nYes, happened on multiple deployments.\r\n\r\n### Which terms did you search for in User Guide?\r\nRead the parts about service worker and also searched for similar issues, found this one: https://github.com/facebookincubator/create-react-app/issues/3613 but that was about chunking, which I do not use.\r\n\r\n### Environment\r\n\r\n1. `node -v`: 9.4.0\r\n2. `npm -v`: 5.6.0\r\n3. `yarn --version` (if you use Yarn): 1.3.2\r\n4. `npm ls react-scripts` (if you haven’t ejected): n/a\r\n\r\nThen, specify:\r\n\r\n1. Operating system: Mac OS High Sierra\r\n2. Browser and version (if relevant): Google Chrome 63\r\n\r\n### Expected Behavior\r\n\r\nWhen I deploy a new version of my application I expect it to load the old HTML and load the old JS bundle from it's cache. If that's no longer available (for whatever reason) it should fetch the new HTML and with that also the new JS bundle.\r\n\r\n\r\n### Actual Behavior\r\n\r\nThe service worker serves the old index.html, but it tries to get the JS bundle from the server. Because a new version has been deployed that bundle is no longer there, so it receives a 404 error, resulting in a white (broken) page. Refreshing the page fixes the issue.\r\n\r\nThe contents of my index.js\r\n```jsx\r\n// @flow\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport registerServiceWorker from './registerServiceWorker';\r\n\r\nimport Organisation from './apps/organisation';\r\n\r\nconst release = process.env.REACT_APP_GIT_COMMIT;\r\n\r\n// Set up Sentry\r\nif (process.env.NODE_ENV !== 'development') {\r\n  window.Raven.config(\r\n    'https://secret@sentry.io/secret',\r\n    { release },\r\n  ).install();\r\n}\r\n\r\nconsole.log(`Commit: ${String(release)}`);\r\n\r\nconst element = document.getElementById('root');\r\n\r\nif (element) {\r\n  ReactDOM.render(<Organisation />, element);\r\n}\r\n\r\nregisterServiceWorker();\r\n```\r\n\r\nHere screenshots of the network tab during the 'broken state'\r\n\r\n<img width=\"1916\" alt=\"screen shot 2018-01-21 at 00 57 49\" src=\"https://user-images.githubusercontent.com/14931924/35189257-d50497f6-fe46-11e7-946b-3ceaf95038cd.png\">\r\n\r\n<img width=\"898\" alt=\"screen shot 2018-01-21 at 00 58 10\" src=\"https://user-images.githubusercontent.com/14931924/35189258-d522aade-fe46-11e7-81cb-2d78d43bdb36.png\">\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/create-react-app/issues/comments/362590606","html_url":"https://github.com/facebook/create-react-app/issues/3882#issuecomment-362590606","issue_url":"https://api.github.com/repos/facebook/create-react-app/issues/3882","id":362590606,"user":{"login":"rovansteen","id":14931924,"avatar_url":"https://avatars0.githubusercontent.com/u/14931924?v=4","gravatar_id":"","url":"https://api.github.com/users/rovansteen","html_url":"https://github.com/rovansteen","followers_url":"https://api.github.com/users/rovansteen/followers","following_url":"https://api.github.com/users/rovansteen/following{/other_user}","gists_url":"https://api.github.com/users/rovansteen/gists{/gist_id}","starred_url":"https://api.github.com/users/rovansteen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rovansteen/subscriptions","organizations_url":"https://api.github.com/users/rovansteen/orgs","repos_url":"https://api.github.com/users/rovansteen/repos","events_url":"https://api.github.com/users/rovansteen/events{/privacy}","received_events_url":"https://api.github.com/users/rovansteen/received_events","type":"User","site_admin":false},"created_at":"2018-02-02T13:47:13Z","updated_at":"2018-02-02T13:47:13Z","author_association":"NONE","body":"@jeffposnick I'm not sure how I can see the unminified file size with `create-react-app` but I can confirm that code splitting fixed this problem. I think it's a good thing that large files are not downloaded for offline usage but it would be good to show the message if the file size is too large. I now have to manually check the `service-worker.js` before deploying to make sure that all chunks are in there because if they don't my site breaks on the next deployment.\r\n@gaearon would it be possible to show that message?"}}
{"actor":{"display_login":"rovansteen"}}