{"action":"opened","issue":{"url":"https://api.github.com/repos/haochuan/create-express-react/issues/3","repository_url":"https://api.github.com/repos/haochuan/create-express-react","labels_url":"https://api.github.com/repos/haochuan/create-express-react/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/haochuan/create-express-react/issues/3/comments","events_url":"https://api.github.com/repos/haochuan/create-express-react/issues/3/events","html_url":"https://github.com/haochuan/create-express-react/issues/3","id":309934415,"number":3,"title":"ServiceWorker registration error via Express wildcard (*) route","user":{"login":"MattSidor","id":6138182,"avatar_url":"https://avatars3.githubusercontent.com/u/6138182?v=4","gravatar_id":"","url":"https://api.github.com/users/MattSidor","html_url":"https://github.com/MattSidor","followers_url":"https://api.github.com/users/MattSidor/followers","following_url":"https://api.github.com/users/MattSidor/following{/other_user}","gists_url":"https://api.github.com/users/MattSidor/gists{/gist_id}","starred_url":"https://api.github.com/users/MattSidor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MattSidor/subscriptions","organizations_url":"https://api.github.com/users/MattSidor/orgs","repos_url":"https://api.github.com/users/MattSidor/repos","events_url":"https://api.github.com/users/MattSidor/events{/privacy}","received_events_url":"https://api.github.com/users/MattSidor/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-29T23:27:59Z","updated_at":"2018-03-29T23:27:59Z","closed_at":null,"author_association":"NONE","body":"In `app.js`, there is one wildcard (asterisk / *) route that redirects to `index.html` for production environments:\r\n\r\n    // Load React App\r\n    // Serve HTML file for production\r\n    if (env.name === \"production\") {\r\n      app.get(\"*\", function response(req, res) {\r\n        res.sendFile(path.join(__dirname, \"public\", \"index.html\"));\r\n      });\r\n    }\r\n\r\nUnfortunately, this means when the browser tries to load `create-react-app`'s pre-configured ServiceWorker at `public/service-worker.js`, it initially gets routed through this wildcard route and gets sent to the browser with the incorrect MIME type of `text/html` in its http headers, resulting in this console error:\r\n\r\n    Error during service worker registration: DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').\r\n\r\nThe solution I found is to add an additional route before the wildcard route for `service-worker.js`:\r\n\r\n    if (env.name === \"production\") {\r\n      app.get(\"/service-worker.js\", (req, res) => {\r\n        res.sendFile(path.resolve(__dirname, \"public\", \"service-worker.js\"));\r\n      });\r\n      app.get(\"*\", function response(req, res) {\r\n        res.sendFile(path.join(__dirname, \"public\", \"index.html\"));\r\n      });\r\n    }\r\n\r\n@haochuan, if you're OK with this solution, I will gladly create a pull request for it."}}
{"actor":{"display_login":"MattSidor"}}