Initially posted this on reddit but got no response.
I last used service workers a couple years ago using CRA 3
The way I understood it was, just call the register function in the index.js file and voila, it's more-or-less working.
Pass in an config object to the call to add customizability. For me, all I needed it was for calling a callback that set redux state that was being listened to on a component that notified users if a new version was available via a snackbar. It was super easy and worked well.
Now I'm trying to implement similar functionality in CRA 4 and there's a whole layer of Google's workbox api on top of it; I'm sure it's super useful and necessary for some, but for my case -- just a call back after serviceworker registration -- it's a PITA.
First my service-worker.js file wasnt being built into the public directory so was resulting in 404s.
Only way out apparently was to create a new CRA app using cra-template-pwa then copy over the relevant files, which I've done.
Now the precaching workbox plugin is complaining about not being able to find my index html file as well as other static assets (have a multi-frontend app structure where those assets are in /app/frontendapp1(2,3,...n)/)
I've tried messing with the copied over service-worker.js file in src but my changes aren't being reflected in the public/service-worker.js file ...
Every reading I'm finding is getting really into the usages of each plugin, without an overall picture of react app via CRA -> serviceworker -> workbox. Anyone able to articulate ? Also have a couple of questions:
1- how does the public/service-worker.js file get built? Auto?
2 - is there a way to configure the public url for the precaching workbox?
Related
So I have an existing Create React Application and I want to be able to build a chrome extension to work in conjunction with it. Is there a away I can use webpack or something so that my extension kind "lives in" the React application? I want to do this because the existing application is quite large and I don't want to have to make changes (UI, api, or otherwise) twice. In my head I'm picturing it something like this:
- MyApplication/
- src/
- index.html
- App.tsx
- components/
- <bunch of other useful stuff>
- extension/
- index.html
- Extension.tsx (equivalent of App.tsx in react app)
Basically I'd be able to import whatever I need into the extension and run some command like build extension and it would bundle just the files and dependencies imported and necessary for the extension and output that to some directory I can upload to the Chrome Web Store.
I also briefly considered splitting the application into into something like MyApplication-core, MyApplication-web, and MyApplication-extension or something and just installing core in both web and extension but not sure if that's the best strategy or not. The first strategy I outlined seems simpler to maintain but I could be wrong.
Also, if there is another strategy I haven't thought of please let me know! Happy to add clarification if necessary as well! TIA!
Just build it and add manifest with required configurations. After this you will have posibility to load it as an extension.
Recently I've been unable to load javascript scripts to my webworkers in react for some reason. It always responds with index.html.
My config is simply a standard create-react-app app. The screenshots are from my actual project but I have confirmed that the problem persists if I create a new project and try to initialize a minimal example.
Each ffmpeg.* file is affected. This is also not specific to ffmpeg since another library had the same issue - thankfully the initialization of that library is simpler so I was able to simply put that libraries worker-file in the public folder - and that worked.
It might be a stupid question but I'm really at my wits end here and I can't figure out how to investigate further.
Thank you <3
EDIT:
It works if I put all the files it is trying to hit in the public folder - so it has to be some kind of context issue(??) This seems like a really stupid way to go about it. It's not in a worker at the point of loading - it's the worker loader that fails to access the stuff it needs in the node_modules folder, (core script, worker script and wasm code). Whet?
I was trying to integrate a React.js app in Cordova. Everything goes well, but I was not able to debug the app in the simulator. With chrome://inspect it seems like there's no way to do it, because I can only see the "compiled code". Any solution? Thanks
Maybe there is another better way, but what do the trick for me is to build react with some custom files that i took from node_modules/react-scripts/
(i do that, to avoid react eject)
You need all the sources map on your app.
React by default, use a certain webpack config, but that config doesn't work in your phone.
By default, react use this
You can check it on the file node_modules/react-scripts/config/webpack.config.js
What i do, is to build react with the next webpack config
devtool: "eval-source-map",
So you must
Copy these files on your source code and adapt some imports (there are some import with relative path) You only need these two files
node_modules/react-scripts/scripts/build.js
node_modules/react-scripts/config/webpack.config.js
On the first one, modify it to use the second one,
On the second one, add this devtool: "eval-source-map"
Create new task on package.json , new custom build to use the script your custom build.js
Build with this script, and copy all the source maps with your code, and thats it.
The debug could crash sometimes, (i try it also with iphone + safari, sometimes works, sometimes don't so you must keep trying)
On android tend to work in a better way.
The debug is a little bit slow in compare to the web debug.
I hope this works for you too.
(Sorry for my bad English)
I am building an Single-Page-Application where the front end is using ReactJS, and React Router.
The application shall be hosted with conventional app server either Tomcat or Weblogic (just due to whatever reason as required by our client).
My question is straight forward: in React, how could I get the application context path which is equivalent to request.getContextPath() as in jsp? I did many searching in google, but none of it could just give me a straight to the point answer. Whether react having such equivalent function? Or if I could grab this path from JSP? If so, how to grab it?
Thanks.
I had this problem as well and solved it like this:
In reactjs, when you are building your app for production, you need to run "npm run build".
To build it correctly, you need to set the homepage property in package.json to the main url of your site.
In my case I am using http://localhost:3000 for local development, and http://localhost:8080/myapp for stage testing.
That app needs to know if there is a "myapp" in the url or not. This is basically the problem of this post.
My answer is, because you need to specify the homepage property in package.json anyway, I am using this value to find my context path.
I am doing this like this:
{packageJson.homepage.substring(packageJson.homepage.lastIndexOf("/"))+"/login"}
For my test environment this returns: /login
For my stage environment this returns: /myapp/login
Maybe this helps.
I minified/built my app that uses ExtJS 4.2.0 (free version) using Sencha SDK Tools 2.0.0 beta3, and the app was built successfully. However, when I try deleting the old "app" folder containing my old classes, the app no longer works.
I also tried generating a new app using Sencha CMD 4.0.1.45 and then adding my classes, but the results are the same.
I am confused why this happens, because as I understood it, your old classes are not needed to deploy production app. In fact, the only javascript files you need to include in your "index.html" file are "ext.js" and "app-all.js".
I used Firebug and saw in the DOM that the app, along with my classes, are loaded.
I also noticed that "app-all.js" defines classes like this:
Ext.define("MyApp.view.MyClass"...
Is this really how it is supposed to behave? or am I missing something?
Thanks in advance!
Okay, I got it. A .js file in my application calls Ext.require on itself, causing the app wiring go crazy.