想在 AMP 網頁上做華麗麗效果的我是否搞錯了什麼 - Meng-Ying Tsai

歡迎來到 MOPCON 2020 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@mopcon/2020
手機版請點選上方 按鈕展開議程列表。

課程簡報

Preface

起因：Why AMP(Accelerated Mobile Pages)?
做個網站，什麼都好但就是沒有流量
嘗試來做全站 AMP 化

超快速的網頁效能

Bing/Google 會幫你 Serve cache 頁面！

為什麼大家不來做呢？

  • 框架限制大、導入成本高
  • 使用者有很好體驗，但開發者經驗很糟

為什麼 AMP 比較快？

在 Critical Rendering Path上做各種優化
限制東限制西

來個空白的 AMP
























<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>My first AMP Page</title>
    <link rel="canonical" href="https://your.site/path">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "WebPage",
        "name": "My first AMP Page",
        "description": "Put some description of the page here"
    }
    </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>
  </head>
  <body>
    <h1>My first AMP Page</h1>
    <p>Some content here!</p>
  </body>
</html>

canonical 要做好












   <link rel="canonical" href="https://your.site/path">
  
  <!--structure data-->
    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "WebPage",
        "name": "My first AMP Page",
        "description": "Put some description of the page here"
    }
    </script>

如何確定我的 AMP 沒有問題？

  1. 常見 Layouts

  2. USE MSG 改成 amp-img

    • AMP 不能使用 important!!!(直接避免Layout 被破壞ＸＤ
    • AMP 不允許外部 CSS(除 fontaswome google font)
    • 只允許一個 < style > tag 和 Inline CSS

  3. 來點JavaScript?

    • AMP 不允許你隨心所欲地放自己的 Script
    • JS 必須改用 AMP 元件取代
    • 2019 年推出的 amp-script 還是勉勉強強可以寫 script
    • 例：廣告 amp-ad、圖片輪播 amp-carousel
    • 用你想要操作的 DOM 加上 id
      • amp-bind
        • 先把對應 scr 放進來
        • 透過改變 state 來製造充滿 interaction 的 AMP 網頁
      • amp-form
        • form 有奇妙的 attr：action-xhr
        • 可以送 AJAX 的需求
      • amp-list
        • 保證網頁資訊最新(更新 cache)
        • 如果沒有 amp-list 的話可能會因為他 click 下後商品就被下架了QAQ！商家會遇到大 麻 煩 講者
        • 記得先 require 對應的 script
        • src 指定從哪裡 fetch json 會把 template 裡的內容根據給的資料 render 出來
      • 可參考 amp-mustache 語法大全

沒有辦法用 amp-bind 及 amp-list 要怎麼辦

例如：localStorage

  • amp-consent (小視窗)
  • amp-user-notification
  • amp-script
    • 透過允許部分 JS 豐富 amp 畫面
    • 不超過 150 KB
    • Inline script + hash(content)

第三方 plugin 舉例

  1. amp-iframe

    • amp-facebook
    • amp-Instagram
    • amp-Twitter

  2. amp-bind-macro 神奇小工具

    • JSON 資料有限制

優點 VS 缺點

優點： ？？？？？Vtuber鯊鯊：A～
缺點：開發體驗糟(難客製化、難維護)

AMP 未來？

Bento AMP 漸進式要推我們入坑

聊天區

如果覺得聲音太小聲，可以在這裡跟我們反應喔~
Mopcon 工人

帶酒是為了避免睡覺

標題是想要去地下城探險嗎？XDDDDD
HaiYaaaaaaa！

需要貓貓 amp-cat

講者還是別喝酒上場好了，這語速有點快XDDDD

需要簡報輔助XD

Ｒ2會眾跑來湊熱鬧，R3講者喝酒上場？
我覺得有在寫前端/程式的大神語速都很快
突然覺得介紹到現在講者是在反推amp XDDDDD

(Q´ｪ`Q)<窩不知道

暨愛之則反之，我用amp所以我返amp

講者怎麼開了一大堆分頁…

記憶體開始Haiyaaaaa

↑蘋果會發光的MacBook很少見惹
講者真嗨XD嗑了什麼

以下開放提供講者解酒液
吼！偷要人ig！被抓到了吼！

抓到了！！！

需要IG網址,為了研究用途

為了介紹解酒液

tags: MOPCON 2020
Select a repo