129 lines
3.9 KiB
JavaScript
129 lines
3.9 KiB
JavaScript
/**
|
||
* KGV PWA – Service Worker Registrierung & Install-Prompt
|
||
*/
|
||
|
||
( function () {
|
||
'use strict';
|
||
|
||
var cfg = window.kgvPwaConfig || {};
|
||
var swUrl = cfg.swUrl || '/sw.js';
|
||
var scope = cfg.scope || '/';
|
||
|
||
if ( cfg.requireLogin && ! cfg.isLoggedIn ) {
|
||
return;
|
||
}
|
||
|
||
// ------------------------------------------------------------------
|
||
// 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">×</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 || '' );
|
||
}
|
||
|
||
} )();
|