Google AMP - Einführung

Google Accelerated Mobile Pages(Google-AMP) ist Googles neues Open-Source-Projekt, das speziell für die Erstellung leichter Webseiten mit amp html entwickelt wurde. Das Hauptziel dieses Projekts ist es, sicherzustellen, dass der AMP-Code einwandfrei funktioniert und auf allen möglichen Geräten wie Smartphones und Tablets schnell geladen wird.

AMP ist nur eine Erweiterung von Standard-HTML. Nur wenige HTML-Tags haben sich geändert, und AMP hat die Verwendung eingeschränkt. In diesem Kapitel werden die geänderten HTML-Tags und die hinzugefügten Einschränkungen aufgelistet. Die Tags, die sich mit dem Laden externer Ressourcen befassen, z. B. Bilder, CSS, JS, Formularübermittlung, Video, Audio usw., werden geändert.

Außerdem wurden dem Amp viele neue Funktionen hinzugefügt, z. B. Amp-Date-Picker, Amp-Facebook, Amp-Ad, Amp-Analytics, Amp-Ad, Amp-Lightbox und vieles mehr, die direkt auf HTML-Seiten verwendet werden können. Rest andere, die zur Anzeige bestimmt sind, werden so wie sie sind verwendet.

Mit all diesen Änderungen und neuen Funktionen verspricht AMP ein schnelleres Laden und eine bessere Leistung für Seiten, wenn diese in einer Live-Umgebung verwendet werden.

Wenn Sie in der Google-Suche auf Ihrem Handy nach etwas suchen, werden im Google-Karussell oben hauptsächlich Amp-Seiten angezeigt (siehe unten).

Wenn Sie auf die AMP-Seite klicken, lautet die URL, die Sie in der Adressleiste erhalten, wie folgt:

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

Die URL stammt nicht direkt vom Herausgeber, aber Google verweist auf eine eigene Kopie auf dem Google-Server. Hierbei handelt es sich um eine zwischengespeicherte Version, mit deren Hilfe der Inhalt im Vergleich zu einer Seite ohne Verstärker schneller gerendert werden kann. Dies geschieht nur auf Geräten oder im Google-Emulatormodus.

Beispiel Amp Seite

Ein Beispiel für eine Amp-Seite ist unten dargestellt -

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

Do's and Don'ts auf einer AMP-Seite

Lassen Sie uns einige Vor- und Nachteile verstehen, denen ein Programmierer auf einer AMP-Seite folgen muss.

Obligatorische Tags

Es gibt einige obligatorische Tags, die in eine Amp-Seite aufgenommen werden müssen, wie unten angegeben -

Wir müssen sicherstellen, dass dem HTML-Tag Amp oder ⚡ hinzugefügt wird, wie unten gezeigt -

<html amp>
   OR
<html ⚡>

<head> - und <body> -Tags sollten der HTML-Seite hinzugefügt werden.
Die folgenden obligatorischen Meta-Tags sollten im Kopfbereich der Seite hinzugefügt werden. Andernfalls schlägt die Amp-Validierung fehl

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

Link von rel = "canonical", der innerhalb des Head-Tags hinzugefügt werden soll

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

Style-Tag mit 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>

Noscript-Tag mit Amp-Boilerplate -

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

Sehr wichtig ist das Amp-Skript-Tag mit Async, das wie unten gezeigt hinzugefügt wurde -

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

Wenn Sie der Seite benutzerdefiniertes CSS hinzufügen möchten, notieren Sie sich hier, dass wir auf Amp-Seiten kein externes Stylesheet aufrufen können. Um benutzerdefiniertes CSS hinzuzufügen, muss Ihr gesamtes CSS wie gezeigt hier abgelegt werden.

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

Dem Style-Tag sollte ein Amp-Custom-Attribut hinzugefügt werden.

Skripte für AMP-Komponenten

Beachten Sie, dass Skripte mit src und type = ”text / javascript” auf einer Amp-Seite strengstens nicht zulässig sind. Im Kopfbereich dürfen nur asynchrone Skript-Tags hinzugefügt werden, die sich auf Amp-Komponenten beziehen.

In diesem Abschnitt werden einige Skripte aufgeführt, die für Verstärkerkomponenten verwendet werden.

amp-ad

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

Beachten Sie, dass das Skript über ein asynchrones und ein benutzerdefiniertes Elementattribut mit dem Namen der zu ladenden Verstärkerkomponente verfügt. Amp überprüft Skript-Tags basierend auf asynchronen und benutzerdefinierten Elementeigenschaften und lässt nicht zu, dass andere Skripte geladen werden. Es dauerttype=application/json die wir in der Beispieldatei wie unten gezeigt hinzugefügt haben

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

Das obige Skript kann bei Bedarf mit anderen Amp-Komponenten verwendet werden, z. B. für Amp-Analytics.

HTML-Tags

Bisher haben wir die obligatorischen Tags auf der Amp-Seite gesehen. Jetzt werden wir die erlaubten / nicht erlaubten HTML-Elemente und die ihnen auferlegten Einschränkungen diskutieren.

Hier ist die Liste der zulässigen / nicht zulässigen HTML-Tags -

Sr.Nr.	HTML-Tag & Beschreibung
1	img Dieses Tag wird durch amp-img ersetzt. Die Verwendung eines direkten img-Tags ist auf einer AMP-Seite nicht zulässig
2	video Ersetzt durch Amp-Video
3	audio Ersetzt durch Amp-Audio
4	iframe Ersetzt durch Amp-Iframe
5	object Nicht erlaubt
6	embed Nicht erlaubt
7	form Kann als <form> verwendet werden. Wir müssen das Skript hinzufügen, um mit Formularen auf einer AMP-Seite arbeiten zu können. Example − `<script async custom-element = "amp-form" src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>`
8	Input elements `Allowed.<input[type = image]>, <input[type = button]>, <input[type = password]>, <input[type = file]> are not allowed`
9	<fieldset> Dürfen
10	<label> Dürfen
11	P, div, header,footer,section Dürfen
12	button Dürfen
13	a <a> -Tag ist unter folgenden Bedingungen zulässig, die href sollte nicht mit Javascript beginnen. Wenn vorhanden, muss der Zielattributwert _blank sein.
14	svg Nicht erlaubt
15	meta Dürfen
16	Link Dürfen. Das Laden eines externen Stylesheets ist jedoch nicht möglich.
17	style Dürfen. Es muss ein Amp-Boilerplate oder ein Amp-Custom-Attribut haben.
18	base Nicht erlaubt
19	noscript Erlaubt

Bemerkungen

Bedingte HTML-Kommentare sind nicht zulässig. Zum Beispiel -

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

HTML-Ereignisse

Ereignisse, die wir in HTML-Seiten wie onclick, onmouseover verwenden, sind auf einer AMP-Seite nicht zulässig.

Wir können Ereignisse wie folgt verwenden:

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

Hier ist ein Beispiel für ein Ereignis, das für das Eingabeelement verwendet wird:

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

Das verwendete Ereignis wird eingegeben.

Klassen

Sie können auf Ihren Seiten keine Klassen mit dem Präfix like haben -amp- or i-amp-. Außerdem können Sie den Klassennamen gemäß Ihren Anforderungen verwenden.

Ids

Sie können Ihren HTML-Elementen keine IDs mit dem Präfix -amp oder i-amp- zuweisen. Außerdem können Sie IDs für Ihr HTML-Element gemäß Ihren Anforderungen verwenden.

Links

JavaScript für href ist auf Amp-Seiten nicht zulässig.

Example

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

Stylesheets

Externe Stylesheets sind auf der AMP-Seite nicht zulässig. Es ist möglich, die für die Seite erforderlichen Stile hinzuzufügen -

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

Das Style-Tag sollte haben amp-custom Attribut hinzugefügt.

@ -Regeln

Die folgenden @ -Regeln sind in Stylesheets zulässig -

@ font-face, @keyframes, @media, @page, @ support. @ import ist nicht zulässig. Die Unterstützung dafür wird in Zukunft hinzugefügt.
@keyframes dürfen innerhalb von <style verwendet werdenamp-custom> . Wenn es zu viele @keyframes gibt, ist es gut, <style zu erstellenamp-keyframes> taggen und rufen Sie dieses Tag am Ende des Amp-Dokuments auf.
Klassennamen, IDs, Tag-Namen und Attribute sollten nicht vorangestellt werden -amp- und i-amp- da sie intern im Amp-Code verwendet werden und Konflikte verursachen können, wenn sie zur Laufzeit auch auf der Seite definiert werden.
!important Die Eigenschaft ist im Styling nicht zulässig, da der Verstärker die Elementgröße bei Bedarf steuern möchte.

Benutzerdefinierte Schriftarten

Stylesheet für benutzerdefinierte Schriftarten ist auf AMP-Seiten zulässig.

Example

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

Schriftarten werden aus folgenden Quellen in die Whitelist aufgenommen, die in AMP-Seiten verwendet werden können.

Fonts.com - https://fast.fonts.net
Google Fonts - https://fonts.googleapis.com
Font Awesome - https://maxcdn.bootstrapcdn.com
Typekit - https://use.typekit.net/kitId.css (kitId entsprechend ersetzen)

Note - @ font-face Benutzerdefinierte Schriftarten sind auf Amp-Seiten zulässig.

Example

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

AMP-Laufzeit

Die Amp-Laufzeitumgebung wird festgelegt, sobald die Amp-Core-Datei geladen ist.

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

Die Kerndatei kümmert sich um das Laden der externen Ressourcen, entscheidet über die Priorisierung des Ladezeitpunkts und hilft auch bei der Validierung des Amp-Dokuments, wenn der Amp-URL # development = 1 hinzugefügt wird.

Example

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

Die obige URL listet bei Ausführung im Browser die Fehler auf, wenn die Amp-Validierung fehlgeschlagen ist, oder zeigt die Meldung Amp-Validierung erfolgreich an, wenn keine Fehler vorliegen.

AMP-Komponenten

Amp hat viele Amp-Komponenten hinzugefügt. Sie werden im Wesentlichen verwendet, um das Laden der Ressource auf effiziente Weise zu handhaben. Es enthält auch Komponenten für die Animation, die Anzeige von Daten, die Anzeige von Anzeigen, soziale Widgets usw.

Es gibt zwei Arten von Komponenten in AMP.

Built-in
External

Note- <amp-img> ist eine integrierte Komponente und verfügbar, wenn die Core Amp Js-Datei hinzugefügt wird. Externe Komponenten wie <amp-ad>, <amp-facebook>, <amp-video> und viele mehr benötigen eine entsprechende js-Datei, die sich auf die hinzuzufügende Komponente bezieht.

Gemeinsame Attribute

Attribute wie Breite, Höhe, Layout, Platzhalter und Fallback sind für fast alle verfügbaren AMP-Komponenten verfügbar. Diese Attribute sind für jede AMP-Komponente sehr wichtig, da sie über die Anzeige der Komponente auf der AMP-Seite entscheidet.

Alle oben für AMP aufgeführten Funktionen werden in den späteren Kapiteln dieses Lernprogramms ausführlich erläutert.

Beachten Sie, dass alle Beispiele in diesem Lernprogramm auf Geräte getestet wurden und den Google Mobile Emulator-Modus verwenden. Lassen Sie uns dies jetzt im Detail lernen.

Google Mobile Emulator

Um den mobilen Google-Emulator zu verwenden, öffnen Sie den Chrome-Browser, klicken Sie mit der rechten Maustaste und öffnen Sie die Entwicklerkonsole wie unten gezeigt.

Wir können das Entwicklertool für Chrome wie oben gezeigt sehen. Klicken Sie im Browser auf den Link, den Sie testen möchten. Beachten Sie, dass die Seite im Desktop-Modus angezeigt wird.

Um die obige Seite zum Testen auf Geräte aufzurufen, klicken Sie wie unten gezeigt auf Gerätesymbolleiste umschalten -

Sie können auch die Tastenkombination Strg + Umschalt + M verwenden. Dadurch wird der Desktop-Modus wie unten gezeigt in den Gerätemodus geändert.

Eine Liste der Geräte finden Sie wie folgt:

Sie können das Gerät auswählen, auf dem Sie die Seite testen möchten. Bitte beachten Sie, dass alle Seiten in diesen Tutorials wie oben gezeigt im Google Mobile Emulator getestet wurden. Die gleiche Funktion ist auch für Firefox und aktuelle Internet Explorer-Browser verfügbar.