pelorus-nav/index.html at main · garyo/pelorus-nav · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="theme-color" content="#1a1a2e" />
    <meta name="description" content="Open-source marine chartplotter" />
    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
    <link rel="manifest" href="/manifest.json" />
    <title>Pelorus Nav</title>
    <script src="capacitor.js"></script>
  </head>
  <body>
    <header id="top-bar">
      <span class="app-name">Pelorus Nav</span>
      <script>
        // Detect runtime: Capacitor (Ⓐ), PWA (Ⓟ), or web (Ⓦ)
        (() => {
          var C = window.Capacitor;
          var isNative = C?.isNativePlatform?.();
          var isPWA = !isNative && (window.matchMedia('(display-mode: standalone)').matches ||
            navigator.standalone === true);
          var badge = isNative ? '\u24B6' : isPWA ? '\u24C5' : '\u24CC';
          document.querySelector('.app-name').textContent = `Pelorus Nav ${badge}`;
        })();
      </script>
      <div id="topbar-actions" class="topbar-actions"></div>
      <button id="hamburger-btn" type="button" class="hamburger-btn" aria-label="Menu">☰</button>
      <div id="topbar-menu" class="topbar-menu"></div>
    </header>
    <div id="map"></div>
    <noscript>
      <p style="padding:2em;text-align:center;color:#ccc">
        Pelorus Nav requires a browser with JavaScript and WebGL support.
      </p>
    </noscript>
    <script>
      // Early WebGL check — runs before the module bundle loads.
      (() => {
        try {
          const c = document.createElement("canvas");
          const gl = c.getContext("webgl2") || c.getContext("webgl");
          if (!gl) throw 0;
        } catch(_e) {
          document.getElementById("map").innerHTML =
            '<p style="padding:2em;text-align:center;color:#ccc">' +
            'Pelorus Nav requires a browser with WebGL support.<br>' +
            'The Kindle browser and some older browsers do not support WebGL.' +
            '</p>';
          document.getElementById("chart-select").style.display = "none";
        }
      })();
    </script>
    <script>
      // Cache-bust stale service workers on APK updates.
      // Runs inline (before SW can intercept the module bundle) so it can
      // detect when the bundle hash has changed and nuke the old SW cache.
      // Uses the module script's src (Vite hashes it) as the build fingerprint.
      (() => {
        const KEY = "pelorus-bundle-hash";
        const moduleScript = document.querySelector('script[type="module"][src]');
        const currentHash = moduleScript ? moduleScript.getAttribute("src") : "";
        const prev = localStorage.getItem(KEY);
        if (prev && prev !== currentHash && "serviceWorker" in navigator) {
          localStorage.setItem(KEY, currentHash);
          navigator.serviceWorker.getRegistrations().then(async (regs) => {
            for (const r of regs) await r.unregister();
            const keys = await caches.keys();
            for (const k of keys) await caches.delete(k);
            location.reload();
          });
          return; // Stop — reload will re-run everything
        }
        localStorage.setItem(KEY, currentHash);
      })();
    </script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>