Merge pull request gzuidhof#25 from tamo/reload-to-check-coep

Retry with require-corp if credentialless fails

README.md

@@ -39,16 +39,20 @@ You can customize the behavior by defining a variable `coi` in the global scope
 
 ```javascript
 window.coi = {
-    // // A function that is run to decide whether to register the SW or not.
+    // A function that is run to decide whether to register the SW or not.
     // You could for instance make this return a value based on whether you actually need to be cross origin isolated or not.
-    shouldRegister: () => true,
+    // Using "!reloadedBySelf" you can avoid infinite loops of reloading.
+    shouldRegister: () => !reloadedBySelf,
     // If this function returns true, any existing service worker will be deregistered (and nothing else will happen).
     shouldDeregister: () => false,
     // A function that is run to decide whether to use "Cross-Origin-Embedder-Policy: credentialless" or not.
     // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy#browser_compatibility
-    coepCredentialless: () => !(window.chrome || window.netscape),
+    coepCredentialless: () => true,
+    // A function to decide whether to retry with require-corp if credentialless fails.
+    coepDegrade: () => true,
     // Override this if you want to prompt the user and do reload at your own leisure. Maybe show the user a message saying:
     // "Click OK to refresh the page to enable <...>"
+    // You can see window.sessionStorage.getItem("coiReloadedBySelf") for the reason to reload.
     doReload: () => window.location.reload(),
     // Set to true if you don't want coi to log anything to the console.
     quiet: false

coi-serviceworker.js

@@ -60,23 +60,46 @@ if (typeof window === 'undefined') {
 
 } else {
     (() => {
+        const reloadedBySelf = window.sessionStorage.getItem("coiReloadedBySelf");
+        window.sessionStorage.removeItem("coiReloadedBySelf");
+        const coepDegrading = (reloadedBySelf == "coepdegrade");
+
         // You can customize the behavior of this script through a global `coi` variable.
         const coi = {
-            shouldRegister: () => true,
+            shouldRegister: () => !reloadedBySelf,
             shouldDeregister: () => false,
-            coepCredentialless: () => (window.chrome !== undefined || window.netscape !== undefined),
+            coepCredentialless: () => true,
+            coepDegrade: () => true,
             doReload: () => window.location.reload(),
             quiet: false,
             ...window.coi
         };
 
         const n = navigator;
+        const controlling = n.serviceWorker && n.serviceWorker.controller;
+
+        // Record the failure if the page is served by serviceWorker.
+        if (controlling && !window.crossOriginIsolated) {
+            window.sessionStorage.setItem("coiCoepHasFailed", "true");
+        }
+        const coepHasFailed = window.sessionStorage.getItem("coiCoepHasFailed");
 
-        if (n.serviceWorker && n.serviceWorker.controller) {
+        if (controlling) {
+            // Reload only on the first failure.
+            const reloadToDegrade = coi.coepDegrade() && !(
+                coepDegrading || window.crossOriginIsolated
+            );
             n.serviceWorker.controller.postMessage({
                 type: "coepCredentialless",
-                value: coi.coepCredentialless(),
+                value: (reloadToDegrade || coepHasFailed && coi.coepDegrade())
+                    ? false
+                    : coi.coepCredentialless(),
             });
+            if (reloadToDegrade) {
+                !coi.quiet && console.log("Reloading page to degrade COEP.");
+                window.sessionStorage.setItem("coiReloadedBySelf", "coepdegrade");
+                coi.doReload("coepdegrade");
+            }
 
             if (coi.shouldDeregister()) {
                 n.serviceWorker.controller.postMessage({ type: "deregister" });
@@ -100,12 +123,14 @@ if (typeof window === 'undefined') {
 
                     registration.addEventListener("updatefound", () => {
                         !coi.quiet && console.log("Reloading page to make use of updated COOP/COEP Service Worker.");
+                        window.sessionStorage.setItem("coiReloadedBySelf", "updatefound");
                         coi.doReload();
                     });
 
                     // If the registration is active, but it's not controlling the page
                     if (registration.active && !n.serviceWorker.controller) {
                         !coi.quiet && console.log("Reloading page to make use of COOP/COEP Service Worker.");
+                        window.sessionStorage.setItem("coiReloadedBySelf", "notcontrolling");
                         coi.doReload();
                     }
                 },