谷歌 AMP - 简介

Google Accelerated Mobile Pages (Google-AMP) 是 Google 的新开源项目，专门用于使用 amp html 构建轻量级网页。该项目的主要目标是确保 AMP 代码在所有可能的设备（例如智能手机和平板电脑）上正常运行并快速加载。

AMP 只是标准 HTML 的扩展。HTML 标签很少发生变化，并且 AMP 添加了对其使用的限制。在本章中，我们将列出已更改的 html 标签以及对其添加的限制。处理加载外部资源（例如图像、CSS、JS、表单提交、视频、音频等）的标签已更改。

此外，amp 还添加了许多新功能，例如 amp-date-picker、amp-facebook、amp-ad、amp-analytics、amp-ad、amp-lightbox 等，可以直接在 html 页面中使用。其余用于展示的内容均按原样使用。

凭借所有这些更改和新功能，AMP 承诺在实时环境中使用时提供更快的加载速度和更好的页面性能。

当您在手机上的 Google 搜索中搜索任何内容时，顶部的 google 轮播中看到的显示大部分是 amp 页面，如下所示 -

加速移动页面

当您点击 AMP 页面时，您在地址栏中得到的 URL 如下 -

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms
放大器地址栏

该 URL 并非直接来自发布商，但 Google 将其指向 Google 服务器上自己的副本，该副本是缓存版本，与非 amp 页面相比，有助于更快地呈现内容。这只会在设备上或在 Google 模拟器模式下发生。

示例放大器页面

amp 页面的示例如下所示 -

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </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>
      
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>   
         <amp-img src = "imgurl.jpg" width = "300" height = "300" 
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

AMP 页面中的注意事项

让我们了解程序员在 AMP 页面中必须遵循的一些注意事项。

强制标签

放大器页面中包含一些强制性标签，如下所示 -

  • 我们必须确保 html 标签中添加了 amp 或 ⚡，如下所示 -

<html amp>
   OR
<html ⚡>

  • <head> 和 <body> 标签应添加到 html 页面中。

  • 应在页面的头部添加以下强制元标记；否则放大器验证将失败

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">

  • rel = "canonical" 的链接添加到 head 标签内

<link rel = "canonical" href = "./regular-html-version.html">

  • 带有 amp-boilerplate 的样式标签 -

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

  • 带有 amp-boilerplate 的 Noscript 标签 -

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none
      }
   </style>
</noscript>

  • 添加了异步的 amp 脚本标签非常重要，如下所示 -

<script async src = "https://cdn.ampproject.org/v0.js"> </script>

  • 如果您想向页面添加自定义 CSS，请在此处注明，我们无法在 amp 页面中调用外部样式表。要添加自定义 CSS ，所有 CSS 都必须放在此处，如下所示 -

<style amp-custom>
   //all your styles here
</style>

  • style 标签应添加 amp-custom 属性。

AMP 组件的脚本

请注意，amp 页面中严格不允许使用 src 和 type = ”text/javascript” 的脚本。仅允许在 head 部分添加异步且与 amp-components 相关的脚本标签。

本节列出了用于放大器组件的一些脚本，如下所示 -

amp 广告

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

amp-iframe

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

请注意，该脚本具有 async 和 custom-element 属性以及要加载的 amp 组件的名称。Amp 根据异步和自定义元素属性验证脚本标签，并且不允许加载任何其他脚本。它确实需要我们在示例文件中添加的type=application/json ，如下所示

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

如果需要，上述脚本可以与其他 amp 组件一起使用，例如 amp-analytics。

HTML标签

到目前为止，我们已经看到了 amp 页面中所需的强制标签。现在我们将讨论允许/不允许的 HTML 元素以及对它们施加的限制。

以下是允许/不允许的 HTML 标签列表 -

先生编号 HTML 标签和描述
1

图像

该标签已替换为 amp-img。AMP 页面中不允许使用直接 img 标记
2

视频

替换为 amp-video
3

声音的

替换为 amp-audio
4

内嵌框架

替换为 amp-iframe
5

目的

不允许
6

嵌入

不允许
7

形式

可以用作<form>。我们需要添加脚本以处理 AMP 页面中的表单。

示例 -

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

输入元素

Allowed.<input[type = image]>, 
<input[type = button]>,
<input[type = password]>, 
<input[type = file]> 
are not allowed
9

<字段集>

允许
10

<标签>

允许
11

P、div、页眉、页脚、部分

允许
12

按钮

允许
13

A

允许使用 <a> 标签，但条件如下，href 不应以 javascript 开头。如果存在，目标属性值必须为 _blank。
14

svg

不允许
15

元

允许
16

关联

允许。但不允许加载外部样式表。
17 号

风格

允许。它需要具有 amp-boilerplate 或 amp-custom 属性。
18

根据

不允许
19

无脚本

允许

评论

不允许有条件的 html 注释。例如 -

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

HTML 事件

我们在 html 页面中使用的事件（例如 onclick、onmouseover）在 AMP 页面中是不允许的。

我们可以使用事件如下 -

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

这是输入元素上使用的事件的示例 -

<input id = "txtname" placeholder = "Type here" 
   on = "inputthrottled:
   AMP.setState({name: event.value})">

使用的事件是输入控制的。

课程

您的页面中不能包含带有-amp- 或 i-amp-等前缀的类。此外，您可以根据您的要求使用类名称。

识别码

您的 html 元素的 id 不能以 -amp 或 i-amp- 为前缀。此外，您可以根据您的要求在 html 元素中使用 ids。

链接

amp 页面中不允许使用 JavaScript 进行 href。

例子

<a href = "javascript:callfunc();">click me</a>

样式表

AMP 页面中不允许使用外部样式表。可以在里面添加页面所需的样式 -

<style amp-custom>
   //all your styles here
</style>

style 标签应添加amp-custom属性。

@-规则

样式表中允许使用以下@规则 -

  • 不允许@font-face、@keyframes、@media、@page、@supports.@import。未来将添加对相同内容的支持。

  • @keyframes 允许在<style amp-custom >内使用。如果 @keyframes 太多，最好创建<style amp-keyframes>标签并在 amp 文档末尾调用此标签。

  • 类名、id、标签名和属性不应以-amp-和i-amp-为前缀，因为它们在 amp 代码中内部使用，如果在运行时也在页面上定义，可能会导致冲突。

  • !important属性不允许在样式内部使用，因为 amp 希望在需要时控制元素大小。

自定义字体

AMP 页面中允许使用自定义字体的样式表。

例子

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

来自以下来源的字体已列入白名单，可在 AMP 页面内使用。

  • Fonts.com - https://fast.fonts.net

  • 谷歌字体 - https://fonts.googleapis.com

  • 很棒的字体 - https://maxcdn.bootstrapcdn.com

  • Typekit - https://use.typekit.net/kitId.css （相应地替换 kitId）

注意- amp 页面中允许使用 @font-face 自定义字体。

例子

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

AMP运行时

一旦加载 amp 核心文件就决定了 amp 运行时环境 -

<script async src = "https://cdn.ampproject.org/v0.js"></script>

核心文件负责加载外部资源，决定何时加载它们的优先级，并且在将 #development=1 添加到 amp URL 时帮助验证 amp 文档。

例子

http://localhost:8080/googleamp/amppage.html#development=1

上述 URL 在浏览器中执行时，如果 amp 验证失败，将列出错误；如果没有错误，则显示 amp 验证成功消息。

AMP 组件

Amp 添加了很多放大器组件。它们基本上用于以有效的方式处理资源的加载。它还包含处理动画、显示数据、广告显示、社交小部件等的组件。

AMP 中有 2 种类型的组件。

  • 内置
  • 外部的

注意- <amp-img> 是内置组件，如果添加核心 amp js 文件则可用。<amp-ad>、<amp-facebook>、<amp-video> 等外部组件需要与要添加的组件相关的相应 js 文件。

通用属性

宽度、高度、布局、占位符和后备等属性将适用于几乎所有可用的 AMP 组件。这些属性对于任何 AMP 组件都非常重要，因为它决定组件在 AMP 页面中的显示。

上面列出的所有 AMP 功能都将在本教程的后续章节中详细讨论。

请注意，本教程中的所有示例均针对设备进行了测试，并使用 Google 移动模拟器模式。现在让我们详细了解一下这一点。

谷歌手机模拟器

要使用 Google 移动模拟器，请打开 Chrome 浏览器，右键单击并打开开发者控制台，如下所示 -

谷歌手机模拟器

我们可以看到Chrome的开发者工具如上图。在浏览器中点击您要测试的链接。观察页面以桌面模式显示。

开发者工具

要获取上述页面来测试设备，请单击“切换设备”工具栏，如下所示 -

切换设备工具栏

您也可以使用快捷键 Ctrl+shift+M。这会将桌面模式更改为设备模式，如下所示 -

桌面模式

设备列表如下所示 -

设备列表

您可以选择要测试页面的设备。请注意，这些教程中的所有页面都在 Google 移动模拟器上进行了测试，如上所示。Firefox 和最新的 Internet Explorer 浏览器也可以使用相同的功能。