Tự động detect user internet connection bằng javascript offline.js

Offline.js là một thư việc dùng để xác định user có đang kết nối mạng hay không. Đây là hoạt động của offline.js:

1. Phụ thuộc và ajax request. Lúc nào có ajax request fail offline.js sẽ request tới url của một image hoặc một resource nào đó.
2. Nếu request tới image success có nghĩa là kết nối vẫn tồn tại.
3. Nếu request fail có nghĩa không kết nối được mạng.
4. Request sẽ được lặp lại từ bước 1 đến bước 4.

Cách cài đặt

1. Javascript libray

   Include javascript library vào trong project. Link download tại đây offline.js

2. Chọn theme

   Offline.js đã cung cấp một số theme rất đẹp và nếu bạn không cần dùng bạn có thể bỏ qua bước này. vd:

   
   
   

   Bạn có thể tìm hiểu thêm về theme tại đây theme

3. Chọn ngôn ngữ
   Bạn có thể chọn một ngôn ngữ trong danh sách ngôn ngữ

Sử dụng

Mình sẽ lấy ví dụ về việc gọi check connection liên tục 10s một lần và kết quả sẽ như ảnh bên dưới.

function checkConnection(){
  $.ajax({
    url: "/check_connection"
  }).always(function(){
    setTimeout(function(){
      self.checkConnection();
    }, 10000);
  })
}

Tài liệu tham khảo

• https://github.hubspot.com/offline/