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.
Related
I have a vaadin app which renders raw html into a vaadin layout.
The html includes a anchor and a href that points to the anchor.
The problem is that my page includes a path and a query:
https://onepub.dev/Blog?id=zhhnoflygz
This above link is to a live page so you can see it in action.
The target is written as:
<h1 id="how-to-resolve-the-problem">How to resolve the problem</h1>
The anchor is written as:
How to resolve the problem
When I hover over the anchor the browser shows:
http://onepub.dev/#how-to-resolve-the-problem
Looking at html documentation and examples it's my understanding that the anchor should show as:
https://onepub.dev/Blog?id=zhhnoflygz#how-to-resolve-the-problem
As it stands, when I click on the anchor it takes me to the sites home page rather than scrolling down to the section the anchor links to.
Is this a vaadin SPA problem or have I just mis-understood how anchors work?
The anchor works find in a html editor.
Edit:
After some research I've found that vaadin intercepts clicks to anchors.
You can surpress this by adding the 'router-ignore' attribute to the a tag.
hi
This however didn't solve my problem.
I then did a comparison by setting up a test using the w3schools tryit page.
There is a clear difference.
When I open the dev tools in chrome and hover over the 'a' link on my vaadin site it shows
When I look at a similar tag in w3schools:
The key difference is that w3schools shows the complete url which appears to be taken from 'window.location.href'
The vaadin page however seems to take the url form 'window.location.origin' even though window.location.href has the correct url including the path and query params.
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.
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.
I want my website to become eligible for Google+ Direct Connect.
So after googling a bit I found this Google Support page, which has since been edited.
View Google Support page providing these instructions via WayBack Machine:
You can directly link your website by inserting a small snippet of
code on your website and then listing that website as your Google+
page's primary link in the About section of the profile. For example,
if your Google+ page’s primary link is set to www.pagewebsite.com,
you can create a bidrectional link by placing the following code snippet in the <head> tag of the site’s HTML:
<a href="https://plus.google.com/{+PageId}" rel="publisher" />
What gives? An anchor tag within the head?
I thought only title/meta/link tags are allowed in the head.
Is it legal to place that above snippet in the head tag?
I think there's an error in Google's documentation and this should be a <link>-tag, like this:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
You can test it on https://developers.google.com/structured-data/testing-tool/ if it works. Include the <link>-tag into your website and see what Google detects with this tool. There's a section "Publisher" where you can see if Google detects the correct information.
I'm using <link> on my sites and Google detects the correct values.
An a element inside head is of course invalid according to any HTML specification. I have no idea why Google tells you to do so, but presumably their software actually looks for such tags.
What happens in practice in browsers is that the a tag implicitly closes the head element (you can see this if you look at the document tree in Developer Tools in a browser). This isn’t as bad as it sounds, since the rest of elements meant to be in the head will still be processed normally. For example, even a title element works when placed inside body. To tell truth, the division of a document into head and body is just a formality.
The tag <a href="https://plus.google.com/{+PageId}" rel="publisher" /> will be taken as a start tag only, potentially causing naughty surprises, since the start of the document will then be inside a link (which might extend to the end of the document!). Only if the page were served with an XML content type would the tag be taken as “self-closing”. So if you have been forced into using such an element, at least write it with a real end tag;
It will still be bad for accessibility and usability, since empty links may still participate in tabbing order etc.
Using link tag is the right (and valid!) way to go in the header:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
If you stick with the verbatim anchor tag when following the instructions (Link your brand page to your website), then you'll be setting yourself up for something to blow up down the road.
We just experienced it, in fact. It seems starting with iOS 8.x, mobile Safari will see this anchor tag and move it (along with the code below it!) to the body. This broke a smart banner we had in place.
We switched to using a link tag and verified that Google still detects the correct values.
I'm new to creating extensions and I also don't know much about html but I have an idea for a chrome extension that should be pretty simple so if you give me a little help I may be able to do it.
I want a popup to open when the user clicks the extension-icon (like most extensions) and the popup is supposed to contain a webpage like "http://google.com". That's actually about it. I created the manifest file with the required data and thats fine, now I need to know how to make the html file contain the external webpage.
Another problem: when I tried different things in the html file the popup was tiny and just white.
I hope someone can give me hint. Thanks!
I have made an extension wich displays links to several websites.
My popup.html looks like this:
<!DOCTYPE html>
<html>
<body>
<p>
<a href="http://www.google.com" target="_blank>Google</a> <br/>
<a href="http://stackoverflow.com" target="_blank>StackOverflow</a> <br/>
</p>
</body>
</html>
The target="blank means it opens the site in a new tab
More information about html is found here:
http://www.w3schools.com/html/html_links.asp
Be sure to make the icon 19x19 pixels,and be sure to name it in the manifest.json file
with the filename extension for example
"browser_action":{
"default_icon":"iconname.png",
"default_popup":"popup.html"
}
You should be able to use an iframe tag within your popup. I do that many times to point the user a FAQ page hosted outside.