混合动态和缓存数据

简介

这是一个示例，展示如何集成产品数据详情，例如描述、价格、可用性等，以及不同的数据新鲜度要求。AMP 可以从 AMP 缓存中提供。由于 AMP 缓存的过时-同时-重新验证缓存策略，一位用户在获取最新版本之前会看到过时的数据。如果产品数据始终需要保持最新，例如产品可用性，这可能会成为一个问题。此示例演示了一种避免缓存 AMP 上出现过时数据的方法。

设置

我们使用 amp-list 从服务器检索最新数据。

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

我们使用 amp-mustache 作为 amp-list 的模板

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

如何实现动态和缓存的产品数据详情

对于产品详情（如描述或标题），这些信息不太可能频繁更改，您无需执行任何特殊操作。为了确保用户始终看到最新内容，您可以使用 amp-list 组件，该组件将直接从您的服务器提取和呈现内容。

我的产品

这是一个非常棒的产品。

<h3>My product</h3>
<p>This is a really great product.</p>
<amp-list height="24"
          layout="fixed-height"
          src="/static/samples/json/product.json"
          binding="no">
  <template type="amp-mustache">
    Price: ${{price}}
  </template>
</amp-list>

如果您需要多次调用才能获取所有数据，这在 AMP 中不是问题，因为如果在页面中找到多个具有相同 src 的 amp-list，AMP 运行时实际上只会进行一次网络调用。

通过检查 Chrome 开发人员控制台的网络选项卡，您可以检查第二个 amp-list 是否不会导致第二次网络调用。

由于我们使用的是 service-worker，您可能会看到两次相似的调用，一次接一次地调用同一个端点，因此为了更好地验证此行为，请转到“应用程序”->“服务工作线程”并单击“取消注册”。

<amp-list height="24"
          layout="fixed-height"
          src="/static/samples/json/product.json"
          binding="no">
  <template type="amp-mustache">
    Availability: {{availability}}
  </template>
</amp-list>

需要进一步解释？

如果此页面上的说明没有涵盖您的所有问题，请随时联系其他 AMP 用户以讨论您的确切用例。

转到 Stack Overflow

一个无法解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但也欢迎您为特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

作者： @kul3r4