loko/streetup/controls/templates/controls/controls_install_mobile.html
2026-07-22 14:48:40 +02:00

81 lines
No EOL
3.2 KiB
HTML

{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% translate "Installer l'application pour les contrôles" %}</title>
<link rel="manifest" href="{% static 'common/controls.webmanifest' %}" crossorigin="use-credentials">
<!-- Bootstrap 5.3.3 (local) -->
<link href="{% static 'common/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<h1 class="mb-4">{% translate "StreetUp - Contrôles" %}</h1>
<p class="lead">{% translate "Pour une meilleure expérience, installez l'application sur votre appareil." %}</p>
<div id="installContainer" class="d-none">
<button id="installButton" class="btn btn-primary btn-lg">{% translate "Installer l'application" %}</button>
</div>
<div id="unsupported" class="d-none">
<p class="text-danger">{% translate "Désolé, votre navigateur ne supporte pas l'installation d'applications." %}</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5.3.3 bundle (includes Popper) (local) -->
<script src="{% static 'common/bootstrap.bundle.min.js' %}"></script>
<script>
if ("serviceWorker" in navigator) {
// Servi depuis /mobile/controls/service-worker.js pour un scope correct sur /mobile/controls/
navigator.serviceWorker.register('/mobile/controls/service-worker.js')
.then(reg => console.log("Service Worker registered", reg))
.catch(err => console.log("Service Worker failed", err));
}
</script>
<script>
const installContainer = document.getElementById('installContainer');
const installButton = document.getElementById('installButton');
const unsupported = document.getElementById('unsupported');
// Fonction pour vérifier si l'installation est possible
function isPWAInstallSupported() {
return 'BeforeInstallPromptEvent' in window;
}
// Gérer l'installation
if (isPWAInstallSupported()) {
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
installContainer.classList.remove('d-none');
});
installButton.addEventListener('click', async () => {
if (deferredPrompt) {
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
if (outcome === 'accepted') {
console.log('L\'utilisateur a accepté l\'installation');
}
installContainer.classList.add('d-none');
deferredPrompt = null;
}
});
} else {
// Afficher un message si l'installation n'est pas supportée
unsupported.classList.remove('d-none');
}
</script>
</body>
</html>