Así es como funciona PWAMP (PWA + AMP).

Lo que estás viendo es una página en AMP con funcionalidad de PWA.

¿Cómo puedes crear la tuya? Echa un vistazo a los recursos sobre PWA (progressive Web apps), AMP (accelerated mobile pages) y PWAMP (la combinación de PWA con AMP):

Conceptos

Puedes combinar PWA con AMP de diferentes formas: Habilitando funcionalidades de PWA en tus páginas AMP, así como insertando y usando AMP como fuente de datos dentro de una PWA o pre-cargando tu PWA desde tus páginas AMP. Aquí tienes más información sobre cada tipo y cómo combinarlos:

• What Are Progressive Web AMPs?
• 2018 State of Progressive Web Apps
• Combine AMP with Progressive Web Apps
• Why Do You Need to Use AMP and PWA to Keep Your Website Progressive
• Progressive Web AMPs: the Story so Far (AMP Conf 2018 video)

Guías

• Migrate your site to a Progressive Web App
• The easy way to turn a website into a Progressive Web App
• How to turn your website into a PWA
• Enable Progressive Web App features for your AMP pages
• Step by Step to Build a Progressive Web AMP
• WordPress: Building Progressive Themes with WP Rig
• Cómo convertir tu Wordpress en una PWA
• Tracking PWA events with Google Analytics
• SEO para Progressive Web APPs (PWA) y JavaScript
• A Progressive Roadmap for your Progressive Web App

Herramientas

• The Progressive WordPress Theme Rig - Crea temas en PWA con WP Rig
• Habilita funcionalidades PWA en Webs que usan Wordpress con el plugin SuperPWA
• Progressive Web App Checklist
• La herramienta de Lighthouse para validar PWA - úsala dentro de Chrome DevTools o como una extensión de Chrome
• Prueba las funcionalidades de PWA de cualquier Web usando Chrome DevTools: Prueba la funcionalidad de añadir a la homescreen, Simula el comportamiento offline, Simula el envío de notificaciones push, y más aquí.
• Validador de AMP

Ejemplos y Demostraciones

PWAs:

• Alibaba
• Hobbycraft
• Lancome USA
• Trivago India
• Payless Shoes
• The Financial Times
• Transferwise Rate Alerts
• Twitter Lite
• Uber
• Starbucks
• Naturenauts por el Museo de Historia Natural
• Cloudfour
• Erudite - Agencia de Marketing Online
• Prueba de Ebay en páginas de productos
• Más en el PWA Directoryand PWA Stats

PWAMPs:

• La página que estás viendo :)
• AMP como PWA: AMP by Example, la Web de BMW
• AMP en PWA: The Guardian's shadow reader y una demo en React - The Scenic
• AMP no canónico y PWA en Web canónica: Carved y Why my Web traffic dropped?

¿Tienes o conoces de recursos sobre PWA o PWAMP que te gustaría que incluyese aquí? Envíame un tweet.