We live in the dynamic world, the Internet has become maybe the most significant part of our everyday life helping us to know what's going on around. Have you noticed very often the things you've read around through the day get emitted as "breaking" on the evening news? And when that happens we think: we've been reading the same pages. So the fastest and reliable way keeping track what's going on is The Net and considering that we more and more using our mobiles to access it, comes the necessity of delivering the latest information to us in an easy, fast and convenient way.
Combine this with the efforts of the Internet giants to provide a lightweight and ultrafast framework for delivery of basically any content to the users on their mobile devices and one of the probable results you will get is the amp-live-list component which comes as a part of the Google's Accelerated Mobile Pages or AMP web builder project.
What amp-live-list does is supporting the capability content which is being updated live on the master page to instantly get changed in the AMP mirror as well, so the users could use the information as it appears without having to refresh the page manually or navigate to a different page. In other words – if you got an AMP page loaded on your device upon any change in the live content you're getting a notification that there is an update available – just like in the social network apps and you get to choose to load it or not. This last approach is rather cool since it spares your bandwidth from getting additional traffic eating up the limit potential user's mobile data plan might have.
Using this component is quite easy and straightforward. Since it comes as one of the AMP additional component the very first thing you would need to do is including it in your page placing the <script> tag required <script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script> in your page's <head> tag.
The amp-live-list component supports two of the AMP's native layouts – you can use it either as a container letting the content wrapped within defining its size or as fixed-height requiring also a definition of the height attribute – in this case the amp-live-list will take the space available to it keeping its height unchanged.
The element consists of three sections referred to by the official documentation as reference points The first two of them like the update interval and the number of items are mandatory – respectively handled by the data-poll-interval (which value is in milliseconds and the minimum value is 15 000 or 15 seconds) and the maximum items permitted per page – handled by the data-max-items-per-page attribute (which value should be positive whole number). The last reference is the so called pagination functionality which comes to take place as a wrapper having the pagination attribute at the end of the amp-live-list element. Since the project claims to be focusing on the speed and performance and what this particular element actually does is rewriting the DOM, the AMP recommends narrowing down the number of live fetched items and therefore - avoiding pagination when possible. The actual updating of the live list takes place with the help of an button element having the on="tap:my-live-list.update" attribute which becomes available when the script has detected there are updates on the master page.
The actual content comes wrapped into a <div> tag carrying the items attribute. All the children elements of this one are in turn required to have defined id and data-sort-time attributes in order to be properly handled.
The amp-live-list feature systematically polls the host document for updated web content and modifies the end person's browser just as new elements appear. This signifies that every time a new blog post requires to be added in, the host document ought to be updated by CMS to include the update in both the body and the metadata part.
This is in what way an initial blog could appear like:
<amp-live-list id="my-live-list" data-poll-interval="15000" data-max-items-per-page="5">
<button update on="tap:my-live-list.update">You have updates!</button>
<div items></div>
</amp-live-list>The data-poll-interval property allows you to define tips on how often polls must take place; assuming that the host document is revised, the update should be available to the user soon after the next time period.
Each time a brand-new item is actually added to the host document, the <button update on="tap:my-live-list.update"> component presents a button that, once clicked on, will trigger the webpage to present the latest articles.
Live blogs could grow making the webpage too long, the data-max-items-per-page characteristic helps you to define how many objects can possibly be included to the live blog page. If the number of objects after an upgrade exceed data-max-items-per-page, the oldest updates exceeding this number will certainly be gotten rid of. For example, in the case that the page currently has 9 items, data-max-items-per-page is set to 10, and 3 new elements arrive in the latest update, the two earliest materials will be extracted from the page with the current update.
amp-live-list requires all the posts to be children of the tag <div items></div>. By referring to each post as an item, every item should have an unique id and a data-sort-time.
Since you are really familiar with the amp-live-list feature, let us identify the best ways to use a more challenging live blog.
Very long blogs could apply pagination to boost functionality simply by minimizing the number of blog elements to display on a web page. To implement pagination, add the <div pagination></div> element in the amp-live-list component, then insert any markup you need for pagination (for example, a web page number or a link to the following and earlier page).
When we're using the pagination, the ordinary code we applied before transforms into:
<amp-live-list id="my-live-list" data-poll-interval="15000" data-max-items-per-page="5">
<button update on="tap:my-live-list.update">You have updates!</button>
<div items></div>
<div pagination>
<nav>
<ul>
<li>1</li>
<li>Next</li>
</ul>
</nav>
</div>
</amp-live-list>It's your responsibility to populate the navigating items the right way by modifying the managed web page. As an example, inside of the live blog sample, we render the webpage through a server-side AMP Layout Template and we utilize a query guideline to specify what the first blog material of the page should be. We reduce the size of the webpage to 5 materials, so assuming that the web server has produced more than just 5 elements when a user arrives on the primary webpage it should show the Next element in the navigating area.
Right after the size of blog posts has exceeded the maximum variety of materials pointed out by data-max-items-per-page, the earlier blog materials are displayed in the "Next" webpages. Given that the amp-live-list polls the server at intervals to observe if there is any sort of development in the items, there is really no need to poll the web server if the user isn't really on the first web page.
You can include the disabled feature to the hosted page to stop the polling mechanism. In the live blog sample, we perform this particular practices in a server-side AMP Landing Page Template; when the requested web page is not the first one, we provide the disabled characteristic to the amp-live-list feature.
Basically, that's the way the amp-live-list component should take place in an AMP page in order to be properly functioning and the overall page markup – validated as AMP. It might be quite useful if your content is constantly updating and you would need to keep your audience aware of what's going on right now. There is a thing to note though – in some particular cases when the internet speed is extremely slow it is possible that the javascript handling the component and its styles arrives after the page has already been displayed. For such cases, it might be a good idea adding a line hiding the element until things are ready by adding this snippet to your page's amp-custom styles amp-live-list> [update] display:none;
It's nothing dangerous since once the amp-live-list becomes active it will also get assigned display:blocks and get visible on page. So in case you needed a tool displaying your live content on your AMP pages – now you know which one and have a few clues about using it. All that's left is finding a breaking news to write about.