Fetch links based on Intersection Observer

[Kiko Beats]

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:

• https://github.com/bluebill1049/react-simple-img
• https://developers.google.com/web/updates/2019/02/intersectionobserver-v2