混合动态数据和缓存数据

简介

这是一个示例，展示了如何将产品数据详情（如描述、价格、可用性等）与不同的数据新鲜度要求集成在一起。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，您可能会看到两个相似的调用，一个接一个地调用同一端点，因此为了更好地验证此行为，请转到“应用程序”->“Service workers”并单击“取消注册”。

<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