Fix the white screen issue

The white screen on second load was happenning due to nginx and not our
code. nginx (since it redirects all 404's to our index was doing just
that.). This means, even when a chunk that the service worker has cached
wouldn't be available, it'd be returned the `index.html` with a 200 OK
and so our service worker thinks that's the correct file and accordingly
caches it.

In the second load, it tries to load this cached files and fails in
doing so since the JS and CSS files are actually the `index.html` file.

.github/workflows/build-push.yml

@@ -18,8 +18,13 @@ jobs:
           node-version: '15'
       - name: Install dependencies
         run: npm install
+      # Install workbox
+      - name: Install workbox
+        run: npm i workbox-cli --global
       - name: Build for production
         run: npm run build
+      - name: Build service worker
+        run: workbox generateSW workbox-config.js
       # Upload the dist directory
       - uses: actions/upload-artifact@master
         with:

nginx.conf

@@ -23,11 +23,12 @@ http {
     # All the nested routes that would have atleast one dot in them
     # are to be served as it is. If not available, then it will
     # result in a 404.
-    location /.*\..*$ { # files (assuming they always have a dot)
-        root /app;
-        try_files $uri =404;
+    location ~ ^/.*\..*$ {
+      root /app;
+      try_files $uri =404;
     }
 
+
     # All the nested routes that have something without a dot
     # will be redirected to the index.html
     location / {