My AngularJS app behaves similarly to Gmail, in that it loads up a bunch of data to the browser with a "loading" screen. There are 3 javascript objects being retrieved from my database here and they take a little a few seconds each to load.
Once loaded, they permeate through the app and are used in various views and controllers.
However, if a user opens up one of the app's links in a new tab, they obviously to be re-loaded. I can see why this happens, but I'd much rather save the 5-10 seconds of loading time for the user and have someway of sharing the data between different tabs.
Is this possible at all, perhaps using Angular's $cookie service or caching? I'm quite new to this style of programming so detailed answers are most definitely appreciated!
As the two people above answered, you can do this via LocalStorage. However, if you begin to write your data to the LocalStorage, and try to keep the LocalStorage in sync with your server storage, that task quickly becomes a full time job that is full of bugs. Use a library for this.
THIS SITE has a few options.
Related
Looking for some advice for having multiple tabs open in a single browser but only one communicates with the server.
Best practices, frameworks etc.
figured there might be a framework that already handles this idea through local storage or cookies but couldn't seem google one or find a previous post that addresses this problem.
At this point i'm looking to role my own via by keeping a list of tabs and assigning one to make calls to the server and share the data via local storage.
update.
found this Duel.js will investigate.
Alright after some playing around with DuelJS it appears to be what I was looking for in terms of a existing API.
Managed to get it working in within a Angular 2 typescript project and I'm pretty happy with the result.
Basically I have single web page open in two tabs one being a master tab that is making all the calls to the server/database and broadcasting the result the slave tab where the component/view is updated.
Still interested in other peoples thoughts?
I have an ASP.net MVC application with a "Wallboard" screen. The problem is that this particular page takes a long time to load (it has to cycle through a bunch of databases and calculate several numbers to be displayed).
When I clicked on the "Wallboard" menu item, the browser wheel would spin for ~30 seconds before bringing up the page. I know this is very obnoxious for users, so I decided to store the previous values of the strings being displayed (last time the page was loaded) in a cookie and instantly load the page with those strings while an AJAX call retrieved newer values.
The page indicates that it's retrieving newer values, but these values don't change that often, so it's useful for the user to be able to see older values right away.
It's working but my question is, are cookies the best way to store this data? The server doesn't really care at all what values are stored, just that the page instantly loads instead of hanging. If the page has never been loaded then the wallboard is blank until the AJAX call completes.
No, it is likely not a good idea, unless it is very small amount of data.
I more appropriate solution would be to use the Caching
For example, this will cache the database data for 30 minutes, at which point the cache will expire, so any one who access the page will get a cached version and that will speed up your web site dramatically.
Cache.Insert("key", "database-data", null, DateTime.Now.AddMinutes(30), TimeSpan.Zero);
Cookies are not the right way to store large amounts of data on the client side as they are transferred to the server with every request.
I recommend you to take a look at the Local Storage API.
If you need to store a significant amount of data and require common database features, take a look at
IndexedDB.
I am creating a complex social networking website that is all one single page that never refreshes unless a user presses the refresh button on the browser.
The issue here is that when I edit files and upload them to the server they don't take effect unless the user refreshes the browser.
How would I go about and fix this problem? Should I do a time interval of browser refreshes? Or should I poll the server every 10 minutes to check if the browser should do a refresh?
Any suggestions?
Server
I would communicate the version number through whatever means you're already using for data transfer. Presumably that's some kind of API, but it may be sockets or whatever else.
Whatever the case, I would recommend that with each response - a tidy way is in the header, as suggested in comments by Kevin B - you transmit the current application version.
Client
It is then up to the client to handle changes to the version number supplied. It will know from initial load and more recent requests what the version number has been up until this point. You might want to consider different behaviour depending on what the change in version is.
For example, if it is a patch number change, you might want to present to the user the option of reloading, like Outlook.com does. A feature change might do the same with a different message advertising the fact that new functionality is available, and a major version change may just disable the site and tell the user to reload to regain access.
You'll notice that I've skated around automatic reloading. This is definitely not a technical issue so much as a UX one. Having a SPA reload with no warning (which may well result in data loss) is not the best and I'd advise against it, especially for patch version changes.
Edit
Of course, if you're not using any kind of API or other means of dynamically communicating data with the server, you will have to resort to polling an endpoint that will give you a version and then handle it on the client in the same way. Polling isn't super tidy, but it's certainly better - in my strong opinion - than reloading on a timer on the offchance that the application has updated in the interim.
Are you talking about changing the client side code of the app or the content? You can have the client call the server for updated content using AJAX requests, one possibility would be whenever the user changes states in the app or opens a page that loads a particular controller. If you are talking about changing the html or javascript, I believe the user would need to reload to get those updates.
I'm developing a PhoneGap application. If you don't know what that is, it's a service that allows you to build mobile-based applications using HTML, CSS and JavaScript.
I have an application, and I've come to a point where I need to transfer information from one page to another. The user chooses an option on the page, the application then loads a new page and based on their option it loads specific content.
Now I do already know a few ways of doing this, to name one.. local storage maybe. My question is, what is the most efficient way of getting information between these two pages? If this were PHP I'd simply using $_GET[''].. but it's not PHP, I'm looking for the best way to do this using HTML, CSS, and JavaScript.
Any help here would be highly appreciated!
There are several possibilities:
You are using a service like Phonegap:build or Cordova: You only gonna have one HTML-File where you continously hide and show the different pages. I don't recommend this one, but Phonegap:build and Cordova are great to create a package for all major phones, without headache.
URL-Parameters you could pass parameter over the URL to a different HTML-Page. This means you have to open all links with window.location.replace() or change the href-attribute on you anchors. In the next page you have to parse that URL, which is not as easy as in PHP.
localStorage / sessionStorage you can easily store data in the sessionStorage. With sessionStorage.myObject = JSON.stringify(complexObject) you can easily store complex objects to the session storage and read them back with var complexObject = JSON.parse(sessionStorage.myObject). Those are available during you complete session and would be one of the easiest solutions so far.
I have an html5/javascript application in which multiple users can be viewing the same set of data of any given time. For the sake of a real world example, lets say its a calendar type page.
So user1 is looking has the browser open and looking at the calendar page and user2 is also on the calendar page. User2 makes a change to the calendar and i'd like (as quickly as possible) for those changes the be recognized and refreshed on user1's screen. What is the best way to do this?
I'm thinking about have a mysql table for active users that stores the page they are currently on and a timestamp for its last update, then use ajax calls to ping the server every few seconds and check for an updated timestamp, if its newer than what they have client side, the new data gets sent and the page "reloaded." I am putting reloaded in quotes because the actual browser window will not be refreshed, but a function will be called via javascript that will reload the page. Sort of the way stack overflow performs its update checks, but instead of telling the user the page has changed and providing a button for reload, it should happen automatically. If user1 is working away on the calendar, it seems it might be quite annoying for user2's screen to constantly be refreshing...
Is this a horrible idea? Is pinging the server with an ajax request every few seconds going to cause major slow downs? Is there a better way to do this? I would like the views on either users side to be real time because its important that user1 not be able to update an element on the calendar page that user2 has already changed.
Update: based on some web sockets research it doesnt seem like a proper solution. First its not compatible with older browsers and i support ie8+ and second i dont need real time updstes for all users on the site. The site is an account based applicatiin and an account can have multiple users. The data needs to sync between those users only. Any other recommendations would be great.
You need realtime app for this. You should have a look at socketio. Everytime a user log in, you make him listen for changes on the server. Then when something changed on the server, every users listening are notified.
you can find examples on the official website : http://socket.io/