padelmex.github.io/index.html at main · padelmex/padelmex.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Padel Mexicano Tournament</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="Organize and manage Padel Mexicano tournaments" />
    <meta name="author" content="marnikitta" />

    <!-- PWA Meta Tags -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Padel Mexicano" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- Open Graph -->
    <meta property="og:title" content="Padel Mexicano Tournament" />
    <meta property="og:description" content="Organize and manage Padel Mexicano tournaments" />
    <meta property="og:type" content="website" />

    <link rel="icon" href="assets/favicon.png" />
    <link rel="manifest" href="manifest.json" />
    <link rel="apple-touch-icon" href="assets/icon-192.png" />
    <meta name="theme-color" content="#000000" />

    <script type="importmap">
        {
          "imports": {
            "vue": "./lib/vue.esm-browser.prod.js"
          }
        }
    </script>

    <link rel="stylesheet" href="styles/style.css?v=20251123182151" />
    <script type="module" src="src/app.js?v=20251123182151" defer></script>

    <style>
        /* Critical CSS: Hide app until mounted to avoid flash of unstyled content */
        #app {
            visibility: hidden;
        }
        #app.mounted {
            visibility: visible;
        }
    </style>
</head>
<body>
<noscript>
    <strong>JavaScript is required to run this app.</strong>
</noscript>
<div id="app"></div>

<script type="module">
    import { config } from './src/config.js?v=20251123182151';

    // Register service worker for offline support (only if caching is enabled)
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', async () => {
            if (config.ENABLE_CACHE) {
                // Reload page when new service worker takes control
                let refreshing = false;
                navigator.serviceWorker.addEventListener('controllerchange', () => {
                    if (refreshing) return;
                    refreshing = true;
                    console.log('New Service Worker activated, reloading page...');
                    window.location.reload();
                });

                // Register service worker
                navigator.serviceWorker.register('./sw.js')
                    .then((registration) => {
                        console.log('Service Worker registered successfully:', registration.scope);
                        // Check for updates periodically
                        registration.update();
                    })
                    .catch((error) => {
                        console.log('Service Worker registration failed:', error);
                    });
            } else {
                console.log('Service Worker disabled (ENABLE_CACHE = false)');

                // Unregister any existing service workers
                const registrations = await navigator.serviceWorker.getRegistrations();
                for (const registration of registrations) {
                    await registration.unregister();
                    console.log('Unregistered existing Service Worker');
                }

                // Clear all caches
                const cacheNames = await caches.keys();
                for (const cacheName of cacheNames) {
                    await caches.delete(cacheName);
                    console.log('Cleared cache:', cacheName);
                }
            }
        });
    }
</script>
</body>
</html>