distinguish between PWA vs webpage and disable browser shortcuts on PWA app

Question

I'm searching a way to disable browser shortcuts, so that my PWA can give pure native experience. I couldn't find any dedicated config in manifest.json and especially distinguishing between webpage vs PWA.

Answer 1

To find whether user is using a webpage or PWA, you can use display-mode. Then you can write custom keydown handler that prevents default and/or stop propagation wherever it's required.

We can use this snippet to find, what user is using (either PWA or webpage)

if (document.readyState === "complete") {
      if (window.matchMedia("(display-mode: standalone)").matches) {
        window.addEventListener("keydown", keydownHandler);
      }
    }

Here is the complete react example to unregister certain browser shortcuts:

  const keydownHandler = (e: KeyboardEvent) => {
    // Reference: https://support.google.com/chrome/answer/157179?hl=en&co=GENIE.Platform%3DDesktop#zippy=%2Ctab-window-shortcuts
    if (
      // Open TAB
      (e.ctrlKey && e.key === "t") ||
      (e.metaKey && e.key === "t") ||
      // Close TAB
      (e.ctrlKey && e.key === "w") ||
      (e.metaKey && e.key === "w") ||
      // Print
      (e.ctrlKey && e.key === "p") ||
      (e.metaKey && e.key === "p") ||
      // Find
      (e.ctrlKey && e.key === "f") ||
      (e.metaKey && e.key === "f") ||
      // Zoom In
      (e.ctrlKey && e.key === "=") ||
      (e.metaKey && e.key === "=") ||
      // Zoom Out
      (e.ctrlKey && e.key === "-") ||
      (e.metaKey && e.key === "-") ||
      // PageSource
      (e.ctrlKey && e.key === "u") ||
      (e.metaKey && e.key === "u") ||
      // SaveAs
      (e.ctrlKey && e.key === "s") ||
      (e.metaKey && e.key === "s") ||
      // History
      (e.ctrlKey && e.key === "h") ||
      (e.metaKey && e.key === "y") ||
      // NewWindow
      (e.ctrlKey && e.key === "n") ||
      (e.metaKey && e.key === "n") ||
      // Downloads
      (e.ctrlKey && e.key === "j") ||
      (e.metaKey && e.altKey && e.key === "l")
    ) {
      e.preventDefault();
      e.stopPropagation();
    }
  };

  useEffect(() => {
    if (document.readyState === "complete") {
      if (window.matchMedia("(display-mode: standalone)").matches) {
        window.addEventListener("keydown", keydownHandler);
      }
    }
    return () => {
      window.removeEventListener("keydown", keydownHandler);
    };
  }, []);