AMPbyExample activa el mensaje "Añadir a la pantalla de inicio".

Muchos sitios web no necesitan más de lo que ya les ofrece AMP. AMPbyExample, por ejemplo, es al mismo tiempo una página AMP y una aplicación web progresiva (PWA):

  1. Dispone de un archivo de manifiesto de aplicación web, que genera el mensaje "Añadir a la pantalla de inicio".
  2. Cuenta con un componente service worker y, por tanto, permite que se acceda a ella sin conexión, entre otras cosas.

Cuando un usuario visita AMPbyExample desde una plataforma compatible con AMP y después sigue desplazándose por el sitio web, sale de la caché de AMP y pasa al origen. El sitio web sigue usando la biblioteca de AMP, pero al encontrarse en el origen, puede usar un componente service worker, pedir instalaciones, etc.

Añadir un archivo de manifiesto de aplicación web

Si añades un archivo de manifiesto de aplicación web a tus páginas AMP, te aseguras de que los usuarios puedan instalar tu sitio web en la pantalla de inicio de sus dispositivos. Los archivos de manifiesto de aplicación web en AMP no tienen misterio.

En primer lugar, crea el archivo de manifiesto:

{
  "short_name": "ABE",
  "name": "AMPByExample",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html?launcher=true"
}

A continuación, enlázalo desde la sección <head> de tu página AMP:

<link rel="manifest" href="/manifest.json">

Instalar un componente service worker para habilitar el acceso sin conexión

Un service worker es un proxy de cliente que se sitúa entre tu página y el servidor, y que puede usarse para crear fantásticas experiencias sin conexión, generar esqueletos de aplicación de carga rápida y enviar notificaciones push.

Los componentes service worker tienen que estar registrados en una página concreta; de lo contrario, el navegador no los encontrará ni ejecutará. Para registrarlos, debes usar un pequeño fragmento de JavaScript o, en páginas AMP, un componente <amp-install-serviceworker>.

En este caso, introduce primero la secuencia de comandos del componente <amp-install-serviceworker> en la sección <head> de tu página:

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

A continuación, añade el fragmento siguiente en algún lugar de la sección <body> (modifícalo para que apunte a tu service worker actual):

<amp-install-serviceworker
      src="https://www.your-domain.com/serviceworker.js"
      layout="nodisplay">
</amp-install-serviceworker>

Si el usuario navega hasta las páginas AMP alojadas en tu sitio web (y no hasta las almacenadas en la caché de AMP, que son las que generalmente se publican con el primer clic), el componente service worker toma el control y puede empezar a hacer un montón de cosas interesantes.

Ampliar páginas AMP con un service worker

Con la técnica anterior, puedes habilitar el acceso sin conexión a tu sitio web AMP, así como ampliar tus páginas en cuanto se publiquen desde el propio sitio web. Puedes modificar la respuesta con el evento fetch del service worker y devolver la que quieras:

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('mysite').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        var fetchPromise = fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })

        // Modifica aquí la respuesta antes de enviarla.
        ...

        return response || fetchPromise;
      })
    })
  );
});

Esta técnica te permite modificar tu página AMP con todo tipo de funcionalidades adicionales que, de otra manera, no superarían la validación de AMP como, por ejemplo:

  • Las funciones dinámicas que necesitan código JavaScript personalizado.
  • Los componentes que están personalizados o que solo son relevantes para tu sitio web.