The first element is a button with the event on='tap.update' to load the latest changes from the server. In this example, the amp-live-list component contains three elements as direct children. (Since new posts will be added to the first page due to how the pagination mechanism works, there’s no need to poll the server if the user isn’t on that page.) If we’re not on the first page, we’re going to add the disable attribute so the component stops polling for new data. The data-max-items-per-page specifies the maximum number of items displayed on the page.

The data-poll-interval attribute specifies how frequently the component will poll new data (in milliseconds). The id attribute identifies the amp-live-list component since multiple live lists are allowed on a single page. Let’s start by creating a package.json file for our project:ġ4 15 body Also, you need to take into account that realtime features on AMP pages are limited and you can do a lot more using Pusher in your website or app. You can find the entire source code of the application on this GitHub repository.

When a new item is added, a button will be shown, which when clicked, will update the page to show the latest videos (with a simple pagination). The amp-live-list component will regularly poll the server for updated content. This is how the final application will look: In the backend, we’ll use a Node.js/ Express web server with EJS as the template engine. amp-youtube, which displays YouTube video.amp-live-list, which provides a way to display and update content live so you can easily implement a live blog.In this tutorial, we’re going to implement a realtime feed in AMP using two of these components: However, AMPs are web pages designed to load near instantaneously due to the limited set of allowed functionality they provide and a distribution system built around caching.ĪMP also uses custom elements called AMP components to implement features with complex interactions such as video players or embeddable content. On mobile devices, web pages can take several seconds to load. Something we can’t deny about Accelerated Mobile Pages (AMP) is that they are fast.

Node js build