How to close React.js PWA to apply updates? - reactjs

We are developing a React.js PWA.Is it possible to programmatically close application after gets update to apply them?And how?Is there another solution for it??

You can not close the application, you are not allowed to close the tab opened by the user. Only tabs that have been opened with a code can be closed with a code.
This is your problem with killing Application in RAM(app cleaner).
This will clear the cache of the previous version of the application and replace it with the new main.chunk.js.
I have a solution that you can update the program without closing it, for doing this you can use the "clear-cache" React library.

close application after gets update to apply them
This in case of a web application would be killing the caches and refreshing the browser tab.
You can kill caches by applying something like versoning/time stamps/unique id etc to the resource URLs, so that on refresh browser detects them as a new resource that needs to be downloaded.
You can force refresh the app using location.reload();

Related

updating Reactjs PWA without closing it

I have created an app with ReactJS and now I want to make it a progressive web app. I have seen many tutorials and understood how to do it. But I feel there is one problem that, if the UI of the app is updated then the user needs to close the app(smartphone) or browser tab(desktop) in order to get it updated. This is fine for a smartphone but when opened in a desktop some users might keep the website open in a tab and will never see the updated contents. I read that this not possible because updating this way might break some UI components and hence not allowed.
Is there a way to achieve this without the user needing to close the tab and reopen it?

CRA PWA Service Worker not refreshing

I have create-react-app app that uses its stock service worker to cache files.
I want the app to be a downloadable PWA but whenever I update (with heroku & node expressjs..) the users downloaded app never updates.. Even when I refresh (drag down from top).
Have I missed some configuration in the docs to enable the auto update when its a PWA?
or
What is something I can do to either force refresh when updated. (I have read that's bad UI but I'm fine with that)
Notes:
It works as expected when viewing from a browser on a PC. (updates when tabs are all closed)
I found the solution.
The problem wasn't refreshing the app. I had to permanently close it. by swiping up from the multitask view.
Leaving this here in case anyone else didn't realize

Continue downloading even when leave the page

I am using CN1 to developp an application and on one of the pages within the app, there is a download button that triggers a music download from that page and the downloading is working great.
Here is the method i am using to download:
Util.downloadUrlToFileSystemInBackground()
But the problem is once i leave that page the download stops.
How can i continue downloading even if i leave the page that contains the code of dowload?
thanks
Can someone help?
That utility method downloads without blocking the UI, if you stay within the app it will continue downloading if you leave the app it will stop...
I'm guessing you want background to work when exiting the app that requires background fetch.

How to integrate payment gateway in applications created using javascript frameworks like ExtJs?

Our application is a one-page application created using ExtJs. For any user action, the browser tab is never reloaded and all the actions are performed using ajax. A user can open/close multiple ExtJs windows/panels within the same browser tab, and this way everything remains confined to the same browser tab.
Now, we need to integrate payment gateway in the application, which involves redirecting the user to the bank website and having her brought back to our application.
The issue is that when browser redirects the user, then all the application javascript code along with panels and windows get destroyed, and when the user comes back to the application then she finds it to be different from one she left.
As a solution to this, we were thinking of using following two appraoches:
Option 1. Maintaining the state of application - When user leaves for the bank's website then somehow we maintain the state of application - like which windows are opened carrying what data, which variables have which values etc.. and when user returns back, we generate the same application state for her.
Option 2. Have a browser pop-up window for payment gateway - We intend to provide a button which will open a small pop-up window carrying the transaction details, and in this pop-up window the entire payment gateway process will take place taking care of redirection and everything.
Option 1 is proving to be very cumbersome and complicated as maintaining the exact state is not getting feasible.
For Option 2, we are not sure if this is safe and possible?
Has anyone implemented such an approach earlier. Otherwise, what are the other options which we can go for?
Thanks for any help in advance.
I faced the problem and I implemented it using websocket/polling in the main application while a new window pops up for the payment.
After the payment is successful the main application will be notified.
That way each payment runs in it own sandbox totally unbound from the main application which makes maintenance quite easy. Note that our backend create a new session for each payment using the existing one.
I think it is not uncommon to open new windows for payment that's why I decided to go this.

AngularJS: Auto reload

What is the most conventional way to make an AngularJS single page app automatically reload in the browser every time I change its code?
In other words, if I have a code editor open editing the HTML for the AnguarJS single page app, and a browser at that app, side-by-side on the same screen, hitting Save in my editor should instantly trigger the browser to refresh.
Alternatively, same scenario as above except instead of hitting Save on my editor, I did a Commit in my VCS.
Use Grunjs watch task for this.
That is the work of your task runner like gulp or grunt to watch the changes over specified files and perform action. None of this is related to angularjs

Resources