Clearing HTML 5 offline cache programatically - javascript

Is it possible to stop and clear the offline cache (HTML 5) programatically?
Explanation:
I've got a working offline web app. That web app is updated frequently (changing the manifest), causing the browser to request the page from the server again. Now under some conditions (e.g. internal errors) the website may send an error page instead of the actual page under the same URL. This is something i can not prevent. But in that case, i want the brower to stop caching, so the error page is not getting cached and thus not being loaded everytime the user tries to access the URL (since the page might work again already)
I am using C# (ASP.NET) and JS for that website.

Related

Is there any way to reload/refresh another URL opened in another browser on some event in Javascript

In my Web application. I want client page get refreshed automatically whenever changes done on Server. I don't want to set automatic reload option in the browser
I gave it a try with Promise concept but no use
When I click on Submit button from one page then the another page opened in another browser (client URL) should get refreshed as well.
I have accomplished this one using Web Sockets concept. My Application is using Grails framework so by integrating grails web socket plugin I got the result what I had expected.

What's the proper way to inform users to refresh the browser on a SPA website (when .js files are changed)

I'm looking for a proper way to inform users about an updated website version.
Whenever I upload new production .js files some parts of the website still works properly without refreshing the browser, but most doesn't and users might never figure out to just refresh the browser.
How can I give an automatic notice for users to refresh the browser, whenever new .js files are uploaded?
I'm using Vue and Laravel-mix.
A cache buster is required and can be automated with eg. gulp-rev: the concept is to rename resource files at each build, so that they won't be retrieved from cache when the user opens your app.
But it's not sufficient if the browser tab is open and the upgrade is done while the user is using the app. In this case, perhaps you want to display a modal message to refresh the page, or automatically refresh to load the new version.
For that, you should store the version number (or git commit hash) somewhere in your SPA scope when the app is first opened, and periodically check the current backend version with a webservice call. If you detect a version change, you'll display the message (and prevent the user from using its old version).

how to communicate with desktop application from web page loaded over https

I'm trying to make desktop application that receives messages from a page running in the browser. The desktop application can be written in any way, i just need to be able to talk to it from the browser. The web site is written in angular. I don't care about the response from the desktop application or need to communicate back to the browser in any way. Serving the website over https is causing issues though (but a requirement), and I was wondering what a good way around those would be.
The ideal solution was to make the app a web server and just have the website post to localhost:PORT and the server would get the request and do what it needed to do. however, since the website is served over https, it blocks the http request to localhost due to mixed content rules.
i tried submitting a form on the page and having the target be a hidden iframe, but that also gets blocked due to it not being https.
I tried changing the target to be _blank, and that "worked" but it opens a new tab with the response in it, which would be really annoying while you're using the website (it's supposed to be in the background). I set up the response to have a window.close in it, but the window still flickers for a second each time and it's something i would like to avoid.
I tried making a self signed certificate for the desktop application's server but the browser blocks that until you accept it for the first time, and I don't want people to have to go to "https://localhost:1234" in their browser and accept the insecure. I'm imagining getting a valid certificate for a localserver isn't possible too.
Is there any to accomplish this? Thanks
You can redirect the browser to http://localhost:PORT (e.g. using status code 302 or window.location in JS) and pass data to desktop app in query string. That should execute in browser without warning. Then you can return some html back from desktop app to browser. If your data for desktop app are too big to encode in query string, you can pass just url in query string where desktop app can download the data.

Detect if GWT *.nocache.js file loaded properly

In Javascript, what is the preferred way to validate if a GWT *.nocache.js file has loaded properly?
Background
My GWT application loads an *.nocache.js file within a simple shell .html page.
If a user visits the page with a stale auth cookie, the .html file loads perfectly from browser cache, but the *.nocache.js file fails to load, because the user needs a fresh auth token.
Since the .js file fails to load, it fails silently. The user sees a blank .html page with no indication that they need to refresh the page.
(note the particular failure here is that the .js file does not load due to wrong mime type. The auth layer handles stale auth cookies by redirecting to the login page. This page is a text/html document so the browser rejects loading it in a tag. Assume for this question that I cannot change this behavior in the application :)
What's the best way to detect this circumstance and, for example, force a refresh of the page.
Note a hard refresh will force a fetch of the .html page from the server, which will be redirect to the login.
One approach would be to tell the browser to not cache the .html file, but I'd prefer another solution that lets the .html file be cached.
Given that you cannot change things in your application, I will answer just to your question.
You need some javascript in your page.html in order to check whether the gwt script has been loaded after a fixed time:
<head>
<script>
setTimeout(function() {
if (!document.getElementById("my_module_name")) {
window.location.reload();
}
}, 4000)
</script>
<script language="javascript" src="my_module_name.nocache.js"></script>
</head>
In the case you use an iframe based linker (standard, xsiframe), the .nocache.js creates an iframe to load the appropriate permutation, and gives it the name of the module, so checking for the presence of that element after a while is enough to know whether the app was loaded.
You could also check for the presence of especial properties which gwt sets to the window like window.__gwt_activeModules
Typically, a GWT app loads first, then you do authentication. You can use a split point, if you want, to load only the login page. Then, after the authentication is confirmed, you load the other parts of your app.
I have never seen a scenario where authentication is done before a page loads. Maybe you can explain why you did it this way.
As for your question, you need a JavaScript to detect if another JavaScript was successfully loaded, but this solution adds an unnecessary level of complexity.

Offline HTML5 website with JavaScript search

I am building a simple website that needs to be able to run completely offline if needs be. With the intention of being a 50+ page searchable reference manual.
I need the whole site to be cached upon opening one page. I'm doing this with the appcache manifest and getting the site to cache and be viewed on an offline mobile seems to work ok.
The site has a basic JavaScript search facility (that was a freeware download) and while online this search works perfectly. As soon as the internet connection is stopped and the cached version is used the search no longer works, displaying one of two symptoms 1. Button is clicked and nothing happens or 2. A 'webpage cannot be found' kind of error is displayed.
Quote from https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache#Gotchas
Never access cached files by using traditional GET parameters (like
other-cached-page.html?parameterName=value). This will make the
browser bypass the cache and attempt to get it from network. To link
to cached resources that have parameters parsed in JavaScript use
parameters in the hash part of the link, such as
other-cached-page.html#whatever?parameterName=value.
But that is exactly what your js-search does. It tries to load the subpages like this "http://www.filemanage.co.uk/offline/index.html?1350563635665" using XHR.
As a fix try this
// change in function sendRequest line 228 from
this.httpRequest.open("GET", uri+"?"+q, true);
// to
this.httpRequest.open("GET", uri, true);

Categories

Resources