Я хочу, чтобы на моем веб-сайте отображалась определенная страница, уведомляющая их о том, что они отключены, если пользовательское устройство не подключено к Интернету. - PullRequest
Новая
       3

Я хочу, чтобы на моем веб-сайте отображалась определенная страница, уведомляющая их о том, что они отключены, если пользовательское устройство не подключено к Интернету.

0 голосов
/ 18 апреля 2019

Я разработал html5-страницу, которую хочу отображать людям, которые посещают мой веб-сайт, когда у них нет подключения к Интернету на их устройстве.Например, www.sweetwater.com

У меня подготовлена ​​веб-страница, я просто хочу знать, что с ней делать и где ее разместить, чтобы она вызывалась, когда у пользователя нет подключения к Интернету 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="Group, KSE, Media, Pro, Content, distribution, net, Entertainment, KSE FC,Restaurant Klem, Lloyd, Mwenya">
<meta name="Description" content="Group KSE">
<meta name="author" content="Klem Lloyd Mwenya">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Device Offline</title>

<link href="css/landing.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Abel|Montserrat|Patua+One" rel="stylesheet">

</head>
<!-------------------Widgets title icon--------------------->
<link href="img/group_kse_logo(tight_frames).png" rel="shortcut icon" type="image/x-icon" />

<body>
    <div class="navRibbon">

    </div>
    <div class="offlineWrapper">
        <header>
            <h1>Group KSE</h1>
            <div class="offlineBanner">
                <h3>We Aim to Serve You Better, Everytime!</h3> 
                <h4>Experience Website User Interfaces that interact intuitively with you as a person and your emotions!</h4>
            </div>                  
        </header>
        <h2>Oops!!</h2>
        <h3 class="offlineCaution">It appears that you're offline!! <br> Check your internet connection...</h3>
        <div class="offlineLogo">
            <img src="img/group_kse_logo(tight_frames).png" alt="Group KSE Logo" />
        </div>

    </div>
    <footer class="ulukasa">
      <div id="container">
          <a href="#" id="copyright"></a>
          <p class="text-center">&copy; 2019</p>
           <p class="text-center">Group KSE</p>
             <p class="text-center">All rights reserved</p>     
      </div>

      <!-------------------------Visitor Counter ------------------------------------->



    </footer>
</body>
</html>


//And here is my css3 code:

/*---------------- Offline Notifier Page --------------*/
.navRibbon {
    width: 100%;
    height: 45px;
    background-color: #2F2C2C;
    border: 1px solid white;
    margin: 0 0 2px;
}
.offlineWrapper {
    width: 80%;
    margin: auto;
    text-align: center;
}
header {
    background: url(../img/bubble-clean-clear.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 200px;
    margin: 0 auto 40px;
    padding: 10px 0 0;
    box-shadow: -3px 2px 20px 0 black;
}
.offlineBanner {

}
header>h1 {
    font-size: 50px;
    color: greenyellow;
    text-shadow: -3px 3px 7px black;    
    margin: 10px auto;
}
header>.offlineBanner {
    width: 70%;
    margin: auto;
    padding: 10px;
    background-color: #5F3E8F;
    opacity: .7;
}
header>.offlineBanner>h3 {
    color: #fff;
    line-height: 24px;
}
header>.offlineBanner>h4  {
    color: yellow;
    line-height: 18px;
}
.offlineWrapper>h2 {
    font-size: 42px;
}
.offlineWrapper>.offlineLogo {
    width: 45%;
    margin: 0 auto 50px;
}
.offlineWrapper>.offlineLogo img {
    width: 100%;
}
.offlineWrapper>.offlineCaution {
    background-color: #9E2022;
    color: aliceblue;
    padding: 8px;
    width: 40%;
    margin: 20px auto 40px;
    line-height: 33px;
    font-size: 18px;
}

Я не сделал шаг, так как не знаю, как на данный момент знать, как, но как только я узнаю, я ожидаю, что страница отобразится, когда у устройства нет интернета, и обычная целевая страница сайта, еслиесть подключение к интернету.

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

Вы можете сделать это с помощью JavaScript-решений.

  1. API информации о сети
  2. Ajax Call
  3. Сервисный работник
  4. манифест кэша

Вы можете попробовать реализовать API информации о сети с MDN , но это не поддерживает все браузеры. Таким образом, в аварийном режиме вы можете периодически вызывать один JSON-файл через Ajax и проверять наличие ошибок, которые описаны здесь

Вы также можете реализовать Service worker вместе с ajax, поэтому если автономный ajax вернет предопределенный json с недоступной сетью, которую вы можете обработать в своем JavaScript.

манифест кэша устарел, поэтому не используйте его.

0 голосов
/ 23 апреля 2019

Вы можете попытаться отправить XML-запрос HttpRequest на сервер через регулярные промежутки времени, и если сервер не отвечает, вы знаете, что нет подключения к Интернету. 

<script>
setInterval(function(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status != 200) {
            document.getElementByID("normalContent").style.display = "none";
            document.getElementByID("offlineContent").style.display = "block";
        } else if (this.readyState == 4 && this.status == 200) {
            document.getElementByID("normalContent").style.display = "block";
            document.getElementByID("offlineContent").style.display = "none";
        }
    };
    xhttp.open("GET", "yourpage.php", true);
    //                      ^
    // You also need to create an empty php file to send the request to.
    // Name the php file whatever you want and make sure you reference it in this 
    // script
    xhttp.send();
}, 1000); // <-- Request sent every second (1000 milliseconds)
</script>

Этот сценарий попытается отправить XMLHTTP REQUEST для 'yourpage.php' каждую секунду, и если он получает ответ (несмотря на то, что он пуст), он не изменит веб-сайт, но как только он запросит ответ, а сервер не ответит (что означает отсутствие подключения к Интернету)), он запускает указанный код.

Вот пример страницы, которая говорит вам, если вы подключены к Интернету или нет: http://filestack.rf.gd/test/

Поскольку вы не можете загрузить другую веб-страницу безДля подключения к Интернету вам также нужно будет обернуть обычный и автономный контент в промежутки (один с id = "normalContent" и один с id = "offlineContent") и разместить их на одной странице.Сначала используйте css, чтобы скрыть автономный контент, и код javascript будет автоматически переключаться между двумя диапазонами.

Вы также можете изменить тег заголовка, добавив следующий javascript: document.getElementsByTagName("title")[0].innerHTML = "whatever title you want";.

Если вы не знакомы с javascript, я рекомендую вам изучить его по https://www.w3schools.com/js/js_intro.asp, а затем изучить jQuery по адресу https://www.w3schools.com/jquery/jquery_intro.asp

NOTE

JQuery isне требуется, но помогает упростить код JavaScript

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...