Open ebenezerdon opened 3 years ago
Have you found any workarounds to solve this issue? @ebenezerdon I have the same issue
Did you also remove the process.env.NODE_ENV === 'production' to get it to work on localhost? I have the same problem but seems we are trying to load the 404 error page instead of the service-worker.js, since the service-worker.js file is in the src directory and not the public directory. When I build first and run it with "serve -s build" it works fine. Not very practical for development. Any suggestions for better development flow would be appreciated.
process.env.NODE_ENV === 'production'
Yes You need to remove and save it as a comment near by temporarily
Facing the same issue @ebenezerdon any fixes or work arounds found yet ?
workaround - deploy a production build to a local static server:
npm run build && npx serve -s build
I ended up fixing it by updating serviceWorker scripts with the newest version of CRA. Just generate a new project and copy the relevant files over.
@robinjhuang - that didn't work for me (i created the app with the pwa template today, so i'm assuming it's the latest version as well). it still has the issue of the import statements that cannot work without being transpiled (due the desperate module systems). how did you overcome that?
or do you mean the latest version of the core template, and not the pwa?
@eliranmal What error are you seeing regarding import statements? I never had import statement errors. That seems like a different issue.
My understanding of the MIME type error is that indicates that the service worker did not register correctly.
I just ran npx create-react-app my-app --template cra-template-pwa-typescript
copied over service-worker.ts and serviceWorkerRegistration.ts and updated my index.tsx.
well, in typescript all the code is always pre-processed by the typescript compiler (even files inside the public directory, if they are .ts*
files).
this is not the case in vanilla javascript, where copying the file would suffer broken dependencies (since no dependency resolution can done by the module builder in such code; what is the meaning of import Something from 'something'
in the public directory, without transpilation?)
by the way, the mime type error happens before the service worker has a chance to register (or even load its module code) - it is thrown because the server is not set up to serve this path/uri pattern, or due security restrictions in the client.
Sorry, can you explain your set up? You're not using typescript I'm assuming. Also, here are my file locations. They're not in public/
myapp/src/service-worker.ts
myapp/src/serviceWorkerRegistration.ts
myapp/src/Root.ts
my setup is an unejected create-react-app
application, built using the vanilla javascript variant of the pwa
package.
i'm not sure anymore that the problem can be resolved by manually copying the file. i believe that's the job of the workbox plugin (that eventually receives this file's path), but for some reason it's blocked in development (i presume due known issues with the devserver).
can't help much more 🤷
Given this issue was encountered on Windows and seems to match the symptoms we experienced on Windows I'm wondering if this PR would be relevant: https://github.com/facebook/create-react-app/pull/11640
Has anybody figured this out?
I have created a fresh project using npx create-react-app my-app --template cra-template-pwa
for vanilla JS setup
And it's not working for localhost.
Note: I have already removed this condition:
Also I have tried the solution suggested here: https://stackoverflow.com/questions/49566059/service-worker-registration-error-unsupported-mime-type-text-html But it didn't work
The following steps worked out for me and resolved the issue.
Move the serviceWorkerRegistration.ts file from Public folder to a common folder under src folder.
Register the serviceWorkerRegistration file into the respective location:
let newSw = await navigator.serviceWorker.register( '/serviceWorkerRegistration.ts' );
When working on localhost, you need to do this:
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const path = require("path");
module.exports = function override(webpackConfig, env) { //do stuff with the webpack config... const isEnvDevelopment = env === "development"; if (isEnvDevelopment) { const newConfig = { ...webpackConfig, plugins: [ ...webpackConfig.plugins,
new WorkboxWebpackPlugin.InjectManifest({
swSrc: path.resolve(__dirname, "src/service-worker.js"),
dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
}),
],
};
return newConfig;
} else {
return webpackConfig;
}
}
5. Modify your package.json to use `"start": "react-app-rewired start"` while you dev...
That's it... now, the service worker that is at `src/service-worker.js` will exist in the public folder when running on dev mode.
A thing to notice... it won't have HMR... any modification to the service-worker.js will require you to stop and restart the server, also, close the window and open it again (to let the new modified service worker take control)
Have you found any workarounds to solve this issue? @ebenezerdon I have the same issue
Hello i use antd pro. was setting up pushy notifications. for this issue i just
service-worker.js
to /public
directory.url/serivce-worker.js
Describe the bug
Using the create-react-app-typescript-pwa template to generate a progressive web app returns the following error when `serviceWorker.register() is called:
checkValidServiceWorker()
function in./src/serviceWorkerRegistration.ts
:Did you try recovering your dependencies?
Yes
Please paste the output of
npm --version
and/oryarn --version
to confirm. -->7.6.1
Which terms did you search for in User Guide?
PWA, TypeScript, Workbox, Service worker
Environment
current version of create-react-app: 4.0.3 System: OS: Windows 10 10.0.17763
Steps to reproduce
npx create-react-app my-app --template cra-template-pwa-typescript
serviceWorker.unregister()
toserviceWorker.register()
Expected behavior
Actual behavior
Service worker not registered