Serve page from cache on navigation back - javascript

Basically what I want is this: https://dev.to/videos
You can select an item -> new page with item loads -> you click on backward button -> the old page is loaded from cache
I want that the same search page shown to user on navigation back, without calling the async fetch method again.
A solution seems to be SPA? But that is an enormous overhead.
I know how to do this with SPA. I need way without SPA.
iPhone, Android and Safari have a backforward-cache enabled by default, so no problem there. Static pages also don't have any problems.
I don't need any excact JavaScript code. I just want to know how do other websites solve this problem? Is SPA the only way? Are there any "frameworks" to solve this problem?

If server allows the page to be cached, your browser won't send a request again before the page expires.
https://stackoverflow.com/a/36554152/14263615

Related

XmlHttpRequest or iframe to load a web application?

I have a little perfomance issue with a web application I am using and I would like to know how can I solve it.
You see, when I enter to my web application, everything starts loading and takes some time since the application make some requests to a database to retrieve some data. I would like to know if I can put an iframe on a blank page with the link to my application so it can start loading inside the iframe making the rest of the page work and not getting stuck.
I've tried adding a XmlHttpRequest on a blank page requesting the web application link but it onlys retrieves the first elements that loads instantly but stops there. It doesn't get all the elements loaded before the first moment since they have some delay to appear because of the database request the web application makes.
How you guys think that I can load my web application inside another page and while my web application loads, I can still use the rest of the other page without everything getting stuck?
I hope you guys could guide me a little bit. Thank you in advance!
I've solved this by adding an invisible iframe that loads the page I need on the background and on the front I retreive everything with my application. Once I finish, I just delete the iframe on the background and move to the next task.

Change URL Path when refreshing site with JavaScript

I'm searching for a lightweight way to change the URL by refreshing the site. Or detect when the URL is an error 404 and redirect it immediately back to the homepage.
I saw some ways with jQuery but I really just want to use something lightweight.
more info:
I'm building a onepager Portfolio which changes sites immediately without refreshing. but I want the to behave like a normal page, So I found a way to change the URL Path so when I click a link it also shows on which page I am in the URL.
The problem is when I refresh the page it wants to load the fake URL which is obviously not existing. So I need a way to change the URL when I refresh to a wrong URL Path.
I will be super thankful if someone has a solution for me because a dream would become true.
when you refresh, browser sends the URI to server to parse it, so there is no way to redirect it client side(ie. javascript)
you have to set up redirect on the server.
what backend are you using? are you using nginx?
You might be looking for this https://es.wikipedia.org/wiki/Single-page_application
Otherwise if you want to set it up a simple page all yourself I would just use CSS visibility in your logic while changing the URL.

History API - tell browser to stay on index.html, regardless of the url

I am making one-page web on my school project. I am using very simple history API, to just change the URL so user thinks he is on another page (but I am hiding and displaying different elements on a page)
It looks like this:
www.mypage.com/main
www.mypage.com/slideshow
When I am using the application with back/forward history buttons it works fine, but when I want to reload the page, the browser tries to load that fake URL and that cause a crash of course. How do I manage to stay always on index.html no matter what url is displayed to the user please?
I tried to manage this with htaccess, but I wasn't sucessful
It seems you are not using a back-end, which is the only way to achieve your desired result. (If my assumption is correct) The browser gives error (cannot load /slideshow after refresh) because it is trying to fetch that file (from you local machine) but that does not exist. SO answer explaining this well.
So in your example you should instruct the back-end to render the same view for all routes (using a wildcard), and do the displaying on front-end based on the given url.
You do not have to use React-Router, but instead create a router-handling function which runs at each refresh (that is, when your javascript is loaded) which tells your page what to render based on what route (or url, call them as you like).
(you will know that the javascript will be run for every url, because the back-end already handles routing with the wildcard, *)
If you want to rewrite all requests to only one URL, you can do so with just
RewriteRule ^ /index.html [L]

JavaScript history.go and load balancer question

I have a web application that I have recently place behind a load balancer. There is a page that has the javascript:history.go(-1) method in a link. The previous page is a form that performs a submit. When I click on the link that performs the go method, going to the server directly, does not try to resubmit the form. But when I click on the same link through the load balancer the form does a resubmit. Does anyone have any ideas on how to perform this task through a load balancer so the link does not resubmit the page?
This behavior could be caused by not having "sticky sessions" enabled in the Load Balancer. It wouldn't know the resulting page load from the go is coming from the same user, so instead of simply displaying the page, it's re-serving it.
Do you know if it has "sticky sessions" enabled or if that's an option?
If possible, use the Post/Redirect/Get pattern for the "previous" page. In other words - process the POST request and instead of returning a result redirect to another page. It will be loaded using GET and the form won't be re-submitted upon navigating back to it.

How can I return home from an a Rails Kiosk Error page without an adress bar or keyboard

Im hosting a rails app on heroku. It runs on the client on a touchscreen with Google Chrome in Kiosk mode, so no browser chrome or keyboard. The login/home page is different for every kiosk.
Error pages are static assets, so I'll have to do this with Javascript. If there is an error I want to display a button that will let the user get back to the home page.
I can't just use a back button script b/c of the potential for multiple errors. I thought about using localstorage to store a reference to the home page, but the error pages are served from a different domain so they wont have access.
Any ideas?
Edit:
This works in Firefox onClick="window.home();" If I set the browser's home page to that particular kiosk. But apparently isn't supported in Chrome. Is there any way to store some kind of variable that any domain can access on a per browser/kiosk basis.
I think you're making this too hard. You already have the information you need to go back stored in "local storage" -- the browser history. Simply use javascript to look at the history and go back as far as you need.
As far as returning to the home page, isn't the home page a well known URI? What's wrong with go home?
Update
Isn't the home page always going to be the first page in the history? You seem to be saying that you're in a situation where you want to return to a page for which you don't know the base URI, don't know how you got where you are, and don't know where you started.
I suppose you could put the place you'd like to go into a cookie, but if you don't even know the base URI, how would you retrieve it?
I'm beginning to think the real answer is "you need to rethink your design, there's something deeply wrong."

Categories