From 9fac9255dd25362b44116d40786119ec4231cd79 Mon Sep 17 00:00:00 2001 From: Smit Barmase Date: Tue, 14 Nov 2023 01:44:10 +0530 Subject: [PATCH 1/6] fallback to tap strategy --- packages/astro/src/prefetch/index.ts | 38 ++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/packages/astro/src/prefetch/index.ts b/packages/astro/src/prefetch/index.ts index f47cff0606f9..9ea8088387cb 100644 --- a/packages/astro/src/prefetch/index.ts +++ b/packages/astro/src/prefetch/index.ts @@ -56,7 +56,7 @@ function initTapStrategy() { event, (e) => { if (elMatchesStrategy(e.target, 'tap')) { - prefetch(e.target.href, { with: 'fetch' }); + prefetch(e.target.href, { with: 'fetch', ignoreSlowConnection: true }); } }, { passive: true } @@ -104,7 +104,7 @@ function initHoverStrategy() { clearTimeout(timeout); } timeout = setTimeout(() => { - prefetch(href, { with: 'fetch' }); + prefetch(href, { with: 'fetch', ignoreSlowConnection: true }); }, 80) as unknown as number; } @@ -155,7 +155,7 @@ function createViewportIntersectionObserver() { setTimeout(() => { observer.unobserve(anchor); timeouts.delete(anchor); - prefetch(anchor.href, { with: 'link' }); + prefetch(anchor.href, { with: 'link', ignoreSlowConnection: true }); }, 300) as unknown as number ); } else { @@ -176,6 +176,10 @@ export interface PrefetchOptions { * - `'fetch'`: use `fetch()`, has higher loading priority. */ with?: 'link' | 'fetch'; + /** + * Should prefetch even on data saver mode or slow connection. (default `false`) + */ + ignoreSlowConnection?: boolean; } /** @@ -190,7 +194,8 @@ export interface PrefetchOptions { * @param opts Additional options for prefetching. */ export function prefetch(url: string, opts?: PrefetchOptions) { - if (!canPrefetchUrl(url)) return; + const ignoreSlowConnection = opts?.ignoreSlowConnection ?? false; + if (!canPrefetchUrl(url, ignoreSlowConnection)) return; prefetchedUrls.add(url); const priority = opts?.with ?? 'link'; @@ -211,15 +216,11 @@ export function prefetch(url: string, opts?: PrefetchOptions) { } } -function canPrefetchUrl(url: string) { +function canPrefetchUrl(url: string, ignoreSlowConnection: boolean) { // Skip prefetch if offline if (!navigator.onLine) return false; - if ('connection' in navigator) { - // Untyped Chrome-only feature: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection - const conn = navigator.connection as any; - // Skip prefetch if using data saver mode or slow connection - if (conn.saveData || /(2|3)g/.test(conn.effectiveType)) return false; - } + // Skip prefetch if using data saver mode or slow connection + if (!ignoreSlowConnection && isSlowConnection()) return false; // Else check if URL is within the same origin, not the current page, and not already prefetched try { const urlObj = new URL(url, location.href); @@ -241,6 +242,12 @@ function elMatchesStrategy(el: EventTarget | null, strategy: string): el is HTML if (attrValue === 'false') { return false; } + + // Fallback to tap strategy if using data saver mode or slow connection + if ((attrValue != null || prefetchAll) && isSlowConnection()) { + return strategy === "tap"; + } + // If anchor has no dataset but we want to prefetch all, or has dataset but no value, // check against fallback default strategy if ((attrValue == null && prefetchAll) || attrValue === '') { @@ -254,6 +261,15 @@ function elMatchesStrategy(el: EventTarget | null, strategy: string): el is HTML return false; } +function isSlowConnection() { + if ('connection' in navigator) { + // Untyped Chrome-only feature: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection + const conn = navigator.connection as any; + return conn.saveData || /(2|3)g/.test(conn.effectiveType); + } + return false; +} + /** * Listen to page loads and handle Astro's View Transition specific events */ From 8da41f5a4bd55d36797b9bf3a2a92d2c77b7e4e0 Mon Sep 17 00:00:00 2001 From: Smit Barmase Date: Tue, 14 Nov 2023 02:20:29 +0530 Subject: [PATCH 2/6] single quotes --- packages/astro/src/prefetch/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/prefetch/index.ts b/packages/astro/src/prefetch/index.ts index 9ea8088387cb..124b53c048a0 100644 --- a/packages/astro/src/prefetch/index.ts +++ b/packages/astro/src/prefetch/index.ts @@ -245,7 +245,7 @@ function elMatchesStrategy(el: EventTarget | null, strategy: string): el is HTML // Fallback to tap strategy if using data saver mode or slow connection if ((attrValue != null || prefetchAll) && isSlowConnection()) { - return strategy === "tap"; + return strategy === 'tap'; } // If anchor has no dataset but we want to prefetch all, or has dataset but no value, From ce294808c1e1fa0ea20aa237c18efbf9246929dd Mon Sep 17 00:00:00 2001 From: Smit Barmase Date: Tue, 14 Nov 2023 02:47:24 +0530 Subject: [PATCH 3/6] add changeset --- .changeset/neat-mangos-judge.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/neat-mangos-judge.md diff --git a/.changeset/neat-mangos-judge.md b/.changeset/neat-mangos-judge.md new file mode 100644 index 000000000000..f0b20782853b --- /dev/null +++ b/.changeset/neat-mangos-judge.md @@ -0,0 +1,6 @@ +--- +'astro': minor +--- + +#9092 - Fallback to `tap` prefetch strategy on slow connection, instead of bailing. +#9092 - Add `ignoreSlowConnection` option to prefetch API, which lets manually prefetch even on data saver mode or slow connection. From 64f962dad517a6465d1176c5d546eeb66f9bf6aa Mon Sep 17 00:00:00 2001 From: Smit Barmase Date: Wed, 15 Nov 2023 00:48:04 +0530 Subject: [PATCH 4/6] fix --- packages/astro/src/prefetch/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/astro/src/prefetch/index.ts b/packages/astro/src/prefetch/index.ts index 124b53c048a0..573efe5734ef 100644 --- a/packages/astro/src/prefetch/index.ts +++ b/packages/astro/src/prefetch/index.ts @@ -104,7 +104,7 @@ function initHoverStrategy() { clearTimeout(timeout); } timeout = setTimeout(() => { - prefetch(href, { with: 'fetch', ignoreSlowConnection: true }); + prefetch(href, { with: 'fetch' }); }, 80) as unknown as number; } @@ -155,7 +155,7 @@ function createViewportIntersectionObserver() { setTimeout(() => { observer.unobserve(anchor); timeouts.delete(anchor); - prefetch(anchor.href, { with: 'link', ignoreSlowConnection: true }); + prefetch(anchor.href, { with: 'link' }); }, 300) as unknown as number ); } else { @@ -244,8 +244,8 @@ function elMatchesStrategy(el: EventTarget | null, strategy: string): el is HTML } // Fallback to tap strategy if using data saver mode or slow connection - if ((attrValue != null || prefetchAll) && isSlowConnection()) { - return strategy === 'tap'; + if (strategy === 'tap' && (attrValue != null || prefetchAll) && isSlowConnection()) { + return true; } // If anchor has no dataset but we want to prefetch all, or has dataset but no value, From ee88c73bec5d70c10df874605647b92cfe3beebb Mon Sep 17 00:00:00 2001 From: Smit Barmase Date: Wed, 15 Nov 2023 00:52:57 +0530 Subject: [PATCH 5/6] update changeset --- .changeset/neat-mangos-judge.md | 3 +-- .changeset/six-owls-trade.md | 5 +++++ 2 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 .changeset/six-owls-trade.md diff --git a/.changeset/neat-mangos-judge.md b/.changeset/neat-mangos-judge.md index f0b20782853b..018b038f1237 100644 --- a/.changeset/neat-mangos-judge.md +++ b/.changeset/neat-mangos-judge.md @@ -2,5 +2,4 @@ 'astro': minor --- -#9092 - Fallback to `tap` prefetch strategy on slow connection, instead of bailing. -#9092 - Add `ignoreSlowConnection` option to prefetch API, which lets manually prefetch even on data saver mode or slow connection. +Fallback to the `tap` prefetch strategy on slow connection, instead of bailing. diff --git a/.changeset/six-owls-trade.md b/.changeset/six-owls-trade.md new file mode 100644 index 000000000000..cd16cecec2e9 --- /dev/null +++ b/.changeset/six-owls-trade.md @@ -0,0 +1,5 @@ +--- +'astro': minor +--- + +Adds a `ignoreSlowConnection` option to the `prefetch()` API to prefetch even on data saver mode or slow connection. From d0938b4f769dc75f82f14ea7f598460f5b923553 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Wed, 22 Nov 2023 11:39:07 +0800 Subject: [PATCH 6/6] Update .changeset/neat-mangos-judge.md Co-authored-by: Sarah Rainsberger --- .changeset/neat-mangos-judge.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/neat-mangos-judge.md b/.changeset/neat-mangos-judge.md index 018b038f1237..f42417d4a0cf 100644 --- a/.changeset/neat-mangos-judge.md +++ b/.changeset/neat-mangos-judge.md @@ -2,4 +2,4 @@ 'astro': minor --- -Fallback to the `tap` prefetch strategy on slow connection, instead of bailing. +Changes the fallback prefetch behavior on slow connections and when data saver mode is enabled. Instead of disabling prefetch entirely, the `tap` strategy will be used.