Add feature detects to support Opera mini in extreme data saver mode

rollup.config.js

@@ -33,7 +33,7 @@ const configurePlugins = ({module, polyfill = false}) => {
     }),
     replace({
       values: {
-        'self.__WEB_VITALS_POLYFILL__': polyfill,
+        'window.__WEB_VITALS_POLYFILL__': polyfill,
       },
       preventAssignment: true,
     })

src/getFCP.ts

@@ -44,9 +44,11 @@ export const getFCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
 
   // TODO(philipwalton): remove the use of `fcpEntry` once this bug is fixed.
   // https://bugs.webkit.org/show_bug.cgi?id=225305
-  // Also, the check for `getEntriesByName` is needed to support Opera:
+  // The check for `getEntriesByName` is needed to support Opera:
   // https://github.com/GoogleChrome/web-vitals/issues/159
-  const fcpEntry = performance.getEntriesByName &&
+  // The check for `window.performance` is needed to support Opera mini:
+  // https://github.com/GoogleChrome/web-vitals/issues/185
+  const fcpEntry = window.performance && performance.getEntriesByName &&
       performance.getEntriesByName('first-contentful-paint')[0];
 
   const po = fcpEntry ? null : observe('paint', entryHandler);

src/getFID.ts

@@ -48,7 +48,7 @@ export const getFID = (onReport: ReportHandler, reportAllChanges?: boolean) => {
     }, true);
   }
 
-  if (self.__WEB_VITALS_POLYFILL__) {
+  if (window.__WEB_VITALS_POLYFILL__) {
     // Prefer the native implementation if available,
     if (!po) {
       window.webVitals.firstInputPolyfill(entryHandler as FirstInputPolyfillCallback)

src/getLCP.ts

@@ -23,7 +23,7 @@ import {onHidden} from './lib/onHidden.js';
 import {ReportHandler} from './types.js';
 
 
-const reportedMetricIDs:Set<string> = new Set();
+const reportedMetricIDs: Record<string, boolean> = {};
 
 export const getLCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
   const visibilityWatcher = getVisibilityWatcher();
@@ -51,10 +51,10 @@ export const getLCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
     report = bindReporter(onReport, metric, reportAllChanges);
 
     const stopListening = () => {
-      if (!reportedMetricIDs.has(metric.id)) {
+      if (!reportedMetricIDs[metric.id]) {
         po.takeRecords().map(entryHandler as PerformanceEntryHandler);
         po.disconnect();
-        reportedMetricIDs.add(metric.id);
+        reportedMetricIDs[metric.id] = true;
         report(true);
       }
     }
@@ -74,7 +74,7 @@ export const getLCP = (onReport: ReportHandler, reportAllChanges?: boolean) => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           metric.value = performance.now() - event.timeStamp;
-          reportedMetricIDs.add(metric.id);
+          reportedMetricIDs[metric.id] = true;
           report(true);
         });
       });

src/lib/getVisibilityWatcher.ts

@@ -36,8 +36,8 @@ export const getVisibilityWatcher = () => {
     // since navigation start. This isn't a perfect heuristic, but it's the
     // best we can do until an API is available to support querying past
     // visibilityState.
-    if (self.__WEB_VITALS_POLYFILL__) {
-      firstHiddenTime = self.webVitals.firstHiddenTime;
+    if (window.__WEB_VITALS_POLYFILL__) {
+      firstHiddenTime = window.webVitals.firstHiddenTime;
       if (firstHiddenTime === Infinity) {
         trackChanges();
       }