Automatically add web-vitals polyfill script to index.html (#644)

* Automatically add web-vitals polyfill script to index.html * Add the explantion of why the polyfll is necessary
Geovation · Jun 7, 2021 · 522eb96 · 522eb96
1 parent 9b9a4bd
commit 522eb96
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/public/index.html b/public/index.html
@@ -20,11 +20,12 @@
 <html>
 
 <head>
-    <!-- // TODO: need to copy this automatically as poart of the build
-    // https://github.com/GoogleChrome/web-vitals#overview
-    // Inline code from `node_modules/web-vitals/dist/polyfill.js` here -->        <!-- web-vitals  1.1.2 -->
-    <!-- web-vitals  1.1.2 -->
-    <script id="web-vitals">!function () { var e, t, n, i, r = { passive: !0, capture: !0 }, a = new Date, o = function () { i = [], t = -1, e = null, f(addEventListener) }, c = function (i, r) { e || (e = r, t = i, n = new Date, f(removeEventListener), u()) }, u = function () { if (t >= 0 && t < n - a) { var r = { entryType: "first-input", name: e.type, target: e.target, cancelable: e.cancelable, startTime: e.timeStamp, processingStart: e.timeStamp + t }; i.forEach((function (e) { e(r) })), i = [] } }, s = function (e) { if (e.cancelable) { var t = (e.timeStamp > 1e12 ? new Date : performance.now()) - e.timeStamp; "pointerdown" == e.type ? function (e, t) { var n = function () { c(e, t), a() }, i = function () { a() }, a = function () { removeEventListener("pointerup", n, r), removeEventListener("pointercancel", i, r) }; addEventListener("pointerup", n, r), addEventListener("pointercancel", i, r) }(t, e) : c(t, e) } }, f = function (e) { ["mousedown", "keydown", "touchstart", "pointerdown"].forEach((function (t) { return e(t, s, r) })) }, p = "hidden" === document.visibilityState ? 0 : 1 / 0; addEventListener("visibilitychange", (function e(t) { "hidden" === document.visibilityState && (p = t.timeStamp, removeEventListener("visibilitychange", e, !0)) }), !0); o(), self.webVitals = { firstInputPolyfill: function (e) { i.push(e), u() }, resetFirstInputPolyfill: o, get firstHiddenTime() { return p } } }();</script>
+    <!-- https://firebase.google.com/docs/perf-mon/get-started-web#add-first-input-delay-polyfill
+        https://github.com/GoogleChrome/web-vitals#load-the-library
+        To measure the first input delay metric, the polyfill library is needed.
+        The polyfill is now part of the web-vitals library,
+        so we inline code from `node_modules/web-vitals/dist/polyfill.js` here. -->
+    <script id="web-vitals"></script>
 
     <meta http-equiv="Content-Security-Policy" content="
         default-src * blob: data: gap://ready https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' file://* blob:;

diff --git a/scripts/runWithVars.sh b/scripts/runWithVars.sh
@@ -26,10 +26,10 @@ export REACT_APP_BUILD_NUMBER=${TRAVIS_BUILD_NUMBER:-"0"}
 export REACT_APP_VERSION="$VERSION_MAYOR.$VERSION_MINOR.$REACT_APP_BUILD_NUMBER"
 export REACT_APP_TITLE=$npm_package_title
 
-# TODO:
-# need to copy the pollifill from the library
-#  node_modules/web-vitals/dist/polyfill.js
-# sed  's/<script id="web-vitals">/,/<\/script>/\<\/bla>/g;' public/index.html > public/index.html
+# Copy web-vitals polyfill script from node_modules/web-vitals/dist/polyfill.js to public/index.html
+SCRIPT=`cat node_modules/web-vitals/dist/polyfill.js`
+SCRIPT=$(echo "$SCRIPT" | sed -e 's/&/\\\&/g' )
+sed -i "" "s#<script id=\"web-vitals\">#<script id=\"web-vitals\">$SCRIPT#" public/index.html
 
 eval $@
 set +x;