AMP

实时更新 AMP

未分类

[9/1/2016 更新：已从“实验”升级到“稳定”，现在可以在生产页面中使用。查看、试用并提供反馈！]

越来越多的发布商利用实时博客的力量，让读者在新闻发生时就能了解最新动态。今天，我们邀请您试用的测试版，这是一个新的 AMP 组件，可以在无需额外导航或重新加载的情况下动态更新页面内容：查看页面早期版本的读者只需在更新时看到新更新即可。

您（作为开发人员）可以控制内容，并且可以覆盖组件的默认样式。例如，默认类应用于最新更新，因此您可以确定新项目的样式，例如在几秒钟内为新项目微妙地突出显示背景。该组件还包括一个可自定义按钮，供您的用户按需获取更新。

它是如何工作的？

在后台，当使用 AMP 页面的客户端上显示时，轮询主机上的原始文档以获取更新。当客户端收到响应时，它会过滤这些更新，然后将它们动态插入客户端的页面中。发布商可以自定义轮询速率以控制传入请求的数量，而 Google AMP 缓存等 AMP 缓存可以执行优化以减少服务器响应负载，从而节省客户端带宽和 CPU 周期。

要使用，您所要做的就是

  1. 当组件处于测试版时，通过输入以下内容选择加入实验 
    AMP.toggleExperiment('amp-live-list')

    在测试页面上输入 javascript 控制台。您还可以选择AMP 实验页面以了解从 cdn.ampproject.org 提供的所有页面。

  2. 在 AMP 页面的 HTML 中，将任何实时更新的内容包装在和其子元素中，确保每个元素都具有所需的属性和结构，然后发布页面。
  3. 每当有新信息时，使用新条目或对旧条目的更改更新的 HTML，然后重新发布页面。

就是这样！的子元素将随着新内容的出现而动态更新。

示例实现

[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">

您有更新</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]

为什么是测试版？

这是一个非常灵活的格式：一方面，您可以在几乎整个页面上进行更新的实时博客中使用它，并且可以包括分页或特定帖子的深度链接等详细信息。另一方面，您可能使用它来更新一个小部分，例如足球比赛中的记分牌，或选举之夜的投票结果地图。通过您对组件实际应用的测试反馈，我们有机会在发布之前更改一些行为和验证。

当然，这意味着在进展到“稳定”状态之前，您不应在面向公众的页面上发布它，并且在测试时您应该会看到与该组件关联的一些验证错误。

试试看！

因此，请查看GitHub 和AMP by example中的文档，在您的开发环境中测试该组件，并向我们提供反馈，了解哪些对您的用例有效，哪些无效。我们越早知道对有效或无效，我们就越早可以对其进行完善，并将其发布到生产环境中以用于您的 AMP 页面。

产品经理 Eric Lindley 发帖