From f944e86aec76103f5afd688f67844f0f670465b3 Mon Sep 17 00:00:00 2001 From: Philip Walton Date: Sat, 28 Sep 2024 22:51:59 -0700 Subject: [PATCH] Update README --- README.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index b4bb695a..f8217ed1 100644 --- a/README.md +++ b/README.md @@ -262,8 +262,6 @@ In addition to using the `id` field to group multiple deltas for the same metric The following example measures each of the Core Web Vitals metrics and reports them to a hypothetical `/analytics` endpoint, as soon as each is ready to be sent. -The `sendToAnalytics()` function uses the [`navigator.sendBeacon()`](https://developer.mozilla.org/docs/Web/API/Navigator/sendBeacon) method (if available), but falls back to the [`fetch()`](https://developer.mozilla.org/docs/Web/API/Fetch_API) API when not. - ```js import {onCLS, onINP, onLCP} from 'web-vitals'; @@ -272,9 +270,9 @@ function sendToAnalytics(metric) { // Note: JSON.stringify will likely include more data than you need. const body = JSON.stringify(metric); - // Use `navigator.sendBeacon()` if available, falling back to `fetch()`. - navigator?.sendBeacon('/analytics', body) || - fetch('/analytics', {body, method: 'POST', keepalive: true}); + // Use `navigator.sendBeacon()` to send the data, which supports + // sending while the page is unloading. + navigator.sendBeacon('/analytics', body); } onCLS(sendToAnalytics); @@ -392,9 +390,9 @@ function flushQueue() { // Note: JSON.stringify will likely include more data than you need. const body = JSON.stringify([...queue]); - // Use `navigator.sendBeacon()` if available, falling back to `fetch()`. - (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || - fetch('/analytics', {body, method: 'POST', keepalive: true}); + // Use `navigator.sendBeacon()` to send the data, which supports + // sending while the page is unloading. + navigator.sendBeacon('/analytics', body); queue.clear(); }