index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>sViewer</title>
    <meta charset="utf-8">
    <!-- Send only the origin (no path/query) as Referer. A long permalink (e.g. the
         annotation ?draw= payload) would otherwise leak into every same-origin
         sub-resource's Referer header and overflow server header buffers
         (CONNECTION_CLOSED). Must stay before any resource fetch. -->
    <meta name="referrer" content="origin">
    <meta name="description" content="Visualiseur de cartes simple pour consulter rapidement une donnée en flux WMS">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#1a1a2e">
    <link rel="manifest" href="manifest.json">
    <link rel="icon" type="image/png" sizes="192x192" href="static/img/icon-192.png">
    <link rel="apple-touch-icon" href="static/img/icon-192.png">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #f4f4f5;
            overflow: hidden;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        #sviewer {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            visibility: hidden;
        }
        #frameMap {
            flex: 1;
            overflow: hidden;
            position: relative;
        }
        #panelShareBtn {
            width: auto;
            min-width: 44px;
            padding: 0 12px;
            white-space: nowrap;
        }
        .visually-hidden-focusable:not(:focus):not(:focus-within) {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0,0,0,0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }
    </style>
</head>
<body>
    <a href="#sviewer" class="visually-hidden-focusable">Skip to map</a>
    <div id="sviewer" tabindex="-1"></div>

    <script src="static/js/embed.min.js"></script>
    <script>
        // Register Service Worker for offline support
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('sw.js').catch(err => {
                console.debug('Service Worker registration failed:', err);
            });
            // New SW activated (new release) → prompt reload so shell matches new cache
            navigator.serviceWorker.addEventListener('controllerchange', () => {
                var sv = window.SViewer;
                if (sv && sv.toast) {
                    sv.toast('Nouvelle version disponible — rechargement…', { type: 'info', duration: 2500 });
                    setTimeout(() => window.location.reload(), 2600);
                } else {
                    window.location.reload();
                }
            });
        }

        // Wait for DOM to be ready, then initialize with URL parameters
        function initMap() {
            var params = {};
            var qs = window.location.search.substring(1);
            if (qs) {
                qs.split('&').forEach(function(pair) {
                    var parts = pair.split('=');
                    params[parts[0]] = decodeURIComponent((parts[1] || '').replace(/\+/g, ' '));
                });
            }
            SViewer.init('#sviewer', params);
        }

        // Wait for embed.js to be loaded
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initMap);
        } else {
            initMap();
        }
    </script>
</body>
</html>