Giới thiệu tính năng Đồng bộ hóa dưới nền

Jake Archibald
Jake Archibald

Đồng bộ hoá ở chế độ nền là một API web mới cho phép bạn trì hoãn các thao tác cho đến khi người dùng có kết nối ổn định. Điều này đảm bảo rằng mọi nội dung mà người dùng muốn gửi đều được gửi đi.

Vấn đề

Internet là một nơi tuyệt vời để lãng phí thời gian. Nếu không lãng phí thời gian trên mạng, chúng ta sẽ không biết được rằng mèo không thích hoa, tắc kè hoa thích bong bóng hay Eric Bidelman của chính chúng ta là một anh hùng chơi gạt bóng vào cuối những năm 90.

Nhưng đôi khi, chúng ta không muốn lãng phí thời gian. Trải nghiệm người dùng mong muốn sẽ giống như:

  1. Điện thoại đang ở ngoài túi.
  2. Đạt được mục tiêu nhỏ.
  3. Phía sau điện thoại nằm trong túi.
  4. Tiếp tục cuộc sống.

Rất tiếc, trải nghiệm này thường bị gián đoạn do kết nối kém. Chúng ta đều đã từng trải qua. Bạn nhìn chằm chằm vào màn hình trắng hoặc một vòng quay và bạn biết rằng mình nên từ bỏ cuộc sống của mình và tiếp tục cuộc sống của mình, nhưng hãy chờ thêm 10 giây nữa để đề phòng trường hợp đó. Sau 10 giây đó? Miễn phí.

Nhưng tại sao bạn lại bỏ cuộc ngay bây giờ? Bạn đã đầu tư thời gian, vì vậy việc bước đi mà không lãng phí thời gian, vì vậy bạn tiếp tục chờ đợi. Đến đây, bạn muốn bỏ cuộc, nhưng bạn biết rằng giây phút bạn làm như vậy là giây phút trước khi mọi thứ tải xong nếu bạn chỉ cần đợi thêm một chút.

Trình chạy dịch vụ giải quyết phần tải trang bằng cách cho phép bạn phân phát nội dung từ bộ nhớ đệm. Nhưng còn khi trang cần gửi nội dung nào đó đến máy chủ thì sao?

Hiện tại, nếu người dùng nhấn vào "gửi" trên một tin nhắn, họ phải nhìn vào một vòng quay cho đến khi quá trình gửi hoàn tất. Nếu người dùng cố gắng thoát hoặc đóng thẻ, chúng ta sẽ sử dụng onbeforeunload để hiển thị một thông báo như "Không, tôi cần bạn nhìn vào vòng quay này thêm một chút nữa. Rất xin lỗi". Nếu người dùng không có kết nối, chúng tôi sẽ thông báo cho người dùng rằng "Rất tiếc, bạn phải quay lại sau và thử lại".

Đây là rác. Tính năng đồng bộ hoá ở chế độ nền giúp bạn làm việc hiệu quả hơn.

Giải pháp

Video sau đây giới thiệu Emojoy, một bản minh hoạ cuộc trò chuyện chỉ dành cho biểu tượng cảm xúc. Đây là một ứng dụng web tiến bộ và hoạt động ở chế độ ngoại tuyến. Ứng dụng sử dụng thông báo và thông báo đẩy, đồng thời đồng bộ hoá trong nền.

Nếu người dùng cố gắng gửi tin nhắn khi không có kết nối thì rất may, tin nhắn sẽ được gửi trong nền khi họ có kết nối.

Kể từ tháng 3 năm 2016, tính năng Đồng bộ hoá ở chế độ nền có trong Chrome phiên bản 49 trở lên. Bạn có thể xem hành động của tiện ích này bằng cách làm theo các bước dưới đây:

  1. Mở EmoJoy.
  2. Chuyển sang chế độ ngoại tuyến (bằng cách sử dụng chế độ trên máy bay hoặc đến thăm lồng Faraday tại địa phương).
  3. Nhập tin nhắn.
  4. Quay lại màn hình chính (không bắt buộc phải đóng thẻ hoặc trình duyệt).
  5. Kết nối mạng.
  6. Tin nhắn gửi ở chế độ nền!

Việc có thể gửi ở chế độ nền như thế này cũng giúp cải thiện hiệu suất rõ rệt. Ứng dụng không cần phải xử lý quá nhiều về việc gửi tin nhắn, vì vậy, ứng dụng có thể thêm tin nhắn vào đầu ra ngay lập tức.

Cách yêu cầu đồng bộ hoá ở chế độ nền

Trong kiểu web có thể mở rộng thực sự, đây là một tính năng cấp thấp cho phép bạn tự do làm những việc mình cần. Bạn yêu cầu một sự kiện được kích hoạt khi người dùng có kết nối, tức là ngay lập tức nếu người dùng đã có kết nối. Sau đó, bạn sẽ theo dõi sự kiện đó và làm bất cứ điều gì bạn cần làm.

Giống như thông báo đẩy, API này sử dụng service worker làm mục tiêu sự kiện, cho phép worker hoạt động khi trang không mở. Để bắt đầu, hãy đăng ký đồng bộ hoá từ một trang:

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
 ```

Then listen for the event in `/sw.js`:

```js
self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

Chỉ vậy thôi! Ở trên, doSomeStuff() sẽ trả về một lời hứa cho biết thành công/thất bại của bất kỳ việc gì nó đang cố gắng thực hiện. Nếu nó thành công thì quá trình đồng bộ hoá sẽ hoàn tất. Nếu không thành công, hệ thống sẽ lên lịch đồng bộ hoá lại. Các lần đồng bộ hoá thử lại cũng chờ kết nối và sử dụng thời gian đợi luỹ thừa.

Tên thẻ của quá trình đồng bộ hoá ('myFirstSync' trong ví dụ trên) phải là duy nhất cho một quá trình đồng bộ hoá nhất định. Nếu bạn đăng ký đồng bộ hoá bằng cùng một thẻ với một quá trình đồng bộ hoá đang chờ xử lý, thì quá trình đồng bộ hoá đó sẽ hợp nhất với quá trình đồng bộ hoá hiện có. Điều đó có nghĩa là bạn có thể đăng ký đồng bộ hoá "xoá hộp thư đến" mỗi khi người dùng gửi thư, nhưng nếu họ gửi 5 thư khi không có mạng, thì bạn sẽ chỉ nhận được một lần đồng bộ hoá khi họ có mạng. Nếu bạn muốn có 5 sự kiện đồng bộ hoá riêng biệt, chỉ cần sử dụng các thẻ riêng biệt!

Dưới đây là một bản minh hoạ đơn giản thực hiện tối thiểu; bản minh hoạ này sử dụng sự kiện đồng bộ hoá để hiển thị thông báo.

Tôi có thể sử dụng tính năng đồng bộ hoá ở chế độ nền để làm gì?

Tốt nhất là bạn nên sử dụng tính năng này để lên lịch gửi mọi dữ liệu mà bạn quan tâm sau khi trang ngừng hoạt động. Tin nhắn trò chuyện, email, nội dung cập nhật tài liệu, thay đổi về chế độ cài đặt, tải ảnh lên... bất cứ nội dung nào bạn muốn gửi đến máy chủ ngay cả khi người dùng rời khỏi hoặc đóng thẻ. Trang có thể lưu trữ các thông báo này trong bộ nhớ "hộp thư đi" trong indexedDB, sau đó trình chạy dịch vụ sẽ truy xuất và gửi các thông báo đó.

Tuy nhiên, bạn cũng có thể sử dụng phương thức này để tìm nạp các phần dữ liệu nhỏ...

Một bản minh hoạ khác!

Đây là bản minh hoạ wikipedia ngoại tuyến mà tôi đã tạo cho phần Tăng tốc tải trang. Kể từ đó, tôi đã thêm một số tính năng đồng bộ hoá ở chế độ nền vào ứng dụng.

Hãy thử tự làm điều này. Đảm bảo bạn đang sử dụng Chrome 49 trở lên rồi làm như sau:

  1. Chuyển đến một bài viết bất kỳ, có thể là Chrome.
  2. Chuyển sang chế độ ngoại tuyến (bằng cách sử dụng chế độ trên máy bay hoặc chuyển sang một nhà cung cấp dịch vụ di động tệ như tôi).
  3. Nhấp vào đường liên kết đến một bài viết khác.
  4. Bạn sẽ thấy thông báo không tải được trang (thông báo này cũng sẽ xuất hiện nếu trang chỉ mất một chút thời gian để tải).
  5. Đồng ý nhận thông báo.
  6. Đóng trình duyệt.
  7. Chuyển sang trực tuyến
  8. Bạn sẽ nhận được thông báo khi bài viết được tải xuống, lưu vào bộ nhớ đệm và sẵn sàng để xem!

Khi sử dụng mẫu này, người dùng có thể bỏ điện thoại vào túi và tiếp tục cuộc sống, biết rằng điện thoại sẽ thông báo cho họ khi tìm nạp nội dung họ muốn.

Quyền

Các bản minh hoạ mà tôi đã trình bày sử dụng thông báo web, yêu cầu cấp quyền, nhưng bản thân tính năng đồng bộ hoá trong nền thì không.

Các sự kiện đồng bộ hoá thường sẽ hoàn tất trong khi người dùng mở một trang trên trang web, vì vậy, việc yêu cầu người dùng cấp quyền sẽ gây ra trải nghiệm không tốt. Thay vào đó, chúng tôi sẽ giới hạn thời điểm người dùng có thể đăng ký và kích hoạt quá trình đồng bộ hoá để ngăn chặn hành vi sai trái. Ví dụ:

  • Bạn chỉ có thể đăng ký một sự kiện đồng bộ hoá khi người dùng mở một cửa sổ cho trang web.
  • Thời gian thực thi sự kiện bị giới hạn, vì vậy, bạn không thể sử dụng các sự kiện đó để ping máy chủ mỗi x giây, khai thác bitcoin hoặc bất kỳ việc gì khác.

Tất nhiên, các quy định hạn chế này có thể nới lỏng hoặc thắt chặt dựa trên mức sử dụng thực tế.

Cải tiến tăng dần

Sẽ mất một thời gian trước khi tất cả trình duyệt đều hỗ trợ tính năng đồng bộ hoá ở chế độ nền, đặc biệt là Safari và Edge chưa hỗ trợ worker dịch vụ. Tuy nhiên, cải tiến tăng dần sẽ hữu ích ở đây:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

Nếu không có trình chạy dịch vụ hoặc tính năng đồng bộ hoá trong nền, bạn chỉ cần đăng nội dung từ trang như bình thường.

Bạn nên sử dụng tính năng đồng bộ hoá ở chế độ nền ngay cả khi người dùng có vẻ có kết nối tốt, vì tính năng này giúp bạn tránh được các thao tác điều hướng và đóng thẻ trong quá trình gửi dữ liệu.

Tương lai

Chúng tôi dự định sẽ cung cấp tính năng đồng bộ hoá ở chế độ nền cho một phiên bản Chrome ổn định trong nửa đầu năm 2016, đồng thời đang phát triển một biến thể là "đồng bộ hoá định kỳ ở chế độ nền". Với tính năng đồng bộ hoá trong nền định kỳ, bạn có thể yêu cầu một sự kiện bị hạn chế theo khoảng thời gian, trạng thái pin và trạng thái mạng. Tất nhiên, việc này sẽ yêu cầu người dùng cấp quyền và cũng tuỳ thuộc vào trình duyệt về thời điểm và tần suất các sự kiện này kích hoạt. Nói cách khác, một trang web tin tức có thể yêu cầu đồng bộ hoá mỗi giờ, nhưng trình duyệt có thể biết rằng bạn chỉ đọc trang web đó vào lúc 7:00, vì vậy, quá trình đồng bộ hoá sẽ diễn ra hằng ngày vào lúc 6:50. Ý tưởng này xa hơn một chút so với việc đồng bộ hoá một lần, nhưng sắp tới.

Từng bước một, chúng tôi đang đưa các mẫu thành công từ Android và iOS lên web, đồng thời vẫn giữ lại những yếu tố làm nên sự tuyệt vời của web!