amp-live-list

Edit on Github
Open in Playground

Introduction

The amp-live-list component adds support for publishing live updates to AMP pages as new content becomes available in the source document. This works great for implementing live blogs. Find an example of a live blog here.

In other words, the AMP runtime will poll the server for updates to the origin document, fetching itself. The server can return the entire AMP page or parts of it, and the runtime updates the page in-place seamlessly.

Setup

Import the amp-live-list component in the header.

<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>

Use amp-live-list-item to style the children of the amp-live-list. Refer to the documentation for details.

<style amp-custom>
  .amp-live-list-item {
    justify-content: center;
    display: flex;
  }
  .blog {
    padding: 0;
    background: #fff;
    width: 300px;
  }
  .blog p {
    padding: 8px;
    margin: 0;
  }
  .match {
    background: #fff;
    min-width: 0%;
  }
  .side {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .content {
    font-size: 2rem;
    padding: 8px;
  }
  .flag {
    padding-top: 8px;
    padding-bottom: 8px;
  }
</style>

Implementing a Live Blog

Use the data-poll-interval attribute to specify how frequently the amp-live-list component will poll new data. The minimum interval is 15 seconds. Use data-max-items-per-page to specify the maximum number displayed on the page. For an extensive explanation of all the attributes, refer to amp-live-list.

Use on="tap:my-live-list.update" to load the latest changes from the server. A button will appear when the AMP runtime discovers new document changes. Note that the button has to be defined as a direct child of amp-live-list .

An amp-live-list must contain a list of items below <div items>. Each item has a specific id and the amp-live-list will look for items with new id.

This sample shows an implementation with a server rendering a series of 5 elements. amp-live-list will poll the page every 15 seconds until 5 elements are added to the page. Every time amp-live-list polls the page, the server adds a new item to the page. Refer to server.go and amp-live-list.go for implementation details.

This sample stops after ten updates. If you want to start over, delete cookies from ampbyexample.com or open this page again in an incognito/private tab.

By clicking on the button "You have updates", new content is displayed on the demo column (the one on the right if the demo is accessed by desktop). The code column (the one in the center if the demo is accessed by desktop) does not update itself, but if you want to see all the items on the page, reload the page.

Example

A green landscape with trees.

  <amp-live-list layout="container"
    data-poll-interval="15000"
    data-max-items-per-page="5"
    id="amp-live-list-insert-blog">
    <button update
      on="tap:amp-live-list-insert-blog.update"
      class="ampstart-btn ml1 caps">You have updates</button>
    <div items>
      
      <div id="A green landscape with trees."
        data-sort-time="20170823153944">
        <div class="card blog">
          <amp-img src="/img/landscape_green_1280x853.jpg"
            layout="responsive"
            width="1280"
            height="853">
          </amp-img>
          <p>A green landscape with trees.</p>
        </div>
      </div>
      
    </div>
  </amp-live-list>

Implementing a Live Score

If you want to update existing list items, you need to specify via the data-update-time attribute when the update has been performed.

The following example will display a soccer match score whose content is changed every time the amp-live-list polls the page on the server.

Example

1 - 0
<amp-live-list layout="container"
  data-poll-interval="15000"
  data-max-items-per-page="5"
  id="amp-live-list-update">
  <button update
    on="tap:amp-live-list-update.update"
    class="ampstart-btn caps">You have updates</button>
  <div items>
    <div id="list-item-1"
      data-sort-time="1234567"
      data-update-time="20170823153959">
      <div class="card match">
        <div class="side">
          <div class="flag">
            <amp-img src="/img/italy-flag.png"
              layout="fixed"
              height="50"
              width="100">
            </amp-img>
          </div>
          <div class="content">1 - 0</div>
          <div class="flag">
            <amp-img src="/img/england-flag.png"
              layout="fixed"
              height="50"
              width="100">
            </amp-img>
          </div>
        </div>
      </div>
    </div>
  </div>
</amp-live-list>