Vollbildseiten als PWA einrichten

{
  "name": "Seitenwind Convention 2026",
  "short_name": "Seitenwind",
  "lang": "de",
  "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" }
  ]
}

// Bei jeder Änderung an dieser Datei die Nummer erhöhen
var CACHE_NAME = 'event-app-v1';
var OFFLINE_PAGE = '/offline.html';
// Seiten, die schon bei der Installation offline bereitliegen
var START_PAGES = ['/?ec_plan&ec_app=1', '/?ec_speakers&ec_app=1'];

// Eine Weiterleitung (etwa zur eigenen Startseite) darf nicht gespeichert bleiben,
// der Browser würde sie offline ablehnen
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);

  // Formulare, fremde Adressen, Videos und das Backend bleiben unberührt
  if (request.method !== 'GET' || url.origin !== self.location.origin || request.headers.has('range')) return;
  if (/^/(wp-admin|wp-login)/.test(url.pathname)) return;

  // Programm- und Ausstellerdaten: erst das Netz, offline die letzte Fassung
  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;
  }

  // Skripte, Stile und Bilder: sofort aus dem Speicher, im Hintergrund erneuern
  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;
  }

  // Vollbildseiten: erst das Netz, offline die letzte Fassung oder der Hinweis
  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="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gerade keine Verbindung</title>
</head>
<body style="font-family: system-ui, sans-serif; text-align: center; padding: 3rem 1rem;">
  <h1>Gerade keine Verbindung</h1>
  <p>Diese Seite war noch nicht geöffnet. Bereits besuchte Seiten funktionieren weiter.</p>
  <button onclick="location.reload()">Erneut versuchen</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>
";
} );