AMP Conf 2019 精華重點整理一覽
BY kate │
AMP在2019.4.17-18於日本東京發表了未來的走向與發展，列出許多近期與未來目標，同時前一陣子amp網站也做了大幅改版，整合原本的範例網站、部落格等等...可見還有許多的成長性。雖然我們已經編寫了不少關於AMP的元件、AMP介紹甚至AMP Stories，但以今年發表會來看這些AMP元件或規範將會持續升級、讓開發者使用上更容易、應用更廣泛。
此次活動有兩天，主題眾多，有關於技術、Chrome、廠商合作等等...我們挑了幾個主題整理一些重點如下:
AMP下一步要做什麼?
AMP這一年或近期計畫達成的目標
- 2019年將著重在這些方面 AMPHTML Ads、Stories、Email、AMP Web
- AMP ads 廣告未來可能支援手勢、機能性
- AMP Stories : 埋入語法、動畫、回饋反映(Reaction)、分支( branching)
- AMPEmail: 未來可能支援影片播放、更多可使用的元件、連結性
- AMP WEB: 支付功能、更彈性的CSS規範、視窗切換狀態(transition)、有狀態的頁面(stateful pages)
- amp-script 實驗功能即將正式推出
AMP Script
令人振奮的消息，一直以來AMP為了顧及js可確保運作與速度，無法開放自訂義javascript，而今宣布將開放可自行編寫js(雖然看起來限制仍不少，但可期待後續發展)
- 概念:利用sandbox(沙箱)包住自訂義的javascript確保不會影響其他組件，發明了WorkDOM來執行這些自訂義的js，同樣頭部必須插入執行程序用的js，在頁面內容中載入(src)js，示範
- js檔案上限150kib
- 可做部分html載入
- 可做序列、亂數
- (點選按鈕後)執行動作，5秒內js必須執行
- 可以和vue.js、React...等、配合
chrome在支援AMP的部分繼續作了許多改進，最大的部分便是將搜尋AMP後，進到頁面裡面的灰色網址浮動列拿掉，對許多網頁製作者來說終於可以不用煩惱重疊的浮動頭部到底該如何處理了。
- 新推出Web packaging-打包暫存與處理網址等，可以讓AMP顯示的網頁不再是google替代的網址，而是amp的原始網址，也會拿掉頭部提示原網址。(但實際上頁面還是暫存於google)
- chrome73 後優化圖像載入，讓圖像先佔有空白位置，文本不飄移
- 開發者工具 中的lighthouse和DevTools 可以觀察amp是否正確
- chrome 未來將會以支援AMP網頁佈局穩定(不會因為載入圖片或媒體時造成版面飄移)
- chrome未來將會默許amp的lazy loading，更小、更快的載入
- Amp的新標籤
，類似iframe，實現無縫體驗讓切換視窗時更快速
AMP Stories做了非常多格式更新，可以感受到stories的靈活度更高了。目前這些更新大部分都已經推出，也可以直接查看相關文件amp stoies的製作文件
-
本地化-可支援21種語言和翻譯，例如
<html amp lang="zh-TW">，甚至是由右至左的阿拉伯語，解決之前Bookend呈現出連結語言錯誤或是沒有出現的問題 - 桌面版的AMP Stories推出滿版效果，只要添加一個屬性即可
<amp-story supports-landscape>
，圖片預設為置中，如果需要裝置不同有不同圖片位置，需要手動加入定位調整(尚未完整推出)。 - 導航菜單(amp-sidebar)可加入在AMP stories裡，只要加入
<amp-sidebar>就會自動生成 - 增加附件功能
<amp-story-page-attachment>，可在AMP Stories任一頁中開啟一個視窗，內容可以是網頁內容或是影片 - 增加可使用社群功能，例如
<amp-twitter>點擊後不會跳出story，只會在同一個頁面放大，避免使用者離開。 - google 搜尋將以旅行為優先展現amp stories，進而展示其他類型 ,google discover feed (app) 上可以搜尋到各式各樣的amp stories
- 已有amp stories 模板創建工具如
https://ztorie.com/
https://makestories.io/
https://unfoldstori.es (6月時app專業版將可製作amp stories)
目前整理了這些與AMP Web開發較有關連性的幾項，如果對AMP Conf 的內容想要詳加了解與觀看影片，可至官方youtube平台
參考：AMP Conf 2019
