1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | import {onBFCacheRestore} from './lib/bfcache.js';
|
18 | import {bindReporter} from './lib/bindReporter.js';
|
19 | import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
|
20 | import {initMetric} from './lib/initMetric.js';
|
21 | import {observe} from './lib/observe.js';
|
22 | import {onHidden} from './lib/onHidden.js';
|
23 | import {
|
24 | firstInputPolyfill,
|
25 | resetFirstInputPolyfill,
|
26 | } from './lib/polyfills/firstInputPolyfill.js';
|
27 | import {runOnce} from './lib/runOnce.js';
|
28 | import {whenActivated} from './lib/whenActivated.js';
|
29 | import {
|
30 | FIDMetric,
|
31 | FirstInputPolyfillCallback,
|
32 | ReportCallback,
|
33 | ReportOpts,
|
34 | } from './types.js';
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | export const onFID = (onReport: ReportCallback, opts?: ReportOpts) => {
|
46 |
|
47 | opts = opts || {};
|
48 |
|
49 | whenActivated(() => {
|
50 |
|
51 | const thresholds = [100, 300];
|
52 |
|
53 | const visibilityWatcher = getVisibilityWatcher();
|
54 | let metric = initMetric('FID');
|
55 | let report: ReturnType<typeof bindReporter>;
|
56 |
|
57 | const handleEntry = (entry: PerformanceEventTiming) => {
|
58 |
|
59 | if (entry.startTime < visibilityWatcher.firstHiddenTime) {
|
60 | metric.value = entry.processingStart - entry.startTime;
|
61 | metric.entries.push(entry);
|
62 | report(true);
|
63 | }
|
64 | };
|
65 |
|
66 | const handleEntries = (entries: FIDMetric['entries']) => {
|
67 | (entries as PerformanceEventTiming[]).forEach(handleEntry);
|
68 | };
|
69 |
|
70 | const po = observe('first-input', handleEntries);
|
71 | report = bindReporter(onReport, metric, thresholds, opts!.reportAllChanges);
|
72 |
|
73 | if (po) {
|
74 | onHidden(
|
75 | runOnce(() => {
|
76 | handleEntries(po.takeRecords() as FIDMetric['entries']);
|
77 | po.disconnect();
|
78 | })
|
79 | );
|
80 | }
|
81 |
|
82 | if (window.__WEB_VITALS_POLYFILL__) {
|
83 | console.warn(
|
84 | 'The web-vitals "base+polyfill" build is deprecated. See: https://bit.ly/3aqzsGm'
|
85 | );
|
86 |
|
87 |
|
88 | if (!po) {
|
89 | window.webVitals.firstInputPolyfill(
|
90 | handleEntry as FirstInputPolyfillCallback
|
91 | );
|
92 | }
|
93 | onBFCacheRestore(() => {
|
94 | metric = initMetric('FID');
|
95 | report = bindReporter(
|
96 | onReport,
|
97 | metric,
|
98 | thresholds,
|
99 | opts!.reportAllChanges
|
100 | );
|
101 |
|
102 | window.webVitals.resetFirstInputPolyfill();
|
103 | window.webVitals.firstInputPolyfill(
|
104 | handleEntry as FirstInputPolyfillCallback
|
105 | );
|
106 | });
|
107 | } else {
|
108 |
|
109 | if (po) {
|
110 | onBFCacheRestore(() => {
|
111 | metric = initMetric('FID');
|
112 | report = bindReporter(
|
113 | onReport,
|
114 | metric,
|
115 | thresholds,
|
116 | opts!.reportAllChanges
|
117 | );
|
118 |
|
119 | resetFirstInputPolyfill();
|
120 | firstInputPolyfill(handleEntry as FirstInputPolyfillCallback);
|
121 | });
|
122 | }
|
123 | }
|
124 | });
|
125 | };
|