My site has a quiz, and after each question is answered, there is a 'next' link. Since most of the time the user will go to the next question, I'd like to prerender the page.
So I put this in the <head>
<link rel="prerender" href="/">
and this in the <body>
Next
I tried it in Chrome and Firefox and it's not working. What could I be doing wrong?
I also tried putting the full address in the link
<link rel="prerender" href="https://example.com">
but that didn't work either.
It looks like you are using XHMLHttpRequests. According to this doc: https://www.chromium.org/developers/design-documents/prerender a XHML Post request will cancel the prerender and stop it from being swapped in.
I imagine this will be difficult to solve as the server will require the post data from the user before it can safely render the page. So, in this situation the prerended document will always be discarded and a new document will be rendered.
Related
i am hosting a website on hostinger and whenever i do a change in the CSS file it reflects the changes on some of my website users while it doesnt change for others, i figured it might be because it gets cached for some users..
I tried to add the "?v=1.0" at the end of the CSS file link to try to get the browser to reload the file for the users but there was no changes. Then i tried to change the WHOLE name of the CSS file and it worked for SOME users but still not for everyone. I tried to add CONTENT="NO CACHE" and it had no effect either. I also noticed that most of the problems are for users using Google Chrome..
Here is how i normally link my CSS file:
<link href="nav.css" rel="stylesheet" type="text/css" />
What i am looking for is that whenever i do a change in my CSS file it would get reloaded for all users and not stay on the old cached version since i dont want nor will it be effecient to ask users to clear their cache every time i make a change.
I'm unsure why versions don't work, so maybe someone more experienced can pitch in on that, but in the meanwhile you can use something like:
<link href="style.css?key=<?php echo time(); ?>" type="text/css" rel="stylesheet" />
This will, however, force the user to load the css upon every single visit to the site and affect your sites performance, so remove when the site goes live.
Try to "Empty cache and hard reload" in the webbrowser. (CTRL + F5 in your webbrowser)
In my Angular app, my menu component html code is displayed briefly when the page is loading. Even if I hide the menu html root element with a display none css, the html is still displayed when the page start loading.
I have read a lot of thing about ng-cloak (https://docs.angularjs.org/api/ng/directive/ngCloak) but it seems Angular 4 not have ngCloak.
So I don't know how to prevent this unpleasant effect.
does Angular 4 have an equivalent directive for ng-cloak?
How can I display properly page without display unstyled html on load?
The index.html file should not contain any application specific HTML code. But just some headers and the root tag of the application. It may contain a placeholder text like "Loading" inside the root tags.
All the html code of the application should be inside the app.component.html and or other components.
#angular/cli generates an index.html "template" file that looks like this:
<!doctype html>
<html>
<head>
...
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The browser immediately displays the "Loading..." text. After Angular was initialized, it is replaced with the actual application. To get a white page, just removed the text.
I would have gone with #HendrikBrummermann's answer: place a "Loading..." tag.
From your comment, "...which component includes the header... the unstyled html of the header is displayed", I believe you already have your answer: there is no CSS loaded that can style the HTML of the header yet.
Hendrik's answer keeps the tag to a minimum, so this effect is not apparent.
If you really need to style the header immediately, I fear that you need to use an inline style (and with no images or fonts - those won't be loaded yet either). Keep that to the bare minimum is all:
<!doctype html>
<html>
<head>
...
<style>
...
</style>
</head>
<body>
<app-root>(styled header)</app-root>
</body>
</html>
Then upon loading you can remove the placeholder.
You can also try (but it's messy and difficult to maintain) an incremental approach with two "loaders": a very, very minimal one that needs next to no CSS/images, then as soon as the fonts and other very few basic assets are onLoad'ed you can maybe replace it with a simple animation, and from there you load all the rest and activate the full Angular app.
There are also "packager" utilities that will compact most of your HTML, CSS and JS into a single minified SPA bundle; some of them (I'm sorry, I saw a couple of them used, but never used myself and can't reference them) also supply a minimal loader as described above. This might take care of some maintenance for you, and it's perhaps worth a shot. I know this because for one project a colleague of mine had to replace a Flash "Please wait" loader with a HTML5 one (it wasn't an Angular project, but I don't think it matters).
Those are things which you could give a try:
(In my opinion best solution) You can use Angular Universal, for serverside rendering. Workflow is:
User sends request to example.com
Server is not responding with pure HTML (example above), but runs Angular on the server side and render output HTML
This HTML (together with <script> tag pointing to compiled app is send to users browser
On the first look, the user sees HTML + CSS formatted by his browser. Then browser launches *.js file, and after a while replace "static page" with "single page app"
Angular can deal with all action done on "static page" (before JavaScript launch), thanks to BrowserModule.withServerTransition(); More about Universal can be read here.
You can make one step further from Universal, and serve your Angular Universal App as a Progressive Web App (PWA). More about PWA can be read here
Go one more step further, and introduce Accelerated Mobile Page (AMP), from the Google Cache. More about AMP can be read here.
You should never ever place anything more than application root node in your index.html:
<!doctype html>
<html>
<head>
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
If you really want to have something "nice" while the user is waiting for Angular, you could create some kind of loader with ie css animation:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="loader.css">
</head>
<body>
<app-root>
<div id="css-loader"></div>
</app-root>
</body>
</html>
Regarding points 1 & 2 & 3: Here you can find an example of Angular Universal & PWA & AMP combined.
I think this behaviour is inevitable. Best you can do is speed it up as much as possible. Using the lastest versions, AOT and lazy-loading helps a lot.
Alternatively you can add some css to your index.html
This is a feature, not a bug.
You can do one of twothree things:
Let UAs get information as soon as they can and assume people can tell when things are loaded fully, or
Make people wait for information, and show it to them only after it has all loaded
Some kind of absurd gray area unicorn implementation that ensures part of the page is loaded before displaying it but doesn't bother for other parts
Historically, #2 has been the most derided approach, especially as so many people want to do it. I suggest not even pursuing it.
I have a code snippet that is installed on third party websites. I can't get into the details, but it loads HTML, CSS and JS onto the page through the use of a <script> tag.
Part of the code is a JS function that executes when this link is clicked:
?
If there are JS errors on the page that prevent the function from executing, clicking the link obviously just adds the hash to the URL and takes the user to the top of the page. This is the expected fallback behavior.
However, on one third party site with a multitude of JS errors, clicking the link removes everything after the top level domain, adds the hash, and directs to that page (the home page). For example, the link would take the user from:
http://www.example.com/2010/05/14/very-interesting-blog-post/
to
http://www.example.com/#
Notably, the issue occurs in Firefox and Chrome, but not IE9. I know it may be impossible to properly diagnose the issue without more detailed code, but I'm not at liberty to provide it. I'm just hoping to get some kind of reasonable explanation for this strange browser behavior.
If it helps at all, the site in question is a WordPress blog. Thanks in advance.
EDIT: This is apparently not caused by any JS on the site, because turning off JS and adding the link with the inspector produced the same behavior.
I had a similar error where clicking on any <a href="#"> causes a full page reload. I managed to solve this by removing the <base href="/"> tag from the <head> of the page. I couldn't find any informations on this (yet). I'll add more if I can find any additional info.
This problem happens when you use windows.onpopstate to handle back or forward buttons and load page using ajax. Try to solve your js code for handling history.
I have a Blog powered by Blogger [PhysicsGames.tk]
Also I have an application on Chrome Web Store THIS ONE
So I've been using the Inline Installation it worked well, unfortunately. I realized today that no longer works...
In the website main template I added the following code:
<link href='https://chrome.google.com/webstore/detail/hnmdbeamhkbhfobfmoaemhpfcgejlbif'
rel='chrome-webstore-item'/>
And I create a button:
<a onclick="chrome.webstore.install()" href="#">
<img src="http://i.imgur.com/D8ul8.png"/>
</a>
So It should work like this:
On the websiste, I click the 'button' and a dialog like this should appear, that is a application installation verification dialogue.
Then If you click on "Add" the app should install.
Well in my case, stays in step 1, the dialog never appears.
What I'm doing wrong?
Thanks in advance, and sorry for my English.
The <link href="..." rel="chrome-webstore-item"> needs to be in the <head> section of your page. Your page actually has it in between the <head> and </head> tags, but if you inspect the page's DOM, you'll see that the <link> tag is actually shown in the body:
This is because you have a <itemscopetag> (generated by Blogger presumably) before the <link> tag, which is unknown, and is causing the <head> section to be ended early (this behavior is defined by the HTML spec).
In some ways, this is a Blogger bug (it shouldn't be putting unknown tags into <head>), but in the meantime, one fix is to move the <link> tag so that it's above the <itemscopetag> one.
Here is the html code.
<html>
<head>
<title></title>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
</head>
<body>
</body>
</html>
You can create a simple web application in Visual Studio, and create new html page(we can call it "test.html"), add the above code to test.html, add two js file to your project, then set test.html as start page, run it.
you will find out that 1.js has been requested twice as you can see in the picture(http://i.stack.imgur.com/K4i3H.png). I can't understand it. Anybody can tell me why?
Thanks a lot !
I found a comments on Httpwatch's official website. Hope this explain your question.
The (Aborted) value is more complex in
its origin. It occurs when IE has
started to process the request for a
URL (e.g. to download an image), but
then decides to cancel the operation.
Here are some examples of when this
can occur:
If you click on a link or bookmark
while a page is downloading, or
click on IE’s Stop button, you will
see that IE cancels any requests
which are still active and HttpWatch
shows the (Aborted) result.
A CSS rollover image on a page will
start a request when the mouse
pointer is moved into its active
area. If the mouse pointer quickly
moves away again, IE may abort the
request if it has not already
completed.
Sometimes javascript is used to fire
off requests for background tasks or
to gather statistics on a page.
Often this can lead to aborted
results if the javascript does not
wait for the response to be received
from the server.