app/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="My site, made with PWA Easy">
    <meta name="theme-color" content="#ffffff">
    <title>My site!</title>
    <style id="styles-temporary">
        html {
            background: #f0f0f0;
        }

        body {
            margin: 0;
        }

        body * {
            display: none;
        }

        #app-loading {
            display: initial;
            background: url("img/loading.svg") no-repeat center center;
            margin: auto;
            width: 50vh;
            height: 50vh;
        }

        #app-dom {
            width: 100%;
            height: 100vh;
            display: flex;
        }

        noscript {
            display: initial;
        }
    </style>
    <script src="./utils/global.js"></script>
</head>
<body>
<noscript>
    Please enable JavaScript to access this site.
</noscript>

<div id="app-dom" style="display: none">
    <div id="app-loading"></div>
</div>

<script type="text/x-template" id="app-template"></script>

<script type="module">
    document.getElementById('app-dom').removeAttribute('style');

    import './config/globals.js';
    import {StartupUtils} from "./utils/startup.js";

    StartupUtils.addHeaders();
    utils.polyfillSafari();

    (async () => {
        const startApp = async () => {
            let {default: ControllerIndex} = await import('./controllers/index.js');
            await ControllerIndex.initialize();
        };

        if ('serviceWorker' in window.navigator) {
            const Workbox = config.isLocalhost
                ? (await import('./external/js/global/workbox/workbox-window.dev.mjs')).Workbox
                : (await import('./external/js/global/workbox/workbox-window.prod.mjs')).Workbox;

            const wb = new Workbox(`${config.rootURL.pathname}service-worker.js`, {updateViaCache: 'none'});

            wb.addEventListener('installed', event => { if (event.isUpdate) app?.showUpdateSnackbar(); });
            wb.addEventListener('externalactivated', () => { app?.showUpdateSnackbar(); });

            await wb.register();

            // Workaround for the lack of a consistent 'activated' event. The app requires the ServiceWorker when there
            // is no internet access. The ServiceWorker also performs various URL rewrites to reduce the network usage.
            // https://github.com/w3c/ServiceWorker/issues/1222
            // https://github.com/w3c/ServiceWorker/issues/1247
            const swr = await window.navigator.serviceWorker.ready;
            if (swr.active.state === 'activated') await startApp();
            else {
                const activatedHandler = async () => {
                    wb.removeEventListener('activated', activatedHandler);
                    await startApp();
                };
                wb.addEventListener('activated', activatedHandler);
            }
        } else await startApp(); // fall back to online-only mode
    })();
</script>
</body>
</html>