As we talked before, Accelerated Mobile pages of AMP are one of the latest trends powered and pushed up by Google. AMP claim to be providing faster and better user experience and in order to support them, Google, in turn, claims that sites having AMP mirrors will get their content higher ratings and places in the search results list. So, no matter, what is our personal opinion about, this whole thing making sense or not, in a world, overruled by a particular search engine, this AMP thing about is definitely worth the shot.
At first glance it all can be summarized by a single word – "RESTRICTIONS" – you can't have your own style sheets, run your own scripts and some of the tags must carry different AMP-specific names instead of the ones we are used to in a regular HTML. At the certain point that can be understood – removing tons of stuff will definitely make a page using AMP Layout Template load faster but what comes to be done when some custom script elements just need to take place? Are such pages suitable for transforming to AMP?
The answer is YES - AMP pages can carry custom scripts and more complicated content as long as it's being a part of a different web page published somewhere aside and just referenced in the AMP page via an amp-iframe element. Of course, there are still plenty of restrictions to pay attention for in order to get the Validation's approval but at least including a bit more complicated content is not a chimera as it might seem like at first.
Here are a few things about the amp-iframe to get you started:
First of all amp-iframe is the part of AMP's extended Components – you can't just use it in the markup you are about to define – you need to call the script handling it in the page's <head> first. It all pretty much narrows down to a single script tag you would want to include:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Now, when the AMP iframe component has been included, let's get to know it a bit better. The AMP developers claim their element is quite different from the vanilla iframe object – it is much more secured and not allowing a single iframe to dominate over the entire AMP Landing Page Template for a reason. As a rule, an amp-iframe should not take place in the first 600px of the document's height or in the first 75% of the viewport's height – according to which of those values comes to be the smaller one.
There is an exclusion of this rule - amp-iframe element can be positioned higher in case it carrying the placeholder attribute and getting displayed until the amp-iframe gets actually loaded. with such restricting standard we could expect restrictions here as well – all the amp-iframe elements are sandboxed by default – all the scripts and APIs form submissions and automatically triggered features are blocked and if you want some of them actually working on your AMP page you need to explicitly allow it adding a sandbox attribute to your amp-iframe and defining in its value the items to allow separated by space. This sandboxing approach is also forced to all the child iframe elements the embedded content might have so landing pages might fail even if the element itself seems to be working.
Along with that, the amp-iframe does not have any means passing configuration to the iframe and has no mechanism allowing it to be resized by the content held within. It should explicitly provide width and height attributes but also can have the following AMP layouts provided as values to its layout attribute: responsive ,fill, fixed-height, fixed, flex-item and nodisplay
Now, when we have some clues about the container, how about the content? The src attribute of the amp-iframe should draw its contents via https:// and generally – its origin must be different from the one the AMP page takes place on. If your included content comes from the same domain you must explicitly allow that adding allow-same-origin as one of the sandbox attribute's parameters. And since it looks like this attribute pretty much controls everything about the AMP element we're talking about, it would be a good idea having some kind of reference to all the possible values which can be assigned to it. This one is pretty decent one to get you started: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
The amp-iframe element is much similar in functionality to other pair of the custom AMP elements - amp-ad and amp-embed since they are practically do the same thing. What comes to differ them though - it's the purpose they are being used for and the actual content held within. When you need displaying some ads you might want to go for amp-ad or amp-embed and when it is an actual content you are embedding - amp-iframe is the element for you.
You have the ability to show an iframe within your web page by operating the amp-iframe feature.
Iframes are especially handy in AMP to reveal content not provided in the primary web page context, like web content requesting user-authored JavaScript.
- Need to be at least 600px or 75% of the 1st viewport away from the top ( other than iframes that utilize a placeholder).
- May only seek resources by HTTPS, and they should certainly not be inside the identical origin just as the container until they do not identify allow-same-origin.
To include an amp-iframe inside of your page, first of all include the following script to the <head>, which in turn runs the supplementary code for the increased element:
<script async custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>In the following good example, we designed a responsive amp-iframe to set a Google Map via the Google Maps Embed API:
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=europe">
</amp-iframe>Performs as:
You can show an amp-iframe at the top of a document, presented the amp-iframe contains an feature with the placeholder attribute, ( for instance, an amp-img element) which would be exhibited as a placeholder until the iframe is available to get presented.
An amp-iframe ought to have stationary format determined as is actually the case together with some other AMP item. Yet, it is certainly attainable to change size of an amp-iframe at runtime. To act so:
1. The amp-iframe should be specified with the resizable feature.
2. The amp-iframe must have an overflow child element
3. The iframe document need to send an embed-size demand like a window message.
4. The embed-size demand will be refused in case the request height is certainly much less compared to a particular threshold (100px).
Spot that resizable overrides the value of scrolling to no.
Example: amp-iframe with overflow element.
<amp-iframe width=300 height=300
layout="responsive"
sandbox="allow-scripts allow-same-origin"
resizable
src="https://foo.com/iframe">
<div overflow tabindex=0 role=button aria-label="Read more">Read more!</div>
</amp-iframe>Some example: iframe resize
window.parent.postMessage(
sentinel: 'amp',
type: 'embed-size',
height: document.body.scrollHeight
, '*');As soon this particular text message is received, the AMP runtime aims to support the request as soon as possible, however, it considers just where the audience is presently going through, whether the scrolling is continuing and other UX or productivity factors. Supposing that the runtime can easily not satisfy the resize inquiry, the amp-iframe will certainly reveal an overflow feature. Selecting the overflow feature will instantly resize the amp-iframe because it is actually generated by a visitor activity.
Here are certain aspects that affect just how fast the resize is going to be performed:
- In case the resize is set due to the visitor activity.
- If the resize is requested for a currently active iframe.
- Whether the resize is demanded for an iframe below the viewport or above the viewport.
It is actually attainable to possess an amp-iframe appear at the top of a file once the amp-iframe provides a placeholder element as demonstrated in the example listed here.
- The amp-iframe ought to feature an element with the placeholder quality, ( as an example an amp-img element) which in turn would certainly be rendered like a placeholder unless the iframe is available to be featured.
- Iframe readiness can be learnt by paying attention to onload of the iframe or an embed-ready postMessage, which would be given by the iframe file, whichever arrives primarily.
Some example: AMP Iframe utilizing a placeholder
<amp-iframe width=300 height=300
layout="responsive"
sandbox="allow-scripts allow-same-origin"
src="https://foo.com/iframe">
<amp-img layout="fill" src="https://foo.com/foo.png" placeholder></amp-img>
</amp-iframe>Example: AMP Iframe embed-ready
window.parent.postMessage(
sentinel: 'amp',
type: 'embed-ready'
, '*');
<h3>Iframe viewability</h3>
Iframes can certainly send a <code>send-intersectionsExample: iframe send-intersections
window.parent.postMessage(
sentinel: 'amp',
type: 'send-intersections'
, '*');
<code>
The iframe can take note to an intersection information from the parent window to receive the intersection details.
Example: iframe send-intersections
<code>
window.addEventListener('message', function(event)
const listener = function(event) ;
);The intersection notification would definitely be provided by the parent to the iframe as the iframe moves in or outside of the viewport ( or else is partially detectable) as soon as the iframe is scrolled or resized.
The amp-iframe component should be thought about a fallback in the case that the needed customer knowledge is not feasible by various other methods located in AMP, that is, there is really not already an presenting AMP component for the use situation. This is simply because there are numerous real benefits to employing an AMP element tailored for a specific use-case for instance,:
- A lot better option control and effectiveness
- Customized elements have the ability to provide incorporated placeholder pictures in many cases. This means receiving, say, the right video clip thumbnail right before a video clip loads, and lowers the coding initiative to provide a placeholder manually.
- In-built changing of the size. This indicates that iframe information with uncertain scale can more frequently appear to the visitor like it was belonging to the page, rather than located in a scrollable frame
- Many other alternative functions can possibly be integrated in ( as an example, auto-play for video players).
So basically that's the way the amp-iframe element could be used to add some juice to the accelerated pages we creating. Of course, the dev team does not step back by far from the strictly restrictive approach they have used with this one, advising to use the element as the final measure, if no other AMP means are capable of providing the needed content or functionality.
Talking about AMP - this is rather a project specific decision each of us should make for themselves – either to use the AMP or not and which components must be included if we decide to create AMP copies of our pages.