Hinweis: Der Inhalt dieses Artikels richtet sich an Entwickler bzw. Webmaster mit HTML- und ggf. JavaScript-Kenntnissen.
Ausgangssituation:
Sie bieten ein Flash-Magazin an – egal, ob bei 3DZ gehostet, oder als Web-Export – was mit einer Digital Only”-Lizenz erstellt wurde. Da aber die Flash-Unterstützung immer schwieriger wird, wollen Sie einen Fallback zur HTML5-Version des Magazins anbieten.
Dieser Fallback soll global, d.h. auf Desktop- und Mobilgeräten funktionieren.
Lösung
1) Funktionsweise
Legen Sie die HTML-Datei auf Ihren Server und verlinken Sie diese entsprechend. Oder passen Sie das Skript in Ihre eigenen HTML-/ PHP-Dateien etc. entsprechend an.
Beispiel-URL: https://www.beispielwebsite.de/deeplink.html
Ruft der Leser diese URL nun im Browser auf, wird geprüft, ob Flash aktiviert ist für den verwendeten Browser, falls JA, wird die Flash-Version des Magazins geladen. Wenn Flash nicht zur Verfügung steht, wird die HTML5-Version des Magazins geladen.
2) Einsatz: Desktop + Mobil
Da Flash auf mobilen Geräten sowieso nicht zur Verfügung steht, wird so immer direkt die HTML5-Version geladen.
Desktop-Geräte, die noch über Flash verfügen, können die Flash-Version des Magazins somit aber noch anzeigen.
Für eine Übergangszeit (der Hersteller Adobe hat die Entwicklung von Flash eingestellt und fährt die Unterstützung bis 2020 suksessive zurück!) können Sie so sehr elegent Ihren Lesern die bestmögliche Version Ihres Magazins anbieten.
3) Skript und HTML-Beispieldatei:
Hier finden Sie das komplette Fallback-Skript als vollständige HTML-Datei zum Download.
Sie müssen dabei die Werte anpassen URL Flash-‐Magazin sowie URL HTML5--Magazin → ersetzen Sie diese Platzhalter einfach durch die vollständige URL, inkl. http:// bzw. https://
Sie können auch den Beispiel-Download der obigen .html-Datei verwenden – den Dateinamen, die Platzhalter und sonstige Werte können Sie natürlich ändern. Änderungen des Fallback-Skriptes erfolgen auf eigenes Risiko!
<html>
<head>
<script type="text/javascript">
function startMag() {
// Configuration
var FlashMag = 'URL Flash-‐Magazin';
var HTML5Mag = 'URL HTML5--Magazin';
var userAgent = '';
var deepLink = '';
// Detect user agent
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
userAgent = 'iOS';
} else if (navigator.userAgent.match(/Android/i)) {
userAgent = 'Android';
}
// check if the browser can handle flash
var hasFlash = false;
try {
var flashObject = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (flashObject) {
hasFlash = true;
}
} catch (e) {
if (navigator.mimeTypes
&& navigator.mimeTypes['application/x-shockwave-flash'] != undefined
&& navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
hasFlash = true;
}
}
// Check userAgent
if (userAgent === 'iOS' && userAgent !== '') {
deepLink = HTML5Mag;
// Try to open the HTML5 link
window.location = deepLink;
} else if (userAgent === 'Android' && userAgent !== '') {
deepLink = HTML5Mag;
// Try to open the HTML5 link
window.location = deepLink;
} else if (!hasFlash) {
// Flash can not be handled so we open the html magazine
window.location = HTML5Mag;
} else if (FlashMag !== '') {
deepLink = FlashMag;
// Other OS
window.location = deepLink;
} else {
// Error
}
}
</script>
</head>
<body onload="startMag()">
</body>
</html>