I just read https://developers.google.com/web/updates/2018/07/nostate-prefetch, and it's about the nostate prefetch for prerendering resources. And im confuse about the line:
NoState Prefetch only fetches resources in advance: it does not execute code or render the page
does that mean NoState only prefetch and cache the contents but not rendering or execute them? so who gonna prerender, the browser? or I will have to execute the contents first before it can fully render? I'm a new programmer and really want to know an answer, I knew that prerender will be applied to next navigation and really wanted to know if you could somehow prerender the content without having to manually execute JavaScript or prerendering it thanks!
Prerender
It ensures that a URL with all necessary static resources is fully loaded and set up in the background. You can imagine it as opening a URL in advance in a new tab, but it stays hidden until the user actually calls up the page.
All activities that would take place during an actual page impression, are carried out in the background. If for example you are logged in to an online shop and load the log-off page with the prerender, then you'll be logged off on the next page.
If you are logged into an online shop and load the unsubscribe page via prerender, you are logged off the next time you call up the site.
Prerender stores a URL and all its associated resources in the browser cache and renders the complete page at the same time.
Preload: the resources (URL or image, css, js) are made available as soon as they are required. In other words, they're stored with high priority in the browser cache.
Prefetch: The entire file (css, js, image) is downloaded and saved with low priority in the browser cache.
Related
I have a component which lazy loads the images.For the first time when my page loads then at that time the images are displayed using lazy loading but if I refresh or reload or close and then open the tab then my images are pre loaded because it is now fetched from cache.Is there any way i can stop caching of my component in angular 7?
The cache is not being done by Angular but your browser. Once you load an image (and depending on the headers of the response) your browser will cache it to be able to load it faster the next time. This is usually a good approach.
Not sure why you don't want them to be cached but you have different options. Here you have a good read about HTTP caching: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching This cache configurations for static assets are usually done by your web server and they depend on which webserver you are using (nginx, Apache, IIS, node, ...).
Another option is to append a random query string to your image URL. This HTTP cache system works by using the image URL as a resource key to identify it. Because of this reason you can do something like:
<img src="./yourimagefolder/yourimage.jpg?r=putherearandomstring">
In this way your image resource 'Id' will be different in each request. (You will need to change the 'putherearandomstring' string in the example with a different random string each time the page is loaded.
If this is just for development purposes, you can disable the cache in developer tools. I don't see a reason you would want to do this for a live site though? As you would be forcing the user to grab the images everytime they load the component which will reduce performance.
The problem with cache in an environment where custom software is updated frequently and some users are less savvy is that they will not automatically get critical client-side changes unless they are told specifically to refresh their cache. With all of the decorations in the index.html I have not yet found a reliable solution.
I'm currently working on an Angular-PWA and am struggling with a Service-Worker/Caching issue.
Basically, we're using the Service Worker to cache the majority of app files upfront on first load. We are then using lazy-loading to retrieve other icons and images when navigating to a page that requires them.
So far everything seemed to be fine, except when I began testing its offline capabilities. When checking 'Offline' in DevTools, most of the app is still served and can be used and navigated etc, except for the missing icons and images that cannot now be retrieved. This is fine, as we're lazy-loading, it's expected behaviour.
But, after un-checking 'Offline' and re-connecting again, if I load a page that I hadn't viewed while offline, it's resources are retrieved as normal. Yet, if I then return to a page that I did previously view while offline, it does not retrieve its missing resources and maintains its bare-bones-media-less version.
Is there a way of storing instances or references to the 'Loading chunk # failed' errors, and when a Navigation event occurs to a page where an error was thrown, maybe just display a dialog and force a location.reload(true)?
If there's anyway to do this in an Angular friendly way, do they provide any functionality to hook onto 'Loading chunk # failed' errors, and be able to store information from it?
What I think I'm after is, a way of storing error information from the Service Worker, then on Navigation events, check that information to see if it refers to the page I'm about to load, if so, load from server, if not, from cache.
So a network-then-cache policy if there are errors, normal cache policy otherwise.
Concept question, shouldn't think any of my code is required, if it is just say, any help is very much appreciated :)
Thanks guys!
I wonder how sites like SoundCloud work: you play a song and it keeps playing even if you move to another page without stopping
Any suggestions?
The only way I can think of is to build your app, or at least the parts of it that need to bo continuous, as a single page.
In practice, this means that only one HTML document is loaded. When, say, a link is pressed, the browser action is intercepted and prevented and the browser behaviour is faked by javascript.
Consider a website consisting of pages A and B. Normally, when a link pointing to B is activated, the URL is changed and the browser calls the server, requesting B. In a single-page application, however, this is interrupted by a javascript function, which changes the URL using the History API, and then displays B in a way that doesn't require a new document being synchronously fetched from the server.
There's a couple of ways to do it.
Navigate to a new page
If you do that, a whole new JS execution context is created for the new page, so you can't keep the function running. What you can do however is to "resume" execution in the new page. For this you need to save the state of the old page either on the server or in some client storage that persists between page changes (cookies, localStorage, etc).
Fake navigation
This is the most user friendly way - you turn your website into a web application. You no longer have multiple pages, so when user wants to change what he sees in the browser (like go to a new song), the app simply changes the appropriate area with the desired content. This is a complex topic that should probably be researched in itself, not explained in a SO answer. Go ahead and google "single page application" and you should find plenty of resources for it.
Technically you never change the page when you are using souncloud. You always stay on the same page and only the parts get changed which are actually changing, so you never reload the whole page. That's why they can keep the music playing: They just never remove or change the actual player. If you are wondering why the URL in your browser is changing if you never leave the page: They manipulate your history entries.
If you are interested in creating an application that behaves similar you should checkout frameworks like Ember.js or Angular.js. TodoMVC Gives a nice overview of those frameworks.
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.
How can I stop loading a web page if it uses a frame-buster buster as mentioned in this question, or an even stronger X-Frame-Options: deny like stackoverflow.com? I am creating a web application that has the functionality of loading external web pages into an <iframe> via javascript, but if the user accidentally steps on to websites like google.com or stackoverflow.com, which have a function to bust a frame-buster, I just want to quit loading. In stackoverflow.com, it shows a pop up message asking to disable the frame and proceed, but I would rather stop loading the page. In google, it removes the frame without asking. I have absolutely no intent of click jacking, and at the moment, I only use this application by myself. It is inconvinient that every time I step on to such sites, the frames are broken. I just do not need to continue loading these pages.
Edit
Seeing the answers so far, it seems that I can't detect this before loading. Then, is it possible to load the page in a different tab, and then see if it does not have the frame-buster buster, and then if it doesn't, then load that into the <iframe> within the original tab?
Edit 2
I can also acheive the header or the webpage as an html string through the script language (Ruby) that I am using. So I think I indeed do have access to the information before loading it into an <iframe>.
There's no way to detect this before loading the page since the frame busting is done via a header or is triggered via JavaScript as the page is loading.
Without a server backend you won't be able to as you are pretty limited with the amount of tinkering you can do in javascript due to crossdomain policies.
You might want to consider creating some sort of a blacklist for URLs to stay away from...