AMP = Accelerated Mobile Pages，Google帶領開發的開源專案，目的是為提升行動裝置對網站的存取速度。沒寫過，所以要來學，這一篇就是學習過程中的筆記

AMP 基本組成

一個合格的 AMP 一定要有以下的元素

第一行一定是 <!doctype html>
一定有 <head></head> 和 <body></body> 兩個區塊
<html> 標籤內要標示閃電符號 (<html ⚡>，或是 amp 文字 (<html amp>)
<head> 的第一個元素一定是 <meta charset="utf-8">
<head> 內會有 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<head> 內要有 <script async src="https://cdn.ampproject.org/v0.js"></script>，這一行越早寫越好
<head> 內要有 <link rel="canonical" href="$SOME_URL">，$SOME_URL 要替換成目前頁面的網址，目的是要連結目前的 AMP 頁面到非 AMP 頁面或是網站

包含 AMP-Style: 這段程式碼會在 AMP Script 載入前將畫面隱藏

<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>

AMP 限制

CSS

在 AMP 上面要使用自訂 CSS 有以下的設定

自訂 CSS 必須定義在 <style amp-custom></style> 內且只能有一個或是 inline-style，為了節省網路傳輸，不能有外部 style 連結
CSS 內容的部分大小不能大於 75 K
不能使用 !important
不能寫 i-amphtml- class 和 tag 名稱，簡單說不能使用 AMP Component 要用的名稱
其它能用不能用的 CSS Style 請參閱 Suppored CSS

HTML

除了 CSS 有限制外，HTML 也有允許跟不允許使用的列表，HTML5 Tag 白名單

更多詳細資訊可以閱讀此文，AMP HTML Specification

開發思維

AMP 的開發方式，基本上是使用官方提供的 Component 去組出畫面，所以在內容呈現上就是要找到對的 Component 然後將內容套進去，例如 <img>，就會用 <amp-img> 替代

1	<amp-img src="IMG-URL" layout="responsive" width="640" height="480"></amp-img>

所有的動作就交給 component 來處理，像是 RWD 的效果，除了 responsive 的效果外，當然還有其他的設定，設定方式請參閱官方文件 AMPHTML Layout System 章節

使用 AMP Components

每一個 AMP Component 在自己的 API 文件中，大部分都有 Required Scripts 的資訊，而這一個資訊就是要加到頁面中，例如 amp-youtube 元件

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

基於這種架構，寫 AMP 的第一個門檻是要使用哪一個 component。(怎麼跟 Flutter 好像)，更多關於 Component 的可以參閱 Components 文件

驗證工具

Chrome 有出 AMP 驗證工具，安裝後即可使用，安裝位置

CK's Notepad

[AMP] First AMP Page