Amp-install-serviceworker ¿Para qué sirve?
Amp-install-serviceworker
El componente amp-install-serviceworker permite la instalación de service worker a través del mismo origen o a través del caché de Google AMP.
Los service worker pueden ejecutarse en segundo plano incluso cuando el navegador está cerrado, almacena el contenido necesario antes de procesar el tiempo, envia notificaciones a los usuarios y mucho más. Este ejemplo instala un service worker que almacena en caché esta página en segundo plano. Puede probar esta página mientras está desconectado una vez que el trabajador de servicio haya sido instalado.
Los trabajadores de servicio están actualmente disponibles en Chrome, Firefox y Opera.
Preparar
Importe el componente amp-install-serviceworker.
Inserte el siguiente script justo después de la apertura <head>
Instalación del service worker
Las llamadas a amp-install-serviceworker pueden incluir los atributos src y data-iframe-src. Src es la ubicación del service worker que se va a instalar y se utiliza cuando se accede al documento con el mismo origen que el archivo de servicio. Cuando se accede al documento a través del caché de Google AMP, se utiliza el documento HTML anotado en el atributo data-iframe-src para instalar al service worker. Se recomienda utilizar ambos atributos.
En este ejemplo, cuando los usuarios acceden a esta página AMP por segunda vez, el service worker está instalado y almacena en caché todos los archivos de imagen y archivos de vídeo bajo la ruta raíz de este dominio.
Confirme que el service worker esté instalado y funcione como se esperaba siguiendo los pasos siguientes:
- Acceda a amp-install-serviceworker dos veces.
- Abra Chrome Dev Tools y desplácese a la pestaña "Recursos" (o "Aplicación" en las versiones más recientes de Chrome). En la sección " /sw.js servicio" puede ver que /sw.js está instalado.
- A continuación, abra la sección "Almacenamiento en caché". Muestra todas las imágenes y videos almacenados en caché.
- Desactive la conexión de red y vuelva a cargar esta página. ¡Aún funciona! En la pestaña "Red" de Dev Tools, verá qué recursos son almacenados en caché por el trabajador del servicio.
Los service worker pueden ejecutarse en segundo plano incluso cuando el navegador está cerrado, almacena el contenido necesario antes de procesar el tiempo, envia notificaciones a los usuarios y mucho más. Este ejemplo instala un service worker que almacena en caché esta página en segundo plano. Puede probar esta página mientras está desconectado una vez que el trabajador de servicio haya sido instalado.
Los trabajadores de servicio están actualmente disponibles en Chrome, Firefox y Opera.
Preparar
Importe el componente amp-install-serviceworker.
Inserte el siguiente script justo después de la apertura <head>
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
Instalación del service worker
Las llamadas a amp-install-serviceworker pueden incluir los atributos src y data-iframe-src. Src es la ubicación del service worker que se va a instalar y se utiliza cuando se accede al documento con el mismo origen que el archivo de servicio. Cuando se accede al documento a través del caché de Google AMP, se utiliza el documento HTML anotado en el atributo data-iframe-src para instalar al service worker. Se recomienda utilizar ambos atributos.
<amp-install-serviceworker src="/sw.js" data-iframe-src="https://ampbyexample.com/sw.html" layout="nodisplay"> </amp-install-serviceworker>
The service worker in this sample uses sw-toolbox, a helper library for implementing service workers.
En este ejemplo, cuando los usuarios acceden a esta página AMP por segunda vez, el service worker está instalado y almacena en caché todos los archivos de imagen y archivos de vídeo bajo la ruta raíz de este dominio.
Confirme que el service worker esté instalado y funcione como se esperaba siguiendo los pasos siguientes:
- Acceda a amp-install-serviceworker dos veces.
- Abra Chrome Dev Tools y desplácese a la pestaña "Recursos" (o "Aplicación" en las versiones más recientes de Chrome). En la sección " /sw.js servicio" puede ver que /sw.js está instalado.
- A continuación, abra la sección "Almacenamiento en caché". Muestra todas las imágenes y videos almacenados en caché.
- Desactive la conexión de red y vuelva a cargar esta página. ¡Aún funciona! En la pestaña "Red" de Dev Tools, verá qué recursos son almacenados en caché por el trabajador del servicio.
Comentarios
Disqus comments:
Facebook comments: