Following the instructions in the Chrome blog Prerender pages in Chrome for instant page navigations, I am trying to enable pre-rendering on a website. I have added this snippet just before </body>.
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/Test/1","/Test/2","/Test/3"]
}
]
}
</script>
However, on the latest version of Chrome 108, none of these valid URLs are prefetched or prerendered when opening the page. I can confirm this in the Network tab of Dev Tools, and by following links to the pages which take the usual load time.
In the console, HTMLScriptElement.supports('speculationrules') returns true.
Am I missing something?
I can confirm this in the Network tab of Dev Tools
As the new prerender happens in a separate process (effectively like a background tab) any network calls are not shown in the current page’s DevTools. The Chrome team are working on adding DevTools support.
So here’s a few things to check:
Chrome doesn’t prerender when it’s already using a lot of memory. Try restarting Chrome with just that tab to rule this out.
Make sure you have “Preload pages” ticked in Settings->Privacy & Security->Cookies and other site data
Chrome Canary has a handy experimental setting which shows the reason pre-renders fail worth checking that out. Hopefully that will make it to stable soon.
It’s worth confirming if this is a specific issue to your site, or a general prerendering issue. Checkout the demo linked from that article and let us know if that works
Switching tabs currently cancels any prerenders. So make sure you launch straight from your page.
URL param differences can prevent prerendering being activated as it’s effectively not the same page.
There have been a few bug fixes since 108, so it maybe you’re hitting one of those? Check Dev, Beta, or Canary versions.
There is a “holdback” group of people we randomly select to disable this feature so we can continue to monitor it as it is rolled out, and compare to those not using it. It could be you’re in this group. Unfortunately there’s no easy way to tell this (the Chrome team is working on adding this). Try guest mode to see if that works which is usually the best sign you’re in this group.
Might be able to advise more after you try above steps and let me know.
I am totally lost, don't even know what to google anymore, maybe someone can push me in the right direction here:
I have a WildFly Server running, and I did some changes to a JavaScript file.
As soon as I republished the new .war file to the server, the changes caused by the new js file were visible in my browser on the computer.
Yet, as I opened my phone to check the results there, nothing happened. I cleared the cache and, of course, now the changes appeared. On both, computer and phone, I was using Chrome.
I put the HTTP Header "Cache-Control" with "no-cache" as value, but that didn't do anything.
I use NGINX in front of the WildFly, but I checked and NGINX does not filter out that header.
I also tried versioning the files. WildFly offers a very neat solution for that, if you stumble across this question, check out this post to see how that is done. But this didn't do the trick for me either.
Does anybody know what might be going on here?
Thanks for any help or comments!
It ended up being a timing issue.
The browsers on the phones eventually reloaded the current files, and since then changes are visible immediately.
The script trick with the version number works like a charm. So do the headers ("Cache-Control: no-cache"). Both together are probably pretty fail safe. One can't do it all with version numbers, only the includes.
Thanks #Azametzin for the input!
If the cache cleaning through "Cache-Control" is failing somehow, another solution would be to set a new version for JavaScript file. For example:
<script type="text/javascript" src="script.js?v=0.01"> // any version number you want
I'm not very used to WildFly Server, but I believe you could set a function for creating a random number that will be used as the new version everytime the page is refreshed.
Something like: <script type="text/javascript" src="script.js?v={random number here}">
Hope it gives you a direction to follow.
Not all browser which cache-control supports in some browsers in Android device (Not Chrome Android), because the cache-control still works in android device. Some browser which taken from Android doesn't work.
I am experiencing this weird issue where my Chrome browser keeps loading a old version of my website whose code doesn't even exist on my server any more. I assume it's a typical cache issue.
I tried to clean the browser cache, use igcognito mode, and clean DNS cache. The old cached page is still being loaded.
This issue seems to have been discussing on this google group for three years but there is still no solutions. https://productforums.google.com/forum/#!topic/chrome/xR-6YAkcASQ
Using firefox or any other web browsers works perfectly.
It doesn't just happen to me. All my coworkers experience the same issue on my website.
<?php Header("Cache-Control: max-age=3000, must-revalidate"); ?>
You can implement a PHP script that must be the first line of code in your index file . It is an http header typically issued by web servers. You can also rename the resource that is considered "stale". This tutorial will give you more details. https://www.mnot.net/cache_docs/
I'm not sure if I understand your problem correctly, but I was experiencing something similar and instead of clearing the cache I disabled it by doing this:
Open chrome and then go to your website
Press Command + Option + C(Mac)
Now that you've opened chrome's DevTools, go to the main menu where it says: Elements Console Sources ...
Click on the menu element that says Network
Make sure that the "Disable Cache" checkbox is checked
Then reload the page without closing the DevTools
This worked for me.
Let me know if it worked for you :)
A short term fix to view the new version of your site would normally be to clear out the cache and reload, for some reason this doesn't always work on Chrome. This short term solution is not going to fix the problem for every user that's on your site though, it will just allow you to see the new version of your site.
Adding version numbers to CSS and JS files will allow you and every other user, to see the most recent version of your site. A version number will force any browser not to load from the a user's personal computer cache, and instead load the actual files on the server, if the version number varies from the one in the user's cache.
So if you have these files on your server:
ExJS.js
ExCSS.css
and change them to:
ExJS.js?v=1.01
ExCSS.css?v=1.01
the new version of these files will load in any browser.
Normally, a browser will always load the HTML file from the server, but there are some HTML meta tags you can use to make sure that the most recent HTML version will load for any user:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
There are also ways to make sure that files in other languages always load the most recent version as well, which is discussed on this post:
How to add version number to HTML file (not only to css and js files)
You can press on Inspect, then Network and check Disable cache.
change the name of images and make the necessary image name changes in html file.. found this quick fix for my website
I ran into the same issue, and I also tried to disable caching on my JSP pages
<% response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader ("Expires", 0); %>
But it didn't help.
This is a known issue with google chrome and chromium browsers, even though you clear cache and cookie.
However it may or may not happen for most of the users.
Also this has been unresolved till the date since last 9-10 years.
Hence for testing purposes I would highly recommend to use Mozilla Firefox or Opera.
However it does sounds that your application is limited to certain browsers for best experience, and may not sound convincing to Business/End users.
But having said that, this caching issue may or may not happen to most of us.
You should be able to clear the problem by resetting Chrome. This is the only way I found to clear this condition - after tearing my hair out for half a day.
Prior to finding this, I tried clearing the cache, deleting the contents of the various cache directories etc. in vain.
[As of today May 3 2021] You can do this by gong to 'Settings > Advanced > Reset and clean up > Restore settings to their original defaults'. Note that this will not remove any bookmarks but will log you out of all accounts you are signed into.
Adding CNAME Will help also if you always run site without www, try with www.example.com will work.
I came across this issue developing locally, and tried the following things:
Clearing Cache + generally ALL files in Chrome
Setting the Cache-Control Header like Eli Duhon mentioned.
Setting the Cache Control Header in multiple other ways.
And the only thing that fixed the problem for me was to basically re-start my docker containers on which the app was running.
so I did this:
docker-compose down
And then
docker-compose up
and everything was updated after that.
HOWEVER, if you have changes again, they are still not updated...
So this is certainly not a fix to this problem, as I dont even know what causes this behaviour in the first place, but I assume it has to do something with hot reloading and/or Docker but that was the only thing that did the trick for me so I thought I would mention it here...
I had this problem moving a Wordpress site to new hosting where the URL redirects to .../wp, which hadn't been the case before.
Chrome was helpfully presenting a directory listing showing the file dates from the old server, despite the DNS having updated fully a week ago. So it was obviously demonstrating the problem discussed here.
I added an index.html file with just the following in it:
<meta http-equiv="refresh" content="0; URL='http://my-wp-site.com/wp'"/>
which fixed the problem straight away, including on Chrome browsers that had not had their cache cleared and that had no knowledge of any Google account of mine.
I don't know why this worked, however, given all the problems people have listed above.
you have two options
a) consider fingerprint the stale resources like
<script src="js/app-4829382839238882882bb3442bbbbdhh3kh3.js" type="text/javascript"></script>
b) Add cache control headers such as Cache-Control, Expires on your webserver.
This is a good read on browser caching
Our team uses Chrome Web Developer tools to debug JavaScript. As of yesterday when our browsers upgraded to Chrome Version 27.0.1453.93, the Sources section no longer lists all the JavaScript files. Does anyone know if this is a bug or if there is a setting? Some JavaScript files are still listed but I can't find the criteria for files being listed or not. I checked on an older Chrome Browser pointing to the same URL and all the files are listed. Anyone solved this?
I guess you may have some javascript code that has been loaded dynamically. If it is the case, you should use the phrase
//# sourceURL=foo.js
at the beginning of your javascript code. foo.js will be assigned it by debugger. And debugger will show it with that name.
chrome and firebug accept it, I am not sure about other browsers
Does anyone know how to setup kaazing websockets for use with IE and firefox? My app works great in Safari and Chrome but I can't get it to work with these two browsers. It just gives me a WebSocket is not defined error.
According to their website, I thought all you needed was to add:
<head>
<meta name="kaazing:postMessageBridgeURL"
content="http://www.example.com/bridge/PostMessageBridge.html" >
</head>
But I put the file there and still, it is failing.
You only need that tag you mentioned if you intend to do cross-origin connectivity in IE6 and IE7.
But if you just want basic WebSocket to work in those browsers the thing you need to do is include the WebSocket.js or ByteSocket.js files. In summary, if you intend to use text messages, then put this in your HTML page:
<script src="/html5/WebSocket.js"></script>
If you intend to use binary messages, then do this instead:
<script src="/html5/ByteSocket.js"></script>
This is more fully explained in the documentation here for typical usages of WebSocket:
https://kaazing.com/getting-started/
Regards,
Robin Zimmermann
Kaazing Product Management
Which version of the gateway are you using?
The step you mentioned is only required if you are integrating with another web server (like Apache). Is that what you're doing?