¿Cómo agregar una función de actualización de contenido en Amp HTML?
amp-live-list
El componente amp-live-list añade soporte para la publicación de actualizar en tiempo real a las páginas de AMP como nuevo contenido que esté disponible en el documento de origen. Esto funciona muy bien para la aplicación de los blogs en vivo. Encuentra un ejemplo de un blog en vivo aquí.
En otras palabras, el tiempo de ejecución de AMP sondeará el servidor de actualizaciones para el documento de origen. El servidor puede devolver toda la página AMP o partes de él, y en el tiempo de ejecución se actualiza la página en el lugar sin problemas.
1 Código de apertura
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Ingrese el siguiente script justo después de la apertura <head>
<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
3 Utilice los estilos amp-live-list-item, cuando utilice amp-live-list. Puede consultar la documentación para más detalles.
Ingrese los siguientes estilos justo antes del </head>
<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%;
}
header {
font-size: 2rem;
}
.side {
display: flex;
align-items: center;
justify-content: space-around;
}
.content {
font-size: 2rem;
padding: 8px;
}
.flag {
padding-top: 8px;
padding-bottom: 8px;
}
.button-update {
margin: 16px;
}
</style>
4 Implementación de un Blog en vivo
Utilice el atributo data-poll-interval para especificar la frecuencia del componente amp-live-list el cual sondeará nuevos datos. El intervalo mínimo es de 15 segundos. Utilice data-max-items-per-page para especificar el número máximo que aparece en la página. Para una extensa explicación de todos los atributos, consulte amp-live-list.
Utilizar on="tap:my-live-list.update" para cargar los últimos cambios del servidor. Aparecerá un botón cuando el tiempo de ejecución de AMP descubre nuevos cambios del documento. Tenga en cuenta que el botón tiene que ser definido como un hijo directo de amp-live-list.
Una amp-live-list debe contener una lista de elementos cómo: <div items>. Cada artículo tiene un identificador específico y la amp-live-list buscará elementos con una nueva identificación.
Este ejemplo muestra una implementación con un servidor de representación de una serie de 5 elementos. amp-live-list sondeará la página cada 15 segundos hasta 5 elementos se agregaran a la página. Cada vez que la amp-live-listencuesta la página, el servidor agregara un nuevo elemento a la página. Puede consultar en server.go y en amp-live-list.go para detalles de implementación.
Código
<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="button button-primary button-update">You have updates</button>
<div items>
<div id="A green landscape with trees."
data-sort-time="20161211061122">
<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 id="Mountains reflecting on a lake."
data-sort-time="20161211061137">
<div class="card blog">
<amp-img src="/img/landscape_mountains_1280x657.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Mountains reflecting on a lake.</p>
</div>
</div>
<div id="A road leading to a lake with mountains on the back."
data-sort-time="20161211061152">
<div class="card blog">
<amp-img src="/img/landscape_lake_1280x857.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>A road leading to a lake with mountains on the back.</p>
</div>
</div>
<div id="Forested hills with a grey sky in the background."
data-sort-time="20161211061207">
<div class="card blog">
<amp-img src="/img/landscape_trees_1280x960.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Forested hills with a grey sky in the background.</p>
</div>
</div>
<div id="Scattered houses in a mountain village."
data-sort-time="20161211061222">
<div class="card blog">
<amp-img src="/img/landscape_village_1280x853.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Scattered houses in a mountain village.</p>
</div>
</div>
</div>
</amp-live-list>
La demostración la puede ver en el pagina oficial
Esta muestra se detiene después de diez actualizaciones. Si desea empezar de nuevo, borre las cookies de su navegador web o abrir de nuevo esta página en una pestaña de incógnito / privada.
Al hacer clic en el botón "You have updates", el nuevo contenido se visualiza en la columna de la demostración (el de la derecha si la demo se accede por escritorio). La columna de código (el que está en el centro si la demo se accede por escritorio) no se actualiza en sí, pero si quieres ver todos los elementos de la página, vuelva a cargar la página.
Implementación de un Live Score
Si desea actualizar los elementos de lista existentes, es necesario especificar a través del atributo data-update-time cuando la actualización se ha realizado.
El siguiente ejemplo mostrará una puntuación de un partido de fútbol cuyo contenido se cambia cada vez que la amp-live-list encuesta la página en el servidor.
Código
<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="button button-primary">You have updates</button>
<div items>
<div id="list-item-1"
data-sort-time="1234567"
data-update-time="20161211061352">
<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">10 - 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>
Demostración
10 - 0
A continuación la estructura completa del código
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
<link rel="canonical" href="https://ampbyexample.com/components/amp-live-list/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<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%;
}
header {
font-size: 2rem;
}
.side {
display: flex;
align-items: center;
justify-content: space-around;
}
.content {
font-size: 2rem;
padding: 8px;
}
.flag {
padding-top: 8px;
padding-bottom: 8px;
}
.button-update {
margin: 16px;
}
</style>
</head>
<body>
<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="button button-primary button-update">You have updates</button>
<div items>
<div id="A green landscape with trees."
data-sort-time="20161211061122">
<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 id="Mountains reflecting on a lake."
data-sort-time="20161211061137">
<div class="card blog">
<amp-img src="/img/landscape_mountains_1280x657.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Mountains reflecting on a lake.</p>
</div>
</div>
<div id="A road leading to a lake with mountains on the back."
data-sort-time="20161211061152">
<div class="card blog">
<amp-img src="/img/landscape_lake_1280x857.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>A road leading to a lake with mountains on the back.</p>
</div>
</div>
<div id="Forested hills with a grey sky in the background."
data-sort-time="20161211061207">
<div class="card blog">
<amp-img src="/img/landscape_trees_1280x960.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Forested hills with a grey sky in the background.</p>
</div>
</div>
<div id="Scattered houses in a mountain village."
data-sort-time="20161211061222">
<div class="card blog">
<amp-img src="/img/landscape_village_1280x853.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Scattered houses in a mountain village.</p>
</div>
</div>
</div>
</amp-live-list>
<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="button button-primary">You have updates</button>
<div items>
<div id="list-item-1"
data-sort-time="1234567"
data-update-time="20161211061352">
<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">10 - 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>
</body>
</html>
Comentarios
Disqus comments:
Facebook comments: