Live blogs are about to get even faster thanks to live-updating AMPs, announced this week by the Accelerated Mobile Pages project. This brings the power of AMPs to live updating pages, such as news publishers with live blogs used to break news as it unfolds.
Developers have full control over the content, being able to override any of the default styles. For example, you can change the style to highlight the most recent items, or customize the page with a button that people can use to pull in updates on demand.
The Accelerated Mobile Pages Project explains how it works:
”In the background, while an AMP page using is displayed on the client, polls the origin document on the host for updates. When the client receives a response, it then filters and dynamically inserts those updates back into the page on the client. Publishers can customize the polling rate in order to control the number of incoming requests, and AMP caches like the Google AMP Cache can perform optimizations to reduce the server response payload, saving client bandwidth and CPU cycles.”
It’s a simple three step process to implementing :
- While it’s in beta, opt in by entering AMP.toggleExperiment(‘amp-live-list’) into your javascript console on your testing page. You can also opt in on the AMP experiments page.
- Enclose live-updating content in , ensuring each element has the necessary attributes and structure before you publish the page.
- Whenever new information comes in, update the HTML for with new entries or changes to older entries, and re-publish the page.
The Accelerated Mobile Pages Project give an example of what a valid implementation may look like:
<amp-live-list id=“live-list” data-poll-interval=“20000” data-max-items-per-page=“10”>
<div update on=“tap:live-list.update”>
You have updates
</div>
<div items>
<div id=“live-list-item-2” data-sort-time=“1464281932879”>world</div>
<div id=“live-list-item-1” data-sort-time=“1464281932878”>hello</div>
</div>
</amp-live-list>
This AMP component is still in beta format for now because no one is sure how it will end up being used. It could be used across entire pages, or it could be used for certain components of a page — such a stock ticker or scoreboard. Seeing how people use it will allow the AMP Project the opportunity to refine the component for a full launch. You can test it out by visiting GitHub for the full documentation.
