feature: Include polyfill.io for web builds

Provide a custom `HtmlWebpackPlugin` option to only bundle the script for polyfill.io for the web/mWeb platform - it's not needed for desktop as it already works with latest tech The `ResizeObserver` is added as it's not included in the `default` features It's needed for the app to work on iOS 12 mWeb Safari The `gated` flag is added to skip polyfilling a feature that is already supported natively by the browser
ojasjadhav2 · May 6, 2021 · 1494e3f · 1494e3f
1 parent 7a7fd7d
commit 1494e3f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
@@ -35,6 +35,7 @@ const webpackConfig = {
         new HtmlWebpackPlugin({
             template: 'web/index.html',
             filename: 'index.html',
+            usePolyfillIO: platform === 'web',
         }),
 
         // Copies favicons into the dist/ folder to use for unread status

diff --git a/web/index.html b/web/index.html
@@ -28,6 +28,10 @@
     </style>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
     <link rel="shortcut icon" id="favicon" href="/favicon.png">
+    <% if (htmlWebpackPlugin.options.usePolyfillIO) { %>
+        <!-- polyfill.io is only needed on Web to support older browsers. It should not be loaded for desktop -->
+        <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CResizeObserver&flags=gated"></script>
+    <% } %>
 </head>
 <body>
     <div style="position: absolute; top: 0; left: 0; right: 0; height: 30px;" id="drag-area"></div>