Hallo ich hoffe ich hoffe mal ich habe hier die richtige Kategorie gewählt, eine andere schien mir hier nicht passend.
Ich habe folgendes Problem. Meine Webanwendung soll auf mobilen Geräten als Webapp ausgeführt werden. Unter Android ist dies kein Problem und funktioniert soweit sehr gut mittels eines einzigen meta-Tags.
Unter iOS scheint sich das Ganze etwas schwieriger zu gestalten. Immerhin habe ich es hinbekommen mittels dieser meta-Tags die Webanwendung im "standalone" Modus im Safari zum Laufen zu bekommen.
Das Problem was zunächst durch diese meta-Tags entstand war, dass sobald ein Link angeklickt wurde, der "standalone" Modus verlassen und die Webanwendung wieder im Safari ausgeführt wurde.
Soweit so gut, Google ein wenig befragt und ein kleines Java-Script gefunden und eingesetzt, welches genau dieses Problem beheben soll.
Das Script funktioniert und erfüllt genau seinen Zweck mit einer Ausnahme:
Ich nutze Bootstrap 4 und Modals. Genau diese werden jetzt aber nicht mehr angezeigt.
Darauf hin habe ich eine kleine Änderung im Java-Script vorgenommen (&& !'data-modal' in noddy).
Diese Änderung führt zum Erfolg, aber auch dies wieder nur bedingt. Die Modals werden wieder geladen und angezeigt, aber beim Ausführen von Links wird der "standalone" Modus wieder verlassen.
Hat jemand eine Idee wie ich meine Webanwendung auch unter iOS einwandfrei zum laufen bekomme?
Vielen Dank vorab für Eure Mühe.
Ich habe folgendes Problem. Meine Webanwendung soll auf mobilen Geräten als Webapp ausgeführt werden. Unter Android ist dies kein Problem und funktioniert soweit sehr gut mittels eines einzigen meta-Tags.
HTML-Code:
<meta name="mobile-web-app-capable" content="yes">
Unter iOS scheint sich das Ganze etwas schwieriger zu gestalten. Immerhin habe ich es hinbekommen mittels dieser meta-Tags die Webanwendung im "standalone" Modus im Safari zum Laufen zu bekommen.
HTML-Code:
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="ApronFra"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
Soweit so gut, Google ein wenig befragt und ein kleines Java-Script gefunden und eingesetzt, welches genau dieses Problem beheben soll.
HTML-Code:
// Mobile Safari in standalone mode if(("standalone" in window.navigator) && window.navigator.standalone){ // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { noddy = noddy.parentNode; } if('href' in noddy && !'data-modal' in noddy && noddy.href.indexOf('https') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)) { alert(noddy); event.preventDefault(); document.location.href = noddy.href; } },false); }
Ich nutze Bootstrap 4 und Modals. Genau diese werden jetzt aber nicht mehr angezeigt.
Darauf hin habe ich eine kleine Änderung im Java-Script vorgenommen (&& !'data-modal' in noddy).
HTML-Code:
// Mobile Safari in standalone mode if(("standalone" in window.navigator) && window.navigator.standalone){ // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { noddy = noddy.parentNode; } if('href' in noddy && !'data-modal' in noddy && noddy.href.indexOf('https') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)) { alert(noddy); event.preventDefault(); document.location.href = noddy.href; } },false); }
Diese Änderung führt zum Erfolg, aber auch dies wieder nur bedingt. Die Modals werden wieder geladen und angezeigt, aber beim Ausführen von Links wird der "standalone" Modus wieder verlassen.
Hat jemand eine Idee wie ich meine Webanwendung auch unter iOS einwandfrei zum laufen bekomme?
Vielen Dank vorab für Eure Mühe.
Kommentar