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?
Related
Hi if I have our same reactjs screen opened on two separate browser windows, how do make sure they are always in sync (i.e., changes on one will reflect on the other)? It seems that redux does not help here?
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();
What's the best practice of loading data at launching Chrome App?
The landing page of my Chrome App is dependent on some configuration data, which I've stored in the chrome local storage. However, reading chrome local storage is an asynchronous process. Hence, after the App has launched, there is a period of time when the landing page doesn't show correctly.
To avoid this blank time (due to the asynchronous process of reading local storage), I'm thinking about reading data at background JS. However, I haven't googled out what's the best practice to do it.
Anybody has any comments? Thanks.
just listen to the onLaunched event
chrome.app.runtime.onLaunched.addListener(function() {
// load your data
});
Here's one piece of helpful suggestion I've got from the Google Group. Share here so that someone with the same problem might refer to it:
You can read from chrome.storage in the background page and open the window when the data is ready. However, the user experience might be even worse, because instead of the incorrect landing page, you have no user feedback at all.
The usual (and easy to implement) solution is to show your landing page with some visual feedback during data loading, like a spinning wheel with a "Loading" label. If you UI really requires the data to show up, you can add this visual indicator as an opaque div on top of the whole window.
Some people use splash screens, but I don't think it adds to the user experience.
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.
I'd like to use the Notification API to create toast notifications for a Silverlight app designed to run both in and out of the browser, but the NotificationWindow class is only available OOB.
Does there exist anything that can replicate the behaviour inside the app? My idea is to have a container in the bottom right of the screen overlaying all other content. Then, create a wrapper which detects OOB-mode, passing params to the Notification API if possible, or populating and showing my own container if not. Is there anything that does this available?
It seems strange that MS chose not to implement something like this, as has been pointed out before.
Displaying a notification in browser is simple. You just need to use a popup and make it appear in the right place. See the following post as an example.
Now the difference with that approach is that the notification will show inside the browser. In OOB it shows outside the window and it's visible even if the windows is minimized. Due to security reasons it's not possible to directly do this.
Out of interest, Chrome Applications like Tweetdeck and Gmail, are able to display notifications outside of the browser. I think this might be a possiblity, but not exactly a Silverlight and cross browser solution.