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(
+  webpack(
-    { ignored: /build-translations/, poll: isWsl },
+    process.env.ES5
-    doneHandler()
+      ? 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,6 +43,8 @@
     <%= renderTemplate('_preload_roboto') %>
 
     <script crossorigin="use-credentials">
+      // 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", {
@@ -51,6 +53,7 @@
         if (!window.globalThis) {
           window.globalThis = window;
         }
+      }
     </script>
 
     <script>

src/html/index.html.template

@@ -67,6 +67,8 @@
     <%= renderTemplate('_preload_roboto') %>
 
     <script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
+      // 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 %>";
@@ -74,6 +76,7 @@
         if (!window.globalThis) {
           window.globalThis = window;
         }
+      }
     </script>
     <script>
     {% for extra_module in extra_modules -%}

src/html/onboarding.html.template

@@ -75,6 +75,8 @@
     <%= renderTemplate('_preload_roboto') %>
 
     <script crossorigin="use-credentials">
+      // 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", {
@@ -83,6 +85,7 @@
         if (!window.globalThis) {
           window.globalThis = window;
         }
+      }
     </script>
 
     <script>