use pagehide instead of visibilitychange

Author: richvdh

src/utils/SessionLock.ts

@@ -208,13 +208,23 @@ export async function getSessionLock(onNewInstance: () => Promise<void>): Promis
     // Now add a listener for other claimants to the lock.
     window.addEventListener("storage", onStorageEvent);
 
-    // also add a listener to clear our claims when our tab closes (provided we haven't released it already)
-    window.document.addEventListener("visibilitychange", (event) => {
-        if (window.document.visibilityState === "hidden" && lockServicer !== null) {
-            prefixedLogger.info("Unloading: clearing our claims");
+    // also add a listener to clear our claims when our tab closes or navigates away
+    window.addEventListener("pagehide", (event) => {
+        // only remove the ping if we still think we're the owner. Otherwise we could be removing someone else's claim!
+        if (lockServicer !== null) {
+            prefixedLogger.info("page hide: clearing our claim");
             window.localStorage.removeItem(STORAGE_ITEM_PING);
             window.localStorage.removeItem(STORAGE_ITEM_OWNER);
         }
+
+        // It's worth noting that, according to the spec, the page might come back to life again after a pagehide.
+        //
+        // In practice that's unlikely because Element is unlikely to qualify for the bfcache, but if it does,
+        // this is probably the best we can do: we certainly don't want to stop the user loading any new tabs because
+        // Element happens to be in a bfcache somewhere.
+        //
+        // So, we just hope that we aren't in the middle of any crypto operations, and rely on `onStorageEvent` kicking
+        // in soon enough after we resume to tell us if another tab woke up while we were asleep.
     });
 
     return true;

test/utils/SessionLock-test.ts

@@ -68,9 +68,8 @@ describe("SessionLock", () => {
         expect(await getSessionLock(onNewInstance1)).toBe(true);
         expect(onNewInstance1).not.toHaveBeenCalled();
 
-        // ... and is closed
-        jest.spyOn(window.document, "visibilityState", "get").mockReturnValue("hidden");
-        window.document.dispatchEvent(new Event("visibilitychange", {}));
+        // ... and navigates away
+        window.dispatchEvent(new Event("pagehide", {}));
 
         // second instance starts as normal
         const onNewInstance2 = jest.fn();