I have PWA web site with sw-precache with this sequence:
Reload the page
The service worker should update the cache in the background When its
done, you should see New or updated content is available. in the
console The actual visible changes should not be visible until the
next reload
Reload the page again
The browser will use the new cache this time around The changes
should be visible now! There shouldn't be any messages in the console
I need similar for this, but if file was updated - will be need visible in first load pages. Not after second load. Another (not updated) files - from cache.
This is possible?
Because double reload for see new changes uncomfortable.
you try use the runtimeCaching option to set up an appropriate URL pattern and strategy (networkFirst, cacheFirst, etc.) to match those requests.
"runtimeCaching": [{
"urlPattern": "",
"handler": "networkFirst"
}]
global.toolbox.router.default = global.toolbox.networkFirst; // for all routes
or
global.toolbox.router.get('/assets/(.*)', global.toolbox.networkFirst); // for some particular routes
Related
I am attempting to build a "version updated" component that will show a banner when the website has been updated and prompt a user to reload. Unfortunately when some users reload their page is cached so it does not update properly. Previously we have told them to press CTRL+F5 but I am looking for a way to do this programatically.
I am using the following code
this.$window.location.reload(true);
Whose function signature is declared like so:
reload(forcedReload?: boolean): void;
Does this mean that it will skip the cache? When I try it out a CTRL+F5 the index.html shows a 200 in the Network tab of Chrome but using $window.location.reload(true) shows a 304 [Not Modified]
According to MDN the forcedReload parameter in window.location.reload, when set to true:
... causes the page to always be reloaded from the server. If it is
false or not specified, the browser may reload the page from its cache.
No it's not (proven by testing)
The main difference: Ctrl-F5 will cause all the attached resources also to reload (scripts, images ...) while the reload(true) will not, the main page (html) will be requested but resources can still be loaded from cache
Did you try something like:
$window.location.href = currentUrl + '?' + new Date().getTime();
That should force a cold refresh.
I have a page with self-refreshing content (via WebSocket) like this one. While the content is constantly changing my firefox webdriver can only see the initial content. I could get the fresh one by refreshing the page by
driver.navigate.refresh()
but this causes unnecessary traffic besides in the Firefox window the new content already appear.
My question is: Can I get the fresh html as I can observe in the Firefox window without reloading the whole page?
If the page contents change over a period of time, one option you could do is check the page source every n seconds. A simple way to do this would be to import time then use time.sleep(5) to wait for 5 seconds, then get the page source. You can also put it in a loop, and if the page contents have changed within the succeeding 5 second periods, then selenium should be able to get the updated page contents when you check. I haven't tested this, but feel free to check if it works for you.
EDIT: Added sample code. Make sure that you have marionette properly installed and configured. You can check my answer here if you are an ubuntu user (https://stackoverflow.com/a/39536091/6284629)
# this code would print the source of a page every second
from selenium import webdriver
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
import time
# side note, how to get marionette working for firefox:
# https://stackoverflow.com/a/39536091/6284629
capabilities = DesiredCapabilities.FIREFOX
capabilities["marionette"] = True
browser = webdriver.Firefox(capabilities=capabilities)
# load the page
browser.get("http://url-to-the-site.xyz")
while True:
# print the page source
print(browser.page_source)
# wait for one second before looping to print the source again
time.sleep(1)
I'm working on a website that uses AJAX loading with some jQuery animations.
With JavaScript, I grab the href from a dynamically generated link to a PHP-based page, and then add that href to URL (after the inevitable #/) .
So far so good, except if a user bookmarks the page and tries to access it, that user will arrive to the home page, instead of the page he/she expected to access.
So, when a page is accessed directly, not by clicking on the internal link of the website, I want to remove #/ from the url, but keep everything after it, so that URL that was bookmarked like this:
http://www.mysite.com/#/somepage
gets rewritten as this:
http://www.mysite.com/somepage
THEN, after the proper page ( http://www.mysite.com/somepage ) finished loading, I want to stick #/ back into its former place in URL ( http://www.mysite.com/#/somepage ), without reloading the page (which, thanks to a clever snippet I'm using, will ensure that the rest of the navigation works the way it should.)
So:
Before page loads, check URL and if it has #/, remove it.
Load page located at hash-less url
Redisplay the url with #/, without reloading the page.
Is it even doable? If yes, I'd be grateful for a lesson.
What you are trying to do is doable but an utter PITA to maintain, and it will not be available on all browsers. That aside, the key resides in the history object relatively recently extended to add a new set of "tricks". Its full doc is available from MDN.
What you are after to do this is the replaceState command. Reads as follows:
Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that Firefox currently ignores the title parameter; for more information, see manipulating the browser history.
This will allow you to replace your current page in the history of the browser, but not in the URL. The URL will be exactly as you have it - with the hash. No point changing it considering your solution.
However, you will have to make sure that your hashless page redirects to the hash-present page for clients with the history object, for consistency. That's the only requirement.
Before page loads, check URL and if it has #/, remove it.
Not possible. The fragment id is not sent to the server, so you can only access it with client side code and that requires the page to load (or at least to start loading).
Load page located at hash-less url
Redisplay the url with #/, without reloading the page
Use XMLHttpRequest to get the data, DOM to change the document to use it, and the history API to change the URL in the address bar.
As has been pointed out in one of the answers, you can't remove hash before your page loads.
However, once the page started loading, the manipulation described in the question is possible.
Here's one way to do it.
// Remove the hash and reload the page at url without hash
if (window.location.href.indexOf('/#/')>=0) {
window.location = window.location.href.replace(/\/#\//, '/');
}
Once the new page started loading, you can use history.pushState to update the URL display:
if ((window.location.href.indexOf('/#/')<1) && (location.pathname != "/")) {
history.pushState({}, "page x", location.protocol + '//' + location.host + '/#' + location.pathname);
}
You gotta keep in mind though that pushState is only available for browsers started with Gecko 2.0, so placing the hash back into the url will not work in older browsers, period.
This may lead to some unfortunate situations. For example, hypothetically, your url http://www.mywebsite.com/somepage gets indexed by a search engine. A user clicks on that link, accessing your website in an older browser that doesn't support pushState, and then clicks on some other link when browsing your AJAX-enabled website. That user is likely to arrive to
http://www.mysite.com/somepage/#/someotherpage
And then, as the user keeps clicking, it will only keep getting worse:
http://www.mysite.com/somepage/#/someotherpage/#/yetanotherpage/#/andsoon/#/andsoforth/
So what you probably need is something to make sure that your hashes don't keep propagating.
You can also wrap your hash removing / replacing code in a conditional:
if (history.pushState) {
// add hash
} else {
// provide some alternative
}
Finally, look into these two resources. You may not need the hash at all: History.js and jQuery Address.
I have wrapper PrimeFaces.ajax.AjaxResponse to handle ViewExpiredException (reloading the page):
var handleViewExpired = function (viewId) {
window.alert('${msg.ajax.viewExpired}');
window.location.reload();
};
However, sometimes I got that error over and over again after trying to click anything invoking AJAX requests on the site:
javax.faces.application.ViewExpiredException: /tree.xhtmlNo saved view state could be found for the view identifier: /tree.xhtml
at org.apache.myfaces.lifecycle.RestoreViewExecutor.execute(RestoreViewExecutor.java:128)
Am I doing refresh in wrong way? What should I do to invoke full page reload, such as clicking reload in browser? Do I need to remove cookies (JSESSIONID, oam.Flash.RENDERMAP.TOKEN)?
I'm using PrimeFaces 3.5 with MyFaces 2.0.7 running on WebSphere 7.0.
If you have many (>15) pages/views/frames that are concurrently opened in the session, then, the following may be useful.
You need to have a look on:
1. numberOfViewsInSession: defines the number of (top-level) view states (pages) to support back button operation
2. numberOfLogicalViews: defines the number of logical views (frames) that can present in a page (per top-level view)
A quick action to make sure if it's relevant is to set those numbers to 500, and see
If they are relevant, then, you can find more information in the following links:
http://www.java.net/node/681211
Problem with numberOfViewsInSession and multiple tabs
I arrive to this problem quite a lot of times, where some of the users have a corrupt application cache (HTML 5).
I do update the manifest file every time there is a new release still some times some users get a corrupt application cache.
I such a case I want to fully clear what is there in their application cache and load all the fresh content from the server.
Is there a way to that using Javascript?
According to the following article on
http://www.w3schools.com/html5/html5_app_cache.asp
there are three ways on wich the application cache will be reset, these are:
The user clears the browser cache
The manifest file is modified
The application cache is programmatically updated
More information about programmatically updating the application cache can be found here:
http://www.html5rocks.com/en/tutorials/appcache/beginner/
It looks something like this:
var appCache = window.applicationCache;
appCache.update(); //this will attempt to update the users cache and changes the application cache status to 'UPDATEREADY'.
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); //replaces the old cache with the new one.
}
This one is quite old but as I see a wrong answer being up-voted, I felt like giving some hint....
If ones has the trouble of looking at the spec, you can see that there's no way for code to force the browser to reload the cache, unless there's a change in the manifest, and that's when "appCache.status == window.applicationCache.UPDATEREADY" is true.
Look here http://www.w3.org/TR/2011/WD-html5-20110525/offline.html
"updateready The resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache."
So, reading it carefully, you find that the applicationCache gets to that status when the resources where just downloaded... that is.. a previous "downloading" event occurred... and previous to that one a "checking"....