Một trong những tính năng của JavaScript là khả năng phát hiện xem 1 trình duyệt được cung cấp là online hoặc offline. Chức năng này được tận dụng một cách dễ dàng thông qua đối tượng navigator được cung cấp bởi trình duyệt của bạn nhưng nếu bạn không phải là 1 fan viết ra những đoạn code javascript của chính mình thì bạn có thể sử dụng thư viện offline.js. 1 thư viện JavaScript độc lập được xây dựng để xử lý các vấn đề liên quan đến kết nối. Nó không chỉ cảnh báo người khi khi họ mất kết nối đến website của bạn mà còn tự động lưu lại tất cả các yêu cầu AJAX được gửi đi và khôi phục lại những yêu cầu này khi có kết nối.

I. Tại sao bạn nên chọn offline.js ?

• offline.js là 1 thư viện javascript rất nhẹ.
• Được hỗ trợ bởi các trình duyệt hiện đại như Chrome, Firefox, IE(từ phiên bản 8 trở lên).
• Tự động phát hiện và đưa ra các cảnh báo khi trình duyệt của bạn mất kết nối internet.
• Cung cấp nhiều style CSS và ngôn ngữ để bạn có thể dễ dàng chọn lựa 1 style phù hợp nhất cho mình.
• 1 trong những tính năng nổi bật mà offline.js là việc giám sát các AJAX request. Tính năng này cho phép bạn có thể phát hiện những vấn đề về kết nối ngay cả khi bạn không làm mới trang. Để làm được điều này, offline.js thực hiện 1 cách rất đơn giản đó là nó sẽ gửi 1 HTTP request đến 1 file đặc biệt một cách thường xuyên lên máy chủ của bạn trong 1 khoảng thời gian nhất định. Nếu không thể hoàn thành được yêu cầu này thì nó sẽ tự động đưa ra các phản ứng phù hợp. Mặc định file được lấy ra là favicon.ico bởi vì hầu hết các website đều chứa 1 file favicon trong thư mục chính.

II. Install offline.js

1. Dùng npm

npm install offline-js

2. Tải trực tiếp file offline.js và các theme

• Bạn có thể tải trực tiếp các file offline.js và các theme CSS tại đây

III. Các tùy chọn mà offline.js cung cấp

• Dưới đây là 1 danh sách các tùy chọn mà chúng ta có thể sử dụng thông qua việc hàm thiết lập Offline.options.

{
  // Should we check the connection status immediatly on page load.
  checkOnLoad: false,

  // Should we monitor AJAX requests to help decide if we have a connection.
  interceptRequests: true,

  // Should we automatically retest periodically when the connection is down (set to false to disable).
  reconnect: {
    // How many seconds should we wait before rechecking.
    initialDelay: 3,

    // How long should we wait between retries.
    delay: (1.5 * last delay, capped at 1 hour)
  },

  // Should we store and attempt to remake requests which fail while the connection is down.
  requests: true,

  // Should we show a snake game while the connection is down to keep the user entertained?
  // It's not included in the normal build, you should bring in js/snake.js in addition to
  // offline.min.js.
  game: false
}

• Chúng ta sẽ lấy 1 ví dụ để sử dụng các tùy chọn mà offline.js cung cấp. Ở đây tôi sẽ lựa chọn tham số game. Các bạn sẽ thắc mắc là tại sao tôi lại chọn tham số này phải không ? Rất đơn giản đây là 1 tính năng rất thú vị mà offline.js cung cấp. Nó cho phép những người dùng vào các website của bạn có thể chơi 1 game khi trình đang là offline. Rất thú vị phải không nào ? Hãy thêm đoạn code sau vào script của bạn và ngắt các kết nối mạng để xem kết quả nha.

Offline.options = { game: true };

III. Properties

IV. Các sự kiện trong offline.js

1. Thêm sự kiện

• Chúng ta có thể thêm các sự kiện để xử lý thông qua Offline.on(event, handler, context).

2. Loại bỏ các sự kiện

• Chúng ta có thể loại bỏ thông qua hàm Offline.off(event, handler)

V. Cách sử dụng

<script>
var run = function(){
  var req = new XMLHttpRequest();
  req.timeout = 5000;
  req.open('GET', 'http://localhost:8888/walter/0', true);
  req.send();
}

setInterval(run, 3000);
</script>

Hy vọng qua bài viết này sẽ giúp ích cho các bạn. Tài liệu tham khảo Offline.js