Initial commit: KGV-PWA plugin with manifest, service worker and install prompt

2026-04-20 21:12:48 +02:00
commit e6930011ab
5 changed files with 891 additions and 0 deletions
--- a/assets/js/pwa-register.js
+++ b/assets/js/pwa-register.js
@@ -0,0 +1,124 @@
+/**
+ * KGV PWA – Service Worker Registrierung & Install-Prompt
+ */
+
+( function () {
+	'use strict';
+
+	var cfg   = window.kgvPwaConfig || {};
+	var swUrl = cfg.swUrl || '/sw.js';
+	var scope = cfg.scope || '/';
+
+	// ------------------------------------------------------------------
+	// Service Worker registrieren
+	// ------------------------------------------------------------------
+	if ( 'serviceWorker' in navigator ) {
+		window.addEventListener( 'load', function () {
+			navigator.serviceWorker
+				.register( swUrl, { scope: scope } )
+				.catch( function ( err ) {
+					if ( window.console && console.warn ) {
+						console.warn( 'KGV PWA: Service Worker konnte nicht registriert werden.', err );
+					}
+				} );
+		} );
+	}
+
+	// ------------------------------------------------------------------
+	// Install-Banner
+	// ------------------------------------------------------------------
+	var deferredPrompt = null;
+	var banner         = null;
+
+	/**
+	 * Banner-Element erzeugen und in den DOM einhängen.
+	 */
+	function createBanner() {
+		banner = document.createElement( 'div' );
+		banner.id              = 'kgv-pwa-install-banner';
+		banner.setAttribute( 'role', 'region' );
+		banner.setAttribute( 'aria-label', 'App installieren' );
+		banner.innerHTML =
+			'<span class="kgv-pwa-banner__text">Diese Seite als App installieren</span>' +
+			'<button class="kgv-pwa-banner__install" type="button">Installieren</button>' +
+			'<button class="kgv-pwa-banner__close" type="button" aria-label="Schließen">&times;</button>';
+
+		document.body.appendChild( banner );
+
+		banner.querySelector( '.kgv-pwa-banner__install' ).addEventListener( 'click', triggerInstall );
+		banner.querySelector( '.kgv-pwa-banner__close' ).addEventListener( 'click', dismissBanner );
+	}
+
+	function showBanner() {
+		if ( ! banner ) {
+			createBanner();
+		}
+		banner.classList.add( 'kgv-pwa-banner--visible' );
+	}
+
+	function dismissBanner() {
+		if ( banner ) {
+			banner.classList.remove( 'kgv-pwa-banner--visible' );
+		}
+		// Nicht mehr anzeigen bis zum nächsten Tag
+		try {
+			sessionStorage.setItem( 'kgv_pwa_install_dismissed', '1' );
+		} catch ( e ) {}
+	}
+
+	/**
+	 * Nativen Browser-Installationsdialog öffnen.
+	 * Kann auch von einem beliebigen Button auf der Seite aufgerufen werden:
+	 *   document.dispatchEvent( new CustomEvent('kgv-pwa-install') );
+	 */
+	function triggerInstall() {
+		if ( ! deferredPrompt ) {
+			if ( isIos() ) {
+				window.alert( cfg.iosInstallNotice || 'Auf iPhone/iPad: Teilen > Zum Home-Bildschirm.' );
+			}
+			return;
+		}
+		deferredPrompt.prompt();
+		deferredPrompt.userChoice.then( function ( result ) {
+			deferredPrompt = null;
+			dismissBanner();
+			if ( window.console && console.info ) {
+				console.info( 'KGV PWA: Installationsentscheidung:', result.outcome );
+			}
+		} );
+	}
+
+	// Externer Aufruf via Custom Event ermöglichen
+	document.addEventListener( 'kgv-pwa-install', triggerInstall );
+
+	// ------------------------------------------------------------------
+	// beforeinstallprompt – Browser signalisiert Installierbarkeit
+	// ------------------------------------------------------------------
+	window.addEventListener( 'beforeinstallprompt', function ( e ) {
+		// Standard-Mini-Infobar des Browsers unterdrücken
+		e.preventDefault();
+		deferredPrompt = e;
+
+		// Banner nicht zeigen, wenn der Nutzer ihn in dieser Sitzung bereits weggeklickt hat
+		try {
+			if ( sessionStorage.getItem( 'kgv_pwa_install_dismissed' ) ) {
+				return;
+			}
+		} catch ( err ) {}
+
+		showBanner();
+	} );
+
+	// ------------------------------------------------------------------
+	// appinstalled – nach erfolgreicher Installation Banner verbergen
+	// ------------------------------------------------------------------
+	window.addEventListener( 'appinstalled', function () {
+		deferredPrompt = null;
+		dismissBanner();
+	} );
+
+	function isIos() {
+		return /iphone|ipad|ipod/i.test( window.navigator.userAgent || '' );
+	}
+
+} )();