Как добавить полифилл GoogleChromeLabs input-first-delay в приложение React - PullRequest
Новая
       64

Как добавить полифилл GoogleChromeLabs input-first-delay в приложение React

0 голосов
/ 06 мая 2020

Мне, должно быть, не хватает чего-то простого, но я не могу заставить полифилл работать для измерения первой задержки ввода в моем проекте firebase.

Я включил минифицированный файл, как предлагалось здесь , а затем в теле моего HTML я также запустил код, как было предложено.

Итак, это выглядит так: 

<head>
  <title>My website</title>

  <!--first-input-delay-->
  !function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>

<body>

  <!-- my react app -->
  <div id="root"></div>

  <script>
    perfMetrics.onFirstInputDelay((delay, evt) => {
        console.log("First Input Delay", delay)
        console.log("Event details", evt)
      })
  </script>

</body>

Когда я включаю журналы консоли, скрипт выполняется, как ожидалось, и консоль регистрирует данные, но никогда не отправляет их в firebase. Если я извлечу журналы консоли (perfMetrics.onFirstInputDelay()), скрипт завершится ошибкой с TypeError: n is not a function.

Как мне добавить это в свое приложение? Должен ли я как-нибудь отправлять трассировку в Firebase? В настоящий момент я использую отслеживание производительности, но не знаю, как отправить это конкретное событие c, поскольку у него нет времени начала и окончания.

Решение выглядит примерно так, как показано ниже? 

const performance = firebase.performance()
performance.trace(onFirstInputDelay)

1 Ответ

0 голосов
/ 07 мая 2020

Итак, я делал что-то глупое. Мне нужно было только включить полифилл и позволить Firebase SDK обрабатывать событие onFirstInputDelay.

Так что просто это работает. 

<head>
  <title>My website</title>

  <!--first-input-delay-->
  !function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>

<body>
  <!-- my react app -->
  <div id="root"></div>
</body>
...