How did you conclude that it's related to the service workers?

Im guessing there is a connection as if you unregister the service worker http://material-ui.com/sw.js it will stop infinite loop.

line 8 in sw.js what is part of the loop:
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.0.0-alpha.0/workbox-sw.js');

I did not investigate further, Im now. But please look into it as well.

Also by first impression it seems to be an issue mostly if you have dev tools open from some reason.

But I have a clear way how to reproduce this (assuming that version of os doesnt matter), latest chrome (Version 87.0.4280.88 (Official Build) (x86_64)):

• Open first tab https://material-ui.com/ and open devtools (as a part of the window)
• Open second tab https://material-ui.com/ and again open devtools, same way
• Now go to first tab and refresh page.
• Second tab will go crazy with workbox requests.

I can't reproduce. What are your accepted languages (navigator.languages)? What cookies do you have in your session?

languages: window.navigator.languages ["cs", "en", "pl"]
cookies document.cookie paletteType=light; _ga=GA1.2.639254161.1605861867; sourceHintSeen=true; codeVariant=TS; lastSeenNotification=51; _gid=GA1.2.14596446.1607173697

@huttarichard Ok thanks. I was wondering if it could come from a locale issue, it seems unlikely.

Can somebody else reproduce?

I've experienced similar problems related to docs and multiple tabs. Notably in development or when dealing with devtools. Though I wasn't able to reproduce them reliably. Considering the service worker also acts up in prod we should probably have an eye on it.

@eps1lon I believe the service worker is only registered in production, could the reload be coming from somewhere else?

I believe the reload can only come from two places:

• material-ui/docs/pages/_app.js

  Line 196 in 25a6bab

  window.location.reload();

• material-ui/docs/pages/_app.js

  Line 57 in 25a6bab

  window.location = preferedLanguage === 'en' ? canonical : `/${preferedLanguage}${canonical}`;

I have managed to reproduce in my env by checking this box (which isn't by default):

@oliviertassinari I think the update on reload is somewhat global option (not depending on site you currently have open).

I could solve most of the issue with:

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 984d209fca..6b4453b3ae 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -166,6 +166,17 @@ function Analytics() {
   return null;
 }

+let reloadInterval;
+
+// Avoid infinite loop when "Upload on reload" is set in the Chrome sw dev tools.
+function lazyReload() {
+  clearInterval(reloadInterval);
+  reloadInterval = setInterval(() => {
+    if (document.hasFocus()) {
+      window.location.reload();
+    }
+  }, 100);
+}
+
 // Inspired by
 // https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users
 function forcePageReload(registration) {
@@ -193,7 +204,7 @@ function forcePageReload(registration) {
         registration.waiting.postMessage('skipWaiting');
       } else if (event.target.state === 'activated') {
         // Force the control of the page by the activated service worker.
-        window.location.reload();
+        lazyReload();
       }
     });
   }

It might be good enough for the problem at hand. At this point, we leverage the sw.js to have the documentation work a bit better offline. It can be handy when we have issues with our hosting provider. We used to store the whole documentation in the cache but it was too eager in bandwidth so we have moved to lazy caching.

@huttarichard Do you want to try the changes for next?