124 lines
4.0 KiB
HTML
124 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
|
|
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)" />
|
|
<title>Загрузка… — НаСвязи</title>
|
|
<link rel="stylesheet" href="/css/preloader.css" />
|
|
</head>
|
|
<body>
|
|
<div id="loader">
|
|
<div id="offline-message" style="display: none;">
|
|
<h1>Нет подключения к интернету</h1>
|
|
<p>Проверьте подключение к сети или попробуйте ещё раз.</p>
|
|
<button id="retry-button">Попробовать снова</button>
|
|
</div>
|
|
<div class="spinner" style="display: none;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const offlineMessage = document.getElementById('offline-message');
|
|
const spinner = document.querySelector('.spinner');
|
|
const retryButton = document.getElementById('retry-button');
|
|
|
|
function setTitle(message) {
|
|
document.title = `${message} — НаСвязи`;
|
|
}
|
|
|
|
function showOfflineMessage() {
|
|
offlineMessage.style.display = 'block';
|
|
spinner.style.display = 'none';
|
|
setTitle('Проблемы с подключением');
|
|
}
|
|
|
|
function showLoadingMessage() {
|
|
offlineMessage.style.display = 'none';
|
|
spinner.style.display = 'block';
|
|
setTitle('Загрузка…');
|
|
}
|
|
|
|
async function retryConnection() {
|
|
showLoadingMessage();
|
|
|
|
try {
|
|
const response = await fetch('/', { method: 'HEAD' });
|
|
if (response.ok) {
|
|
location.reload(); // Перезагружаем страницу при успешном подключении
|
|
} else {
|
|
throw new Error('Сервер не отвечает');
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
showOfflineMessage();
|
|
}
|
|
}
|
|
|
|
function handleOnlineStatus() {
|
|
location.reload(); // Перезагрузка при восстановлении сети
|
|
}
|
|
|
|
async function checkConnectionWithServiceWorker() {
|
|
if (!navigator.onLine) {
|
|
return false;
|
|
}
|
|
if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
|
|
return new Promise((resolve) => {
|
|
const messageChannel = new MessageChannel();
|
|
|
|
// Обрабатываем ответ от сервис-воркера
|
|
messageChannel.port1.onmessage = (event) => {
|
|
resolve(event.data.online);
|
|
};
|
|
|
|
// Посылаем сообщение в сервис-воркер
|
|
navigator.serviceWorker.controller.postMessage(
|
|
{ type: 'CHECK_ONLINE_STATUS' },
|
|
[messageChannel.port2]
|
|
);
|
|
});
|
|
} else {
|
|
// Если сервис-воркер недоступен, возвращаем состояние navigator.onLine
|
|
return navigator.onLine;
|
|
}
|
|
}
|
|
|
|
checkConnectionWithServiceWorker().then((isOnline) => {
|
|
if (!isOnline) showOfflineMessage();
|
|
});
|
|
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.onmessage = (event) => {
|
|
console.log('onmessage', event.data && event.data.type);
|
|
if (event.data && event.data.type === 'MAIN_PAGE_READY') {
|
|
location.reload();
|
|
}
|
|
|
|
if (event.data && event.data.type === 'NETWORK_ERROR') {
|
|
showOfflineMessage();
|
|
}
|
|
};
|
|
}
|
|
|
|
retryButton.addEventListener('click', retryConnection);
|
|
window.addEventListener('online', handleOnlineStatus);
|
|
addEventListener("offline", showOfflineMessage);
|
|
|
|
showLoadingMessage();
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (!navigator.onLine) {
|
|
return;
|
|
}
|
|
if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
|
|
navigator.serviceWorker.controller.postMessage({ type: 'UPDATE_STATIC_ASSETS' });
|
|
console.log('Message sent to Service Worker: UPDATE_STATIC_ASSETS');
|
|
} else {
|
|
console.warn('Service Worker is not available or not controlling this page.');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|