[9/1/2016 Update: has been promoted from “experimental” to “stable”, and can now be used in production pages. Check it out, try it out and give us feedback!]
More and more publishers are leveraging the power of live blogs to connect readers to breaking news as it unfolds. Today we are inviting you to try out the beta for , a new AMP component that updates page content dynamically without additional navigation or reload: readers looking at an earlier version of the page will simply see new updates as they come in.
You—as a developer—have control of the content, and can override the component’s default styles. For example, a default class is applied to the most recent updates, so you can determine the style of new items, such as subtly highlighting the background for new items for a few seconds. The component also includes a customizable button for your users to pull in updates on demand.
How does it work?
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.
To use , all you have to do is:
- While the component is in beta, opt into the experiment 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 for all pages served from cdn.ampproject.org.
- In the HTML for an AMP page, wrap any live-updating content in and its children, ensure that each element has the required attributes and structure, and 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.
That’s it! The child elements of will be dynamically updated as new content comes in.
Example implementation
[code language=”html”]
<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>
[/code]
Why beta?
This is a very flexible format: on one hand, you could use it for live blogs, which feature updates across nearly the entire page, and can include details like pagination or deep-linking to specific posts. On the other, you might use it to update just one small section, like a scoreboard during a soccer game, or a map of voting results on the night of an election. With your feedback from testing real-world applications of the component, we have the opportunity change some of the behaviors and validations before launch.
This of course means that you shouldn’t launch it on a public-facing page until progresses to “stable” status, and that you should expect to see some validation errors associated with the component while you’re testing.
Try it out!
So check out the documentation in GitHub and at AMP by example, test out the component in your development environment, and give us feedback for what does and doesn’t work for your use-cases. The sooner we know what is and isn’t working for , the sooner we can polish it up and release it to production for use in your AMP pages.
Posted by Eric Lindley, Product Manager