atomify/index.html at main · andeplane/atomify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
  <link rel="manifest" href="/manifest.json" />
  <title>Atomify LAMMPS - a real time simulator in the browser</title>

  <!-- Shell fonts (design tokens): Manrope UI + JetBrains Mono for code. -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
    rel="stylesheet">

  <!--
    Cross-origin isolation for SharedArrayBuffer, which the atomify
    (KOKKOS/pthreads) wasm build requires. GitHub Pages can't set COOP/COEP
    response headers, so this service-worker shim injects them on the client
    (the page reloads once on first visit). COEP credentialless keeps
    cross-origin subresources (imported example files, etc.) working without
    requiring CORP headers. In dev, vite sets the same headers directly.
    Must load before the app module.
  -->
  <!--
    Service worker lifecycle. Two workers serve /atomify/: the COOP/COEP
    shim below and JupyterLite's (patched at build time to inject the same
    isolation headers — see scripts/jupyter_coi_patch.py, run by `make
    jupyter`). Both update with skipWaiting + clients.claim.

    Normal visits: explicitly check both registrations for updates so a
    newly deployed fix takes over on the next load, instead of whenever
    the browser's own update heuristics get around to it.

    Escape hatch: /atomify/?sw-reset deterministically unregisters the
    /atomify/ service workers and deletes JupyterLite's response cache,
    then reloads without the flag — guaranteed recovery if a deployed
    worker ever leaves clients stuck. GitHub Pages projects share the
    andeplane.github.io origin, so both cleanups stay scoped to Atomify
    (other projects' workers and caches are untouched), and notebook
    contents live in IndexedDB, which is preserved. src/index.tsx skips
    booting the app while the reset is in flight.
  -->
  <script>
    (() => {
      const resetting = new URLSearchParams(window.location.search).has(
        "sw-reset",
      );
      window.coi = {
        coepCredentialless: () => true,
        shouldRegister: () => !resetting,
      };
      if (resetting) {
        const done = () => {
          const url = new URL(window.location.href);
          url.searchParams.delete("sw-reset");
          window.location.replace(url);
        };
        if (!("serviceWorker" in navigator)) {
          done();
          return;
        }
        Promise.all([
          navigator.serviceWorker.getRegistrations().then((regs) =>
            Promise.all(
              regs
                .filter((reg) =>
                  new URL(reg.scope).pathname.startsWith("/atomify/"),
                )
                .map((reg) => reg.unregister()),
            ),
          ),
          "caches" in window ? caches.delete("precache") : null,
        ]).then(done, done);
        return;
      }
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker
          .getRegistrations()
          .then((regs) =>
            regs.forEach((reg) => reg.update().catch(() => {})),
          )
          .catch(() => {});
      }
    })();
  </script>
  <script src="coi-serviceworker.min.js"></script>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>

  <div id="root"></div>
  <script type="module" src="/src/index.tsx"></script>
</body>

</html>