# The Evolution of AMP ／ Paul Li（李維翰)

{%hackmd @ModernWeb/HkqZxb98v %}

### [簡報下載](https://blog.lalacube.com/mei/Reveal_the_evolution_of_amp.php?page=1)

> 共筆從這開始

###### tags: `MW20` `維運與測試` `AMP`


### What's AMP？
AMP 是搜尋引擎與網頁的橋樑

未來支援 AMP for Email

### More stable more reliance
long-terms stable version

如果是尋求穩定 AMP 的朋友，可以直接在 script 引入的時候直接使用 lts 的 AMP。

### CSS limitation
在 AMP 上使用 CSS 是一個學問，因為有 50K (?) 的限制。Covid-19期間提升至 75K。

可在直播增加商品陳列、增加Table/PC版，甚至Dark Mode。

### Payment friendly
透過 Payment Request API 可以將資料儲存在瀏覽器，讓瀏覽器幫我們匯入 Payment 的資料，提升自動完成的流暢度。
`<amp-iframe allowpaymentrequest src="https://your-domain.com/amp-payment-request-api.....">`

### Mighty amp-component
講者以前以為 `<amp-list>` 是**廢物中的廢物**，現在 `<amp-list>` 是最好的 component

`<amp-list>` 有支援infinity scroll

`<amp-list>` 開放method，可讓user點擊達成動態回饋

### Remote SD Fetching

透過 structure data 可以讓 google 搜尋引擎顯示更豐富的資料，讓使用者更容易看到那個商品。
(標題、描述、截圖、評價、關聯商品..等)

也可以注入 event，讓使用者可以知道當前的一些購買活動。

[google 新推出的 rich result test](https://search.google.com/test/rich-results)

### Carousel

不要被文件侷限，使用 CSS 的屬性支援就可以達成 Carousel 的功能。

scroll-snap-type
scroll-snap-align