AMP: Building Accelerated Mobile Pages电子书

Title Page

Copyright

AMP: Building Accelerated Mobile Pages

Credits

About the Author

Acknowledgements

About the Reviewer

www.Packtpub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

Ride the Lightning with AMP

What do AMP pages look like?

Why now?

Why performance is important on mobile

Mobile technology advances won't make websites fast

Business cases behind AMP

Web performance - why are web pages slow?

What exactly is AMP?

AMP-HTML

AMP-JS

AMP Cache

AMP URLs

Preparing your web server environment

AMP Hello World - your first AMP page

Optional but recommended boilerplate

Structured metadata and the AMP carousel

Validating your AMP pages

What's with the <style amp-boilerplate> code?

How AMP solves mobile web performance

Optimizations that make AMP fast

AMP pre-rendering

Controversy and criticisms of AMP

Benefits of AMP

AMP adoption

So, do you need AMP?

Summary

Building Your First AMP Page

Going from HTML to AMP-HTML

Including the AMP-JS library

Validating your AMP pages

Developer tools console

Online validator

Command line validation

Fixing AMP validation errors

AMP boilerplate validation errors

Using JavaScript in AMP pages

Using CSS in AMP pages

Your first AMP component - <amp-img>

Layout in AMP

HTML tags that aren't allowed in AMP

Forbidden HTML tags

HTML tags with AMP-HTML replacements

HTML tags that are allowed, but with restrictions

AMP components

Measuring AMP page performance

Measuring mobile web performance

What is "good" web performance?

Waterfall charts

WebPagetest.org

PageSpeed Insights

Remote debugging with developer tools

Summary

Making an Impression - Layout and Page Design in AMP

Laying out elements in AMP pages

The AMP-HTML layout system

The layout attribute

Using responsive layout

Canonical AMP pages

Art-direction and responsive images

Using srcset to optimize image loading

Using the heights and sizes attributes

Adding a related articles section with thumbnail images

Using CSS3 flexbox for layout in AMP

Scaling up for larger screens

Using flex and media queries for horizontal layout

Using responsive images and srcset to deliver high quality images on all screen sizes

Using element media queries to display art-directed images

Using flex-item layout

Horizontal flex items

Vertical flex items

Full width flex item container

Flex items with specific proportions

Mixing flex and non-flex items

Using placeholders and fallbacks to improve user experience

Placeholders

Fallbacks

Using custom CSS in AMP pages

Adding custom fonts to AMP pages

Using custom fonts to improve page design

Text layout with CSS and HTML

Text layout with <amp-fit-text>

Adding SVG graphics to AMP pages

Summary

Engaging Users with Interactive AMP Components

Building collapsible content with <amp-accordion>

Building an expandable top stories category list

Styling <amp-accordion>

Improving the accordion with an expanded state indicator

It's accordions all the way down!

Building navigation menus

Horizontal navigation menus

Scrollable horizontal navigation

Building a navigation menu with <amp-carousel>

Adding side navigation with <amp-sidebar>

Triggering the sidebar

Styling the sidebar with CSS

Adding an SVG hamburger menu button

A note on accessibility

Hierarchical navigation menus with <amp-sidebar> and <amp-accordion>

Scaling up

Implementing tabbed content with <amp-selector>

Displaying user notifications

Using server endpoints to store the dismissal state of user notifications

The Action and Event model in AMP

Attaching event handlers with the on attribute

Events and actions

Handling multiple events on a single element

Triggering multiple actions for a single event

Using actions on any HTML element

Summary

Building Rich Media Pages in AMP

Showcasing products with <amp-carousel>

Building a carousel of products

Hero promotion with <amp-carousel> slides

Autoplaying <amp-carousel> slides

Adding call-to-action text to carousel images

Building a product image gallery

Product image gallery with thumbnail previews

Jumping to a specific image with goToSlide()

Highlighting the selected thumbnail

Reducing code with <amp-selector>

Adding video to AMP pages

Hosting your own videos with <amp-video>

Embedding hosted videos

Adding audio to AMP pages

Embedding self-hosted audio with <amp-audio>

Embedding third-party hosted audio

Showcasing your products with <amp-lightbox>

Lightboxing product images

Closing the lightbox

Using social media in AMP pages

Facebook

Twitter

Instagram

Promoting products with social media

Setting default share text

Improving product SEO with metadata

Using tabs in product pages

Summary

Making Contact - Forms in AMP

Using forms in AMP

Submitting forms in AMP

A simple newsletter sign-up form

Submitting XHR AJAX forms in AMP

Handling XHR responses with <amp-mustache>

Creating the server in PHP

Hiding the form on success

Custom form validation

UX improvement - visual feedback on submission

Building a product search form

Styling the search form

The server response - a JSON list of products

Iterating over JSON data with <amp-mustache>

Showing the search status

Animating the search icon

A caveat with the submit-success approach

Implementing a shopping cart in AMP

Variable substitution in AMP

Using CLIENT_ID to identify a shopping cart

Building the shopping cart server

Handling the shopping cart server response

Dismissing the cart summary

Redirecting after form submission

Summary

Dynamic Content and Data-Driven Interaction

Dynamic content - fetching JSON data on page load

The <amp-list> component

Fetching a list of related products with <amp-list>

Using list tags <ul> and <li> with <amp-list>

A note on <amp-list> container size

Fetching the shopping cart on page load

Showing the cart contents with <amp-mustache>

Sharing a mustache template between <amp-list> and <amp-form>

Removing items from the cart

Retrieving URL parameters with AMP's variable substitution

Live content updates with <amp-live-list>

Using <amp-live-list>

A simple <amp-live-list> example

A live Twitter search listing

Adding a search form to use with <amp-live-list>

Why is it more complicated with the AMP Cache?

Implementing a live leaderboard

Summary

Programming in AMP - amp-bind

Introducing <amp-bind>

State, expressions, and data-binding

Stateful data in <amp-bind> with <amp-state>

Initializing state with <amp-state>

Updating state with AMP.setState()

Debugging state with AMP.printState()

Expressions in <amp-bind>

Text manipulation expression

Arithmetic expression

Branching if...else expression

Data-binding: linking expressions to element state

Using <amp-bind>

Changing text with <amp-bind>

Setting default values for AMP state properties

Changing CSS class with <amp-bind>

Removing cart items with <amp-bind>

User-triggered updates with <amp-list> and <amp-bind>

Ensuring that <amp-list> has a unique URL

Improving search with <amp-list> and <amp-bind>

Sorting, filtering, and updating search results

Using amp-list to show search results

Search results JSON response

Filtering by color, and sorting by price

Adding search autosuggest

Improving the product image carousel with <amp-bind>

Configuring product options with <amp-bind>

Product configuration: basic version

Choosing options with <amp-selector> and <amp-bind>

Binding selection options to the shopping cart

Product configuration: advanced version

Initializing product data with <amp-state>

Creating the product carousels

Adding a size option

Using <amp-selector> for image preview thumbnails

Keeping the thumbnails preview option in sync

Keeping track of chosen options and price in the cart

Summary

When AMP Is Not Enough - Enter the iframe

The <amp-iframe> component

What about the risk to performance?

Restrictions on <amp-iframe>

Configuring the iframe

iframe resizing

Google Maps in AMP

Getting a Google Maps Embed API key

Using the Google Maps Embed API

Fullscreen maps

Other features of the Google Maps Embed API

Centering a map on a place name

Centering a map on a lat/lng location

Showing directions and routes

Searching for a location

Map search with <amp-form> and server backend

Map search without server backend

Geolocating the users device

Using the Google Maps JavaScript API

Building the map

Using the HTML5 Geolocation API

Serving iframe content from a different domain

Adding the iframe map content to the AMP page

Showing a route from the current location

Disqus comments in AMP

Configuring Disqus for your site

Resizing the iframe

Adding the Disqus <amp-iframe>

Building a checkout process with the Payment Request API

The HTML5 Payment Request API

Using the Payment Request API with <amp-iframe>

Preparing the payment request

Summary

Ads and Analytics in AMP

Analytics support in AMP

Pixel tracking with <amp-pixel>

Full analytics tracking with <amp-analytics>

Configuring <amp-analytics>

Requests

Variables

Triggers

Loading configuration remotely

Transport configuration

Using amp-analytics with built-in vendors

Using Google Analytics with <amp-analytics>

Click and tap tracking

Variable substitution in <amp-analytics>

Tracking outbound link clicks

Scroll tracking

Tracking time on a page with timer triggers

Tracking social interaction

Analytics for e-commerce

Tracking the addition of items to the cart

Tracking the removal of items from the cart

Session stitching AMP Cache and original domain

Session stitching with Google Tag Manager

Ads in AMP

The <amp-ad> component

Embedding an Adsense ad

Ad placement

Ad placeholder

Ad fallback

Sticky ads

Getting creative with ads

Carousel ads

Flying carpet ads

Summary

AMP Deployment and Your Web Presence

Canonical AMP pages

Progressive Web Apps and AMP

PWA minimum requirements

What is a service worker?

What is a web app manifest?

Adding a PWA to the home screen

AMP and PWAs - three approaches

AMP as PWA

Installing a service worker with AMP

Writing a service worker to cache resources

Injecting JavaScript with a service worker

AMP to PWA

Caching PWA assets with a service worker

Installing a service worker from the AMP Cache

The service worker iframe installer

The PWA page

AMP in PWA

Loading AMP with Shadow AMP

Navigating within the PWA

Navigation and the HTML5 History API

Serving AMP pages to all mobile visitors

Using device detection to serve AMP

AMP and WordPress

Summary

AMP - Where It&#x27;s At and Where It&#x27;s Going

From zero to AMP

Keeping up with AMP - the AMP roadmap

Contributing

AMP - from web pages to web apps

User-friendliness

The AMP Cache

Flexibility

Criticism of AMP

AMP Cache URL

The DNS solution

AMP lightning badge of trust in search results

De facto SEO benefits of the AMP carousel

Summary

AMP Components

Ads and analytics

Dynamic content

Layout

Media

Presentation

Third-party media

Actions and Events

Events

Actions

amp-bind Whitelisted Functions

JavaScript whitelisted functions

amp-bind Permitted Attribute Bindings