Use ES5 build for Safari 12 and below (#9482)

build-scripts/gulp/webpack.js

@@ -86,10 +86,11 @@ const prodBuild = (conf) =>
 
 gulp.task("webpack-watch-app", () => {
   // This command will run forever because we don't close compiler
-  webpack(createAppConfig({ isProdBuild: false, latestBuild: true })).watch(
-    { ignored: /build-translations/, poll: isWsl },
-    doneHandler()
-  );
+  webpack(
+    process.env.ES5
+      ? bothBuilds(createAppConfig, { isProdBuild: false })
+      : createAppConfig({ isProdBuild: false, latestBuild: true })
+  ).watch({ ignored: /build-translations/, poll: isWsl }, doneHandler());
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
     gulp.series("build-translations", "copy-translations-app")

src/html/_js_base.html.template

@@ -20,4 +20,5 @@
             "content" in document.createElement("template"))) {
         document.write("<script src='/static/polyfills/webcomponents-bundle.js'><"+"/script>");
       }
+      var isS11_12 = /.*Version\/(?:11|12)(?:\.\d+)*.*Safari\//.test(navigator.userAgent);
     </script>

src/html/authorize.html.template

@@ -43,13 +43,16 @@
     <%= renderTemplate('_preload_roboto') %>
 
     <script crossorigin="use-credentials">
-      import("<%= latestPageJS %>");
-      window.latestJS = true;
-      window.providersPromise = fetch("/auth/providers", {
-        credentials: "same-origin",
-      });
-      if (!window.globalThis) {
-        window.globalThis = window;
+      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
+      if (!isS11_12) {
+        import("<%= latestPageJS %>");
+        window.latestJS = true;
+        window.providersPromise = fetch("/auth/providers", {
+          credentials: "same-origin",
+        });
+        if (!window.globalThis) {
+          window.globalThis = window;
+        }
       }
     </script>
 

src/html/index.html.template

@@ -67,12 +67,15 @@
     <%= renderTemplate('_preload_roboto') %>
 
     <script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
-      import("<%= latestCoreJS %>");
-      import("<%= latestAppJS %>");
-      window.customPanelJS = "<%= latestCustomPanelJS %>";
-      window.latestJS = true;
-      if (!window.globalThis) {
-        window.globalThis = window;
+      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
+      if (!isS11_12) {
+        import("<%= latestCoreJS %>");
+        import("<%= latestAppJS %>");
+        window.customPanelJS = "<%= latestCustomPanelJS %>";
+        window.latestJS = true;
+        if (!window.globalThis) {
+          window.globalThis = window;
+        }
       }
     </script>
     <script>

src/html/onboarding.html.template

@@ -75,13 +75,16 @@
     <%= renderTemplate('_preload_roboto') %>
 
     <script crossorigin="use-credentials">
-      import("<%= latestPageJS %>");
-      window.latestJS = true;
-      window.stepsPromise = fetch("/api/onboarding", {
-        credentials: "same-origin",
-      });
-      if (!window.globalThis) {
-        window.globalThis = window;
+      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
+      if (!isS11_12) {
+        import("<%= latestPageJS %>");
+        window.latestJS = true;
+        window.stepsPromise = fetch("/api/onboarding", {
+          credentials: "same-origin",
+        });
+        if (!window.globalThis) {
+          window.globalThis = window;
+        }
       }
     </script>