{"id":12053,"date":"2019-03-13T16:15:05","date_gmt":"2019-03-13T15:15:05","guid":{"rendered":"https:\/\/www.veiss.com\/blog\/?p=12053"},"modified":"2019-09-05T14:31:05","modified_gmt":"2019-09-05T12:31:05","slug":"prefetching-automatico-con-quicklink-js","status":"publish","type":"post","link":"https:\/\/www.veiss.com\/blog\/prefetching-automatico-con-quicklink-js\/","title":{"rendered":"Prefetching autom\u00e1tico con quicklink js"},"content":{"rendered":"

Prefetching automatizado con https:\/\/github.com\/GoogleChromeLabs\/quicklink.\u00a0<\/a>Se trata de una librer\u00eda de https:\/\/github.com\/GoogleChromeLabs\/,<\/a>\u00a0que lo que hace es calcular el viewport y hacer prefetching de los links visibles. Para ello necesita un polyfill IntersectionObserver <\/a> para Explorer 11 y Safari.<\/p>\n

Ejemplo pr\u00e1ctico con Gulp<\/h2>\n

Instala:<\/p>\n

npm install --save quicklink<\/pre>\n
En gulpfile.js,\u00a0concatena la versi\u00f3n \u201cumd\u201d,<\/strong> porque esto est\u00e1 escrito en ES6.<\/p>\n
gulp.task(\"scripts\", function() {\n    return gulp\n        .src([\n            \"lodemas.js\"\n            \"node_modules\/quicklink\/dist\/quicklink.umd.js\",\n            \".\/js\/main.js\"\n        ])\n        .pipe(plumber())\n        .pipe(concat(\"main.js\"))\n        .pipe(gulp.dest(jsDest))\n        .pipe(rename(\"main.min.js\"))\n        .pipe(uglify())\n        .pipe(sourcemaps.write(\".\"))\n        .pipe(gulp.dest(jsDest));\n});<\/pre>\n
Luego en tu main.js, con par\u00e1metros, si corresponde:<\/p>\n
window.addEventListener('load', function() {\n    quicklink();\n});<\/pre>\n
Aqu\u00ed ten cuidado, si una URL cierra la sesi\u00f3n y usando esto de forma autom\u00e1tica se precarga dicha URL, la sesi\u00f3n se cierra, el carrito se vac\u00eda o lo que sea, etc. En tiendas y CMS, mejor no usar la funci\u00f3n autom\u00e1tica. Utiliza algo como:<\/p>\n
En los links que quieras hacer precarga:<\/p>\n
<li class=\"pref\"><a href=\"http:\/\/milink\">Link con prefetch<\/a><\/li><\/pre>\n
Y luego con JS:<\/p>\n
var pre_urls = [];\n$(\".pref\").each(function(){\n        var url =  $(this).find('a').attr('href');\n        pre_urls.push(url);\n});\nquicklink({\n   urls: pre_urls\n});<\/pre>\n
Finalmente, coloca tu js y el pollyfill:<\/p>\n
<script type='text\/javascript' src='https:\/\/polyfill.io\/v2\/polyfill.min.js?features=IntersectionObserver&ver=1'><\/script>\n<script type='text\/javascript' src='https:\/\/nuestroJs.min.js?ver=1'><\/script><\/pre>\n
Con esto consigues una experiencia de navegaci\u00f3n casi instant\u00e1nea, ya que el HTML de las p\u00e1ginas que precargas est\u00e1 en cach\u00e9. Aqu\u00ed puedes ver las peticiones de la home, ver\u00e1s que ya tienes en cach\u00e9 los primeros posts y los enlaces del men\u00fa principal. Por lo que si el usuario navega a una de esas p\u00e1ginas, lo \u00fanico que se descargar\u00e1 del servidor ser\u00e1n la im\u00e1genes.<\/p>\n
\"Ejemplo\"<\/p>\n
Nosotros ya lo hemos implementado en algunos proyectos. Por ejemplo en:<\/p>\n
https:\/\/www.leihoa.eus<\/a><\/p>\n
https:\/\/calendario.fundacionvital.eus<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Prefetching automatizado con https:\/\/github.com\/GoogleChromeLabs\/quicklink.\u00a0Se trata de una librer\u00eda de https:\/\/github.com\/GoogleChromeLabs\/,\u00a0que lo que hace es calcular el viewport y hacer prefetching de los links visibles. Para ello necesita un polyfill IntersectionObserver para Explorer 11 y Safari. Ejemplo pr\u00e1ctico con Gulp Instala: npm install –save quicklink En gulpfile.js,\u00a0concatena la versi\u00f3n \u201cumd\u201d, porque esto est\u00e1 escrito en ES6. […]<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1239],"tags":[1231,1230,1238],"_links":{"self":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12053"}],"collection":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/comments?post=12053"}],"version-history":[{"count":10,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12053\/revisions"}],"predecessor-version":[{"id":12306,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12053\/revisions\/12306"}],"wp:attachment":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/media?parent=12053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/categories?post=12053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/tags?post=12053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}