Fetch links based on Intersection Observer
Kikobeats opened this issue · 0 comments
Mainly based on quicklink
approach
https://github.com/GoogleChromeLabs/quicklink
-
Detects links into the current viewport (using Intersection Observer):
https://github.com/GoogleChromeLabs/quicklink/blob/5e7714b94db1ca702bbb63431b1f9c8f33a04050/src/index.mjs#L22 -
Waits until the browser is idle (using requestIdleCallback)
https://github.com/GoogleChromeLabs/quicklink/blob/5e7714b94db1ca702bbb63431b1f9c8f33a04050/src/index.mjs#L85 -
Checks if the user isn't on a slow connection (using navigator.connection.effectiveType) or has data-saver enabled (using navigator.connection.saveData)
https://github.com/GoogleChromeLabs/quicklink/blob/5e7714b94db1ca702bbb63431b1f9c8f33a04050/src/prefetch.mjs#L106 -
Prefetches URLs to the links (using or XHR). Provides some control over the request priority (can switch to fetch() if supported).
https://github.com/GoogleChromeLabs/quicklink/blob/5e7714b94db1ca702bbb63431b1f9c8f33a04050/src/index.mjs#L88
Vue.js version: https://github.com/egoist/vue-router-prefetch/blob/master/src/index.js#L7
Related: