{"id":82876,"date":"2022-10-11T19:42:55","date_gmt":"2022-10-11T17:42:55","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/"},"modified":"2020-09-16T15:43:29","modified_gmt":"2020-09-16T18:43:29","slug":"carga-adaptable-con-trabajadores-de-servicios","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/carga-adaptable-con-trabajadores-de-servicios\/","title":{"rendered":"Adaptive loading with service workers"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-adaptable-con-trabajadores-de-servicios\/#Caso-de-produccion\" >Caso de producci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-adaptable-con-trabajadores-de-servicios\/#Implementar-la-carga-adaptable-con-Workbox\" >Implementar la carga adaptable con Workbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-adaptable-con-trabajadores-de-servicios\/#Complemento-de-Cloudinary-Workbox\" >Complemento de Cloudinary Workbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-adaptable-con-trabajadores-de-servicios\/#Explore-estrategias-de-carga-mas-adaptables\" >Explore estrategias de carga m\u00e1s adaptables<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Modificar los activos que ofrece a los usuarios en funci\u00f3n de las condiciones de su dispositivo y red.<\/p>\n<p>\n          <time>23 de junio de 2020<\/time><br \/>\n            Actualizado <time>20 de agosto de 2020<\/time>\n        <\/p>\n<div class=\"w-layout-container--narrow w-post-signpost\">\n  <span class=\"w-post-signpost__title\">Aparece en:<\/span><br \/>\n  Confiabilidad de la red\n<\/div>\n<\/header>\n<p>\n  <iframe loading=\"lazy\" title=\"Advanced PWA patterns\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/fhqCwDP69PI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/p>\n<p>Los usuarios acceden a sitios web a trav\u00e9s de una amplia variedad de dispositivos y conexiones de red.  Incluso en las principales ciudades, donde las redes m\u00f3viles son r\u00e1pidas y confiables, uno puede terminar experimentando tiempos de carga m\u00e1s lentos, por ejemplo, al viajar en el metro, en un autom\u00f3vil o simplemente al moverse.  En regiones como los mercados emergentes, este fen\u00f3meno es a\u00fan m\u00e1s com\u00fan, no solo debido a redes poco confiables, sino tambi\u00e9n porque los dispositivos tienden a tener menos memoria y potencia de procesamiento de CPU.<\/p>\n<p>La carga adaptable es un patr\u00f3n de rendimiento web que le permite adaptar su sitio en funci\u00f3n de la red del usuario y las condiciones del dispositivo.<\/p>\n<p>El patr\u00f3n de carga adaptativo es posible gracias a los trabajadores del servicio, el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Network_Information_API\">API de informaci\u00f3n de red<\/a>, el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NavigatorConcurrentHardware\/hardwareConcurrency\">API de concurrencia de hardware<\/a>, y el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/deviceMemory\">API de memoria del dispositivo<\/a>.  En esta gu\u00eda, exploramos c\u00f3mo puede utilizar los trabajadores del servicio y la API de informaci\u00f3n de red para lograr una estrategia de carga adaptable.<\/p>\n<h2 id=\"production-case\"><span class=\"ez-toc-section\" id=\"Caso-de-produccion\"><\/span>Caso de producci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.terra.com.br\/\">Terra<\/a> es una de las empresas de medios m\u00e1s grandes de Brasil.  Tiene una gran base de usuarios, provenientes de una amplia variedad de dispositivos y redes.<\/p>\n<p>Para brindar una experiencia m\u00e1s confiable a todos sus usuarios, Terra combina trabajadores de servicio y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Network_Information_API\">API de informaci\u00f3n de red<\/a> para ofrecer im\u00e1genes de menor calidad a los usuarios en conexiones 2G o 3G.<\/p>\n<figure class=\"w-figure\">\n  <img alt='terra-adaptive-images-3516746' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/terra-adaptive-images-3516746.png' alt=\"Una captura de pantalla de la p\u00e1gina de inicio de Terra conectada a diferentes calidades de imagen seg\u00fan el tipo de conexi\u00f3n.\"><br \/>\n<\/figure>\n<p>La empresa tambi\u00e9n descubri\u00f3 que los scripts y los activos (como los banners) cargados por las redes publicitarias eran especialmente perjudiciales para los usuarios que navegaban en 3G o conexiones m\u00e1s lentas.<\/p>\n<p>Como es el caso de muchos editores, Terra sirve <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/amp.dev\/\">AMPERIO<\/a> versiones de sus p\u00e1ginas a usuarios procedentes de motores de b\u00fasqueda y otras plataformas de intercambio de enlaces.  Las p\u00e1ginas AMP suelen ser livianas y ayudan a mitigar el impacto de los anuncios en el rendimiento al reducir la prioridad de su carga con respecto al contenido principal de la p\u00e1gina.<\/p>\n<p>Teniendo esto en cuenta, Terra decidi\u00f3 comenzar a ofrecer versiones AMP de sus p\u00e1ginas no solo a los usuarios que provienen de los motores de b\u00fasqueda, sino tambi\u00e9n a aquellos que navegan por su sitio en conexiones 3G o m\u00e1s lentas.<\/p>\n<p>Para lograrlo, utilizan el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Network_Information_API\">API de informaci\u00f3n de red<\/a> en el trabajador del servicio para detectar si la solicitud proviene de 3G o m\u00e1s lento.  Si ese es el caso, cambian la URL de la p\u00e1gina para solicitar la versi\u00f3n AMP de la p\u00e1gina.<\/p>\n<figure class=\"w-figure\">\n  <img alt='terra-adaptive-amp-9466834' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/terra-adaptive-amp-9466834.png' alt=\"Una captura de pantalla de la p\u00e1gina del art\u00edculo de Terra conectada a diferentes calidades de imagen seg\u00fan el tipo de conexi\u00f3n.\"><br \/>\n<\/figure>\n<p>Gracias a esta t\u00e9cnica, env\u00edan <strong>70% menos bytes<\/strong> a los usuarios con conexiones m\u00e1s lentas.  los <strong>tiempo usado<\/strong> en las p\u00e1ginas AMP es mayor para los usuarios de 3G y los anuncios en las p\u00e1ginas AMP tienen una mejor <strong>CTR (porcentaje de clics)<\/strong> para ese grupo.<\/p>\n<h2 id=\"implement-adaptive-loading-with-workbox\"><span class=\"ez-toc-section\" id=\"Implementar-la-carga-adaptable-con-Workbox\"><\/span>Implementar la carga adaptable con Workbox <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En esta secci\u00f3n, exploraremos c\u00f3mo se puede utilizar Workbox para implementar estrategias de carga adaptativas.<\/p>\n<p>Workbox proporciona varias estrategias de almacenamiento en cach\u00e9 en tiempo de ejecuci\u00f3n listas para usar.  Se utilizan para indicar c\u00f3mo el trabajador del servicio genera una respuesta despu\u00e9s de recibir una <code>fetch<\/code> evento.<\/p>\n<p>Por ejemplo, en un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/modules\/workbox-strategies#cache_first_cache_falling_back_to_network\">Cach\u00e9 primero<\/a> estrategia el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Request\"><code>Request<\/code><\/a>  se cumplir\u00e1 utilizando la respuesta en cach\u00e9 (si est\u00e1 disponible).  Si no hay una respuesta en cach\u00e9, <code>Request<\/code> se cumplir\u00e1 mediante una solicitud de red y la respuesta se almacenar\u00e1 en cach\u00e9.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>registerRoute<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'workbox-routing'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>CacheFirst<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'workbox-strategies'<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token function\">registerRoute<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">RegExp<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/img\/'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">CacheFirst<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Las estrategias de almacenamiento en cach\u00e9 se pueden personalizar con <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/guides\/using-plugins\">Complementos de Workbox<\/a>.  Estos le permiten agregar comportamientos adicionales manipulando solicitudes y respuestas durante el ciclo de vida de una solicitud.  Workbox tiene varios complementos integrados para casos comunes y API, pero tambi\u00e9n puede definir un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/guides\/using-plugins#custom_plugins\">complemento personalizado<\/a>e introduzca alguna l\u00f3gica personalizada de su elecci\u00f3n.<\/p>\n<p>Para lograr la adaptaci\u00f3n de la carga, defina un complemento personalizado, llamado, por ejemplo, <code>adaptiveLoadingPlugin<\/code>:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const<\/span> adaptiveLoadingPlugin <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function-variable function\">requestWillFetch<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> urlParts <span class=\"token operator\">=<\/span> request<span class=\"token punctuation\">.<\/span>url<span class=\"token punctuation\">.<\/span><span class=\"token function\">split<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">let<\/span> imageQuality<span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">switch<\/span> <span class=\"token punctuation\">(<\/span><br>navigator <span class=\"token operator\">&amp;&amp;<\/span> navigator<span class=\"token punctuation\">.<\/span>connection<br><span class=\"token operator\">?<\/span> navigator<span class=\"token punctuation\">.<\/span>connection<span class=\"token punctuation\">.<\/span>effectiveType<br><span class=\"token operator\">:<\/span> <span class=\"token string\">''<\/span><br><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token string\">'3g'<\/span><span class=\"token operator\">:<\/span><br>imageQuality <span class=\"token operator\">=<\/span> <span class=\"token string\">'q_30'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><p><span class=\"token keyword\">const<\/span> newUrl <span class=\"token operator\">=<\/span> urlParts<br><span class=\"token punctuation\">.<\/span><span class=\"token function\">splice<\/span><span class=\"token punctuation\">(<\/span>urlParts<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">-<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> imageQuality<span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/'<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">.<\/span><span class=\"token function\">replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.jpg'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'.png'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> newRequest <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Request<\/span><span class=\"token punctuation\">(<\/span>newUrl<span class=\"token punctuation\">.<\/span>href<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>headers<span class=\"token operator\">:<\/span> request<span class=\"token punctuation\">.<\/span>headers<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">return<\/span> newRequest<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>El c\u00f3digo anterior hace lo siguiente:<\/p>\n<ul>\n<li>Implementa un <code>requestWillFetch()<\/code> devoluci\u00f3n de llamada: se llama cada vez que se va a realizar una solicitud de red, por lo que puede modificar la <code>Request<\/code>.<\/li>\n<li>Comprueba el tipo de conexi\u00f3n, utilizando el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NavigatorConcurrentHardware\/hardwareConcurrency\">API de informaci\u00f3n de red<\/a>.  Seg\u00fan el estado de la red, crea una nueva parte de URL, que indica la calidad de la imagen que se va a buscar (p. Ej. <code>q_30<\/code> para usuarios de 3G).<\/li>\n<li>Crea una nueva URL basada en la din\u00e1mica <code>newPart<\/code> valor y devuelve el nuevo <code>Request<\/code> a realizar, en funci\u00f3n de esa URL.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n, pase el complemento a un <code>cacheFirst<\/code> estrategia que contiene una expresi\u00f3n regular para hacer coincidir las URL de la imagen (p. ej. <code>\/img\/<\/code>):<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"highlight-line\">workbox<span class=\"token punctuation\">.<\/span>routing<span class=\"token punctuation\">.<\/span><span class=\"token function\">registerRoute<\/span><span class=\"token punctuation\">(<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">RegExp<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/img\/'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">  workbox<span class=\"token punctuation\">.<\/span>strategies<span class=\"token punctuation\">.<\/span><span class=\"token function\">cacheFirst<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    cacheName<span class=\"token operator\">:<\/span> <span class=\"token string\">'images'<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    plugins<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">      adaptiveLoadingPlugin<span class=\"token punctuation\">,<\/span><\/mark><br><span class=\"highlight-line\">      workbox<span class=\"token punctuation\">.<\/span>expiration<span class=\"token punctuation\">.<\/span><span class=\"token function\">Plugin<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">        maxEntries<span class=\"token operator\">:<\/span> <span class=\"token number\">50<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">        purgeOnQuotaError<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Como resultado, cuando se interceptan solicitudes de im\u00e1genes, la estrategia de almacenamiento en cach\u00e9 en tiempo de ejecuci\u00f3n intentar\u00e1 satisfacer la solicitud desde la cach\u00e9.  Si no est\u00e1 disponible, ejecutar\u00e1 la l\u00f3gica en el complemento para decidir qu\u00e9 calidad de imagen recuperar de la red.<\/p>\n<p>Finalmente, la respuesta se conservar\u00e1 en la cach\u00e9 y se enviar\u00e1 de vuelta a la p\u00e1gina.<\/p>\n<h2 id=\"cloudinary-workbox-plugin\"><span class=\"ez-toc-section\" id=\"Complemento-de-Cloudinary-Workbox\"><\/span>Complemento de Cloudinary Workbox <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cloudinary, un servicio de alojamiento de im\u00e1genes y videos, tiene <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/cloudinary-workbox-plugin\">Complemento de Workbox<\/a> que encapsula la funcionalidad explicada en la secci\u00f3n anterior, lo que la hace a\u00fan m\u00e1s f\u00e1cil de implementar.<\/p>\n<figure class=\"w-figure\">\n  <img alt='cloudinary-workbox-5686987' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/cloudinary-workbox-5686987.png' alt=\"Logotipos de Cloudinary y Workbox.\"><br \/>\n<\/figure>\n<p>El complemento est\u00e1 dise\u00f1ado para funcionar con <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/modules\/workbox-webpack-plugin\">Complemento de paquete web de Workbox<\/a>.  Para implementarlo, use el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/reference-docs\/latest\/module-workbox-webpack-plugin.GenerateSW\"><code>GenerateSW()<\/code><\/a>  clase:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">workboxPlugin<span class=\"token punctuation\">.<\/span>GenerateSW<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>swDest<span class=\"token operator\">:<\/span> <span class=\"token string\">'sw.js'<\/span><span class=\"token punctuation\">,<\/span><br>importScripts<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'.\/cloudinaryPlugin.js'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br>runtimeCaching<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br><span class=\"token punctuation\">{<\/span><br>urlPattern<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">RegExp<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'^https:\/\/res.cloudinary.com\/.*\/image\/upload\/'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br>handler<span class=\"token operator\">:<\/span> <span class=\"token string\">'CacheFirst'<\/span><span class=\"token punctuation\">,<\/span><br>options<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>cacheName<span class=\"token operator\">:<\/span> <span class=\"token string\">'cloudinary-images'<\/span><span class=\"token punctuation\">,<\/span><br>plugins<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br><span class=\"token punctuation\">{<\/span><br><span class=\"token function-variable function\">requestWillFetch<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span>request<span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span><br>cloudinaryPlugin<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestWillFetch<\/span><span class=\"token punctuation\">(<\/span>request<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>El c\u00f3digo anterior hace lo siguiente:<\/p>\n<ul>\n<li>Usa el <code>GenerateSW()<\/code> class para configurar webpack para generar un service worker en el destino indicado en <code>swDest<\/code>.<\/li>\n<li>Importa el script del complemento cloudinary.<\/li>\n<li>Define una estrategia de almacenamiento en cach\u00e9 en tiempo de ejecuci\u00f3n Cache First para solicitudes de im\u00e1genes a Cloudinary CDN.<\/li>\n<li>Pasa el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/cloudinary-workbox-plugin\">Complemento de Cloudinary Workbox<\/a> para ajustar la calidad de la imagen seg\u00fan las condiciones de la red.<\/li>\n<\/ul>\n<h2 id=\"explore-more-adaptive-loading-strategies\"><span class=\"ez-toc-section\" id=\"Explore-estrategias-de-carga-mas-adaptables\"><\/span>Explore estrategias de carga m\u00e1s adaptables <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Puede ir m\u00e1s all\u00e1, mapeando las se\u00f1ales del dispositivo, como <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NavigatorConcurrentHardware\/hardwareConcurrency\">concurrencia de hardware<\/a> y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/deviceMemory\">Dispositivo de memoria<\/a> a las categor\u00edas de dispositivos y luego ofrecer diferentes activos seg\u00fan el tipo de dispositivo (de gama baja, media o alta).<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Modificar los activos que ofrece a los usuarios en funci\u00f3n de las condiciones de su dispositivo y red. 23 de junio de 2020 Actualizado 20 de agosto de 2020 Aparece&#8230;<\/p>","protected":false},"author":1,"featured_media":82208,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-82876","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Carga adaptable con trabajadores de servicios - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Modificar los activos que ofrece a los usuarios en funci\u00f3n de las condiciones de su dispositivo y red. 23 de junio de 2020 Actualizado 20 de agosto de\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-adaptable-con-trabajadores-de-servicios\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carga adaptable con trabajadores de servicios\" \/>\n<meta property=\"og:description\" content=\"Modificar los activos que ofrece a los usuarios en funci\u00f3n de las condiciones de su dispositivo y red. 23 de junio de 2020 Actualizado 20 de agosto de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-adaptable-con-trabajadores-de-servicios\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-11T17:42:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Carga adaptable con trabajadores de servicios\",\"datePublished\":\"2022-10-11T17:42:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/\"},\"wordCount\":1089,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/\",\"name\":\"Carga adaptable con trabajadores de servicios - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"datePublished\":\"2022-10-11T17:42:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Modificar los activos que ofrece a los usuarios en funci\u00f3n de las condiciones de su dispositivo y red. 23 de junio de 2020 Actualizado 20 de agosto de\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-adaptable-con-trabajadores-de-servicios\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"width\":1200,\"height\":1200,\"caption\":\"social-6815535-9949209-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Carga adaptable con trabajadores de servicios - R Marketing Digital","description":"Modify the assets offered to users based on the conditions of their device and network. June 23, 2020 Updated August 20,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/carga-adaptable-con-trabajadores-de-servicios\/","og_locale":"en_US","og_type":"article","og_title":"Carga adaptable con trabajadores de servicios","og_description":"Modificar los activos que ofrece a los usuarios en funci\u00f3n de las condiciones de su dispositivo y red. 23 de junio de 2020 Actualizado 20 de agosto de","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/carga-adaptable-con-trabajadores-de-servicios\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-11T17:42:55+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Carga adaptable con trabajadores de servicios","datePublished":"2022-10-11T17:42:55+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/"},"wordCount":1089,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/","url":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/","name":"Carga adaptable con trabajadores de servicios - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","datePublished":"2022-10-11T17:42:55+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Modify the assets offered to users based on the conditions of their device and network. June 23, 2020 Updated August 20,","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/carga-adaptable-con-trabajadores-de-servicios\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","width":1200,"height":1200,"caption":"social-6815535-9949209-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/82876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=82876"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/82876\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/82208"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=82876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=82876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=82876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}