amp-html

amp-live-list: find out if the host document is updated

I'm studying this part of the tutorial: https://amp.dev/documentation/guides-and-tutorials/develop/live_blog/?format=websites

The task is to reveal the button.

Initial code:

<h1>Posts</h1>
<amp-live-list
  id="my-live-list"
  data-poll-interval="15000"
  data-max-items-per-page="2">
  <button update on="tap:my-live-list.update">You have updates!</button>
  <div items>
      
      <div id="1" data-sort-time="1053"  data-update-time="1053">
        0 vpksfnokrq
      </div>
      
      <div id="2" data-sort-time="444"  data-update-time="444">
        1 pcwunjyecn
      </div>
      
  </div>
  <div pagination>
    <span class="step-links">
        

        <span class="current">
            Page 1 of 5.
        </span>

        
            <a href="?page=2">next</a>
            <a href="?page=5">last &raquo;</a>
        
    </span>
  </div>

Every time at the server side I change the value that I use in data-sort-time and data-update-time.

The script starts sending requests to the server like this: https://127.0.0.1:8888/live_blog?amp_latest_update_time=1056&__amp_source_origin=https%3A%2F%2F127.0.0.1%3A8888

This seems to be the value of the biggest data-sort-time received from the server.

The response for this request:

<!doctype html>
...        
    <h1>Posts</h1>
    <amp-live-list
      id="my-live-list"
      data-poll-interval="15000"
      data-max-items-per-page="2">
      <button update on="tap:my-live-list.update">You have updates!</button>
      <div items>
          
          <div id="1" data-sort-time="1057"  data-update-time="1057">
            0 eaobaqcvey
          </div>
          
          <div id="2" data-sort-time="448"  data-update-time="448">
            1 ccswyymlss
          </div>
          
      </div>
...
</amp-live-list>

</body>
</html>

enter image description here

Well, data-sort-time has changed. The problem is that the button is not revealed.

enter image description here

But as soon as I change ids, the button is revealed. In other words, at the server side I set equal value to id, data-sort-time and data-update-time.

<h1>Posts</h1>
<amp-live-list
  id="my-live-list"
  data-poll-interval="15000"
  data-max-items-per-page="2">
  <button update on="tap:my-live-list.update">You have updates!</button>
  <div items>
      
      <div id="1068" data-sort-time="1068"  data-update-time="1068">
        0 owuswbdsur
      </div>
      
      <div id="459" data-sort-time="459"  data-update-time="459">
        1 vmwbpzcums
      </div>
      
  </div>
  <div pagination>
    <span class="step-links">
        

        <span class="current">
            Page 1 of 5.
        </span>

        
            <a href="?page=2">next</a>
            <a href="?page=5">last &raquo;</a>
        
    </span>
  </div>

enter image description here

Well, it is a bit strange for me. I tried to change the content of those divs that are children of <div items>. The button is not revealed.

The results of my experiments:

  1. The button is not revealed when data-sort-time, data-update-time or the content changes.
  2. The button is revealed when ids change.

I can't understand:

  1. Why does it send data-sort-time to the server. This means that I'll have to make web server (like Nginx) to react somehow to this. But how to react?

  2. If I manage to reveal the button, why the reaction was not on the data-sort-time but on ids?

Solution

  • amp-list-list has two modes:

    1. auto-update without user interaction.
    2. manual update via button.

    The auto-update will be triggered when data-update-time changes. This means the content will automatically be updated and displayed. This is good for live tickers (e.g. sports scores).

    The manual update behavior only triggers when an item with a new id appears. For example, when there's a new item in a list of live blog entries.

    You can either implement each mode separately (e.g. auto update the whole page by wrapping everything in an amp-live-list and serving the page with the current time as data-update-time) or combine both modes to support auto updating previously published items.

    To save user bandwidth, amp-live-list allows additional server-side filtering which means you can only return content that has changed since the last update based on the data-sort-time included in the request. This is not required.

    To answer the questions:

    1. This is optional for server-side filtering. It's OK to serve the normal (potentially updated document).
    2. The button is only for new live list items (by design).