Add more long-term caching headers, fix missing hash in main.css, switch Workbox to use locally generated files instead of Fastly (improves TTI), delay SW install by 1s.

firebase.json

@@ -11,6 +11,44 @@
         "source": "**",
         "destination": "/index.html"
       }
+    ],
+    "headers": [
+      {
+        "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
+        "headers": [
+          {
+            "key": "Access-Control-Allow-Origin",
+            "value": "*"
+          }
+        ]
+      },
+      {
+        "source": "**/*.@(jpg|jpeg|gif|png|ico)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=7200"
+          }
+        ]
+      },
+      {
+        "source": "**/*.@(js|css|json|manifest|map)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31536000"
+          }
+        ]
+      },
+      {
+        "source": "sw.js",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=0"
+          }
+        ]
+      }
     ]
   }
 }

src/index.tsx

@@ -20,9 +20,11 @@ if (process.env.NODE_ENV === 'development') {
       root = render(<App />, document.body, root);
     });
   });
-} else if ('serviceWorker' in navigator && location.protocol === 'https:') {
+} else if ('serviceWorker' in navigator) {
   addEventListener('load', () => {
-    navigator.serviceWorker.register(__webpack_public_path__ + 'sw.js');
+    setTimeout(() => {
+      navigator.serviceWorker.register(__webpack_public_path__ + 'sw.js');
+    }, 1000);
   });
 }
 

webpack.config.js

@@ -148,6 +148,7 @@ module.exports = function (_, env) {
       // See: https://github.com/webpack-contrib/mini-css-extract-plugin
       // See also: https://twitter.com/wsokra/status/970253245733113856
       isProd && new MiniCssExtractPlugin({
+        filename: '[name].[contenthash:5].css',
         chunkFilename: '[name].chunk.[contenthash:5].css'
       }),
 
@@ -241,6 +242,7 @@ module.exports = function (_, env) {
         swDest: 'sw.js',
         clientsClaim: true,
         skipWaiting: true,
+        importWorkboxFrom: 'local',
         exclude: [
           'report.html',
           'manifest.json',