[docs] Workbox & service workers are causing infinite loading of site

[huttarichard]

This might be related #15666. This only happens if you open two tabs. Once you do, material ui site will start loading workbox in infinite loop.

It is consuming insane amount of CPU.
It is really annoying as you are looking at docs a lot.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Unregistering service worker in chrome will solve the issue until you refresh the page.

Your Environment 🌎

OSX catalina, chrome

[oliviertassinari]

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

[huttarichard]

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.

[huttarichard]

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

[huttarichard]

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.

[oliviertassinari]

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

[huttarichard]

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

[oliviertassinari]

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

[oliviertassinari]

Can somebody else reproduce?

[eps1lon]

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.

[oliviertassinari]

@eps1lon I believe the service worker is only registered in production, could the reload be coming from somewhere else?
https://github.com/mui-org/material-ui/blob/25a6babf018961a177433cbfb50c684ca858afb1/docs/pages/_app.js#L214

I believe the reload can only come from two places:

• https://github.com/mui-org/material-ui/blob/25a6babf018961a177433cbfb50c684ca858afb1/docs/pages/_app.js#L196
• https://github.com/mui-org/material-ui/blob/25a6babf018961a177433cbfb50c684ca858afb1/docs/pages/_app.js#L57

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

[huttarichard]

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

[oliviertassinari]

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?

[Gauravkain]

• Hey @oliviertassinari , can I contribute, if no one is working on this issue

[oliviertassinari]

@Gauravkain You are good to go :)

[Gauravkain]

@oliviertassinari can you tell me what to do