rename offline to preloader

2024-12-08 22:43:22 +02:00
parent 9748a3c1d2
commit 49dc14990f
3 changed files with 5 additions and 5 deletions
@@ -0,0 +1,123 @@
+<!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>