Check If Is Offline Using AJAX – offline.js

Preview:

Description:

offline.js is a small JavaScript utility that tracks online and offline state using an AJAX request and notifies you when the network goes offline.

How to use it:

Import the offline.js library into the HTML document.

<script src="/js/offline.js"></script>

Create a new offline object and customize the notification message & timeout in milliseconds.

new Offline({
    notify: 'Oops! You are now offline',
    timeout: 5000,
});

Customize the styles of the offline notification.

.offline-blocker {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: #fff;
    opacity: 0.8;
    text-align: center;
}