Setting up the full-screen pages as a PWA

{
  "name": "Seitenwind Convention 2026",
  "short_name": "Seitenwind",
  "lang": "en",
  "start_url": "/?ec_plan&ec_app=1",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#f76b15",
  "icons": [
    { "src": "/app-icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/app-icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/app-icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

// Raise the number whenever you change this file
var CACHE_NAME = 'event-app-v1';
var OFFLINE_PAGE = '/offline.html';
// Pages that are available offline right after installing
var START_PAGES = ['/?ec_plan&ec_app=1', '/?ec_speakers&ec_app=1'];

// A redirect (for example to your own start page) must not stay stored,
// the browser would reject it offline
function plain(response) {
  if (!response.redirected) return response;
  return new Response(response.body, { status: response.status, statusText: response.statusText, headers: response.headers });
}

function save(key, response) {
  if (response.status === 200) {
    var copy = response.clone();
    caches.open(CACHE_NAME).then(function (cache) { return cache.put(key, copy); }).catch(function () {});
  }
  return response;
}

self.addEventListener('install', function (event) {
  event.waitUntil(caches.open(CACHE_NAME).then(function (cache) {
    return Promise.all(START_PAGES.concat(OFFLINE_PAGE).map(function (page) {
      return fetch(page).then(function (response) {
        return cache.put(page, plain(response));
      }).catch(function () {});
    }));
  }).then(function () { return self.skipWaiting(); }));
});

self.addEventListener('activate', function (event) {
  event.waitUntil(caches.keys().then(function (names) {
    return Promise.all(names.filter(function (name) {
      return name.indexOf('event-app-') === 0 && name !== CACHE_NAME;
    }).map(function (name) { return caches.delete(name); }));
  }).then(function () { return self.clients.claim(); }));
});

self.addEventListener('fetch', function (event) {
  var request = event.request, url = new URL(request.url);

  // Forms, other addresses, videos and the backend stay untouched
  if (request.method !== 'GET' || url.origin !== self.location.origin || request.headers.has('range')) return;
  if (/^/(wp-admin|wp-login)/.test(url.pathname)) return;

  // Program and exhibitor data: network first, offline the last version
  if (//wp-json/(event-calendar|event-exhibitor)/v1//.test(url.pathname)) {
    url.searchParams.delete('t');
    url.searchParams.delete('_t');
    var key = url.toString();
    event.respondWith(fetch(request).then(function (response) {
      return save(key, response);
    }).catch(function () {
      return caches.match(key, { ignoreVary: true }).then(function (hit) {
        return hit || caches.match(key, { ignoreSearch: true, ignoreVary: true });
      }).then(function (hit) {
        if (hit) return hit;
        return url.pathname.indexOf('/event-calendar/') !== -1
          ? new Response('[]', { status: 200, headers: { 'Content-Type': 'application/json' } })
          : Response.error();
      });
    }));
    return;
  }

  // Scripts, styles and images: instantly from storage, renewed in the background
  if (/^/(wp-content|wp-includes)//.test(url.pathname)) {
    event.respondWith(caches.match(request, { ignoreVary: true }).then(function (hit) {
      var network = fetch(request).then(function (response) { return save(request, response); });
      if (!hit) return network;
      event.waitUntil(network.catch(function () {}));
      return hit;
    }));
    return;
  }

  // Full-screen pages: network first, offline the last version or the note
  if (request.mode === 'navigate') {
    var isAppPage = /[?&](ec|eem)_/.test(url.search);
    event.respondWith(fetch(request).then(function (response) {
      return isAppPage ? save(request, response) : response;
    }).catch(function () {
      return caches.match(request, { ignoreVary: true }).then(function (hit) {
        return hit || caches.match(OFFLINE_PAGE);
      });
    }));
  }
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>No connection right now</title>
</head>
<body style="font-family: system-ui, sans-serif; text-align: center; padding: 3rem 1rem;">
  <h1>No connection right now</h1>
  <p>This page has not been opened yet. Pages you have already visited keep working.</p>
  <button onclick="location.reload()">Try again</button>
</body>
</html>

<?php
/**
 * Plugin Name: Event App (PWA)
 */
add_action( 'wp_head', function () {
  echo '<link rel="manifest" href="/manifest.json">' . "
";
  echo '<meta name="theme-color" content="#f76b15">' . "
";
  echo '<link rel="apple-touch-icon" href="/app-icons/icon-192.png">' . "
";
} );

add_action( 'wp_footer', function () {
  echo "<script>if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); }</script>
";
} );