0

I have designed a html5 page that I want to display to the people who visit my website when they don't have internet connection on their device. example is www.sweetwater.com

I have my webpage prepared, I just want to know what to do with it and where to put it so it is called when the user has no internet connection

<!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;
}

I haven't taken the step as I am unaware on the know how as at now, but once I learn I expect to have the page displaying when the device has no internet and the normal website landing page if there is internet connection.

Klem Lloyd Mwenya
  • 388
  • 1
  • 6
  • 17
  • You can't.⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​⁠​ – Mr Lister Apr 18 '19 at 06:28
  • It's not CSS specific, but you could use `service workers` and detect if the user is offline. At that point, you could load your offline experience. – Jack Apr 18 '19 at 06:56

2 Answers2

0

You could try sending an XML HttpRequest to the server at regular intervals and if the server fails to respond, you know that there is no internet connection.

<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>

This script will attempt to send an XML HTTP REQUEST to 'yourpage.php' every second and if it receives a response (despite it being empty), it will not change the website, but as soon as it requests a response and the server doesn't respond (signifying no internet connection), it runs the specified code.

Here is an example page which tells you if your connected to the internet or not: http://filestack.rf.gd/test/

Since you can't load another webpage without an internet connection, you will also have to wrap your normal content and the offline content in spans (one with id = "normalContent" and one with id = "offlineContent") and place them on the same page. Use css to hide the offline content at first and the javascript code will automatically switch between the two spans.

You can also change the title tag by adding the following javascript: document.getElementsByTagName("title")[0].innerHTML = "whatever title you want";.

If you are not familiar with javascript, I recommend you learn it at https://www.w3schools.com/js/js_intro.asp and then later learn jQuery at https://www.w3schools.com/jquery/jquery_intro.asp

NOTE

JQuery is not required but helps to simplify javascript code

Daemon Beast
  • 2,794
  • 3
  • 12
  • 29
0

You can do this with JavaScript solutions.

  1. Network Information API
  2. Ajax Call
  3. Service Worker
  4. cache manifest

You can try to implement Network Information API from MDN, but this does not support all browser. So, In fallback you can periodically call one json file through Ajax and check for error, which described here

You can also implement Service worker along with ajax, so if offline ajax will return predefined json with network not available which you can handle in you JavaScript.

cache manifest is deprecated so dont use it.

Mithun Mandal
  • 119
  • 6