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

Jake Archibald

Ngày xuất bản: 8 tháng 12 năm 2015

Đồng bộ hoá ở chế độ nền là một API web cho phép bạn 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 giúp bạn hỗ trợ người dùng gửi bất kỳ tệp nào họ muốn gửi, ngay khi có thể.

Browser Support

Source

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 Internet, chúng ta sẽ không biết rằng mèo không thích hoa, tắc kè hoa thích bong bóng hoặc Eric Bidelman là một người hùng chơi golf putt putt vào cuối những năm 90.

Nhưng đôi khi, chỉ đôi khi thôi, chúng ta không muốn lãng phí thời gian. Trải nghiệm lý tưởng của người dùng sẽ như sau:

Điện thoại ngoài túi.
Đạt được mục tiêu nhỏ.
Điện thoại đã được cất vào túi.
Tiếp tục cuộc sống.

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

Nhưng tại sao lại bỏ cuộc ngay bây giờ? Bạn đã bỏ ra thời gian, nên việc ra về tay không sẽ rất lãng phí, vì vậy bạn tiếp tục chờ đợi. Đến thời điểm này, bạn muốn bỏ cuộc, nhưng bạn biết rằng ngay khi bạn làm như vậy, đó là thời điểm trước khi mọi thứ sẽ 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 vấ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 điều gì sẽ xảy ra khi trang cần gửi nội dung nào đó đến máy chủ?

Hiện tại, nếu nhấn vào nút "gửi" cho một tin nhắn, người dùng sẽ phải nhìn vào một biểu tượng xoay cho đến khi quá trình hoàn tất. Nếu họ cố gắng chuyển sang trang khác hoặc đóng thẻ, chúng tôi 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 biểu tượng xoay này thêm một chút nữa. Xin lỗi". Nếu người dùng không có kết nối, chúng ta sẽ nói với người dùng rằng "Rất tiếc, bạn phải quay lại sau và thử lại".

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 minh hoạ Emojoy, một bản minh hoạ cuộc trò chuyện chỉ dùng biểu tượng cảm xúc. Đây là một ứng dụng web tiến bộ và hoạt động theo chế độ ưu tiên ngoại tuyến. Ứng dụng sử dụng thông báo đẩy và thông báo, đồng thời sử dụng tính năng đồ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ì may mắn là tin nhắn sẽ được gửi ngầm khi họ có kết nối.

Khả năng gửi ở chế độ nền như thế này cũng giúp cải thiện hiệu suất cảm nhận. Ứ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.

Tính năng đồng bộ hoá ở chế độ nền có trong Chrome từ phiên bản 49.

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

Theo đúng phong cách web có thể mở rộng, đây là một tính năng cấp thấp cho phép bạn tự do làm những gì 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 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, thông báo này sử dụng trình chạy dịch vụ làm đích đến của sự kiện, cho phép thông báo 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! doSomeStuff() sẽ trả về một lời hứa cho biết trạng thái thành công hoặc không thành công của bất kỳ thao tác nào mà nó đang cố gắng thực hiện. Nếu lời hứa này được thực hiện, thì quá trình đồng bộ hoá sẽ hoàn tất. Nếu không thành công, một lần đồng bộ hoá khác sẽ được lên lịch để thử lại. Các lần thử đồng bộ hoá lại cũng đợi kết nối và sử dụng thời gian đợi luỹ thừa.

Tên thẻ của hoạt động đồng bộ hoá ("myFirstSync" trong ví dụ) phải là duy nhất đối với một hoạt động đồng bộ hoá nhất định. Nếu bạn đăng ký một thao tác đồng bộ hoá bằng cùng một thẻ với một thao tác đồng bộ hoá đang chờ xử lý, thì thao tác đó sẽ kết hợp với thao tác đồ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ư đi" 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, bạn sẽ chỉ nhận được một lần đồng bộ hoá khi họ có mạng. Để nhận 5 sự kiện đồng bộ hoá riêng biệt, hãy sử dụng các thẻ riêng biệt.

Đây là bản minh hoạ sử dụng sự kiện đồng bộ hoá để hiển thị một thông báo.

Các trường hợp sử dụng tính năng đồng bộ hoá ở chế độ nền

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

Mặc dù vậy, bạn cũng có thể dùng nó để tìm nạp các đoạn dữ liệu nhỏ.

Bản minh hoạ Wikipedia ngoại tuyến

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

Hãy tự mình thử:

Tiếp tục mở thẻ này trong trình duyệt.
Chuyển sang chế độ ngoại tuyến bằng cách bật chế độ trên máy bay hoặc tắt Wi-Fi.
Nhấp vào một đường liên kết đến bài viết khác.
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 lúc để tải).
Đồng ý nhận thông báo.
Đóng trình duyệt.
Chuyển sang trực tuyến
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 của mình, vì biết rằng điện thoại sẽ cảnh báo họ khi tìm thấy thông tin 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 trên 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 hoàn tất 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ẽ mang lại trải nghiệm không tốt. Thay vào đó, chúng tôi sẽ giới hạn thời điểm có thể đăng ký và kích hoạt các hoạt động đồ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ể dùng các sự kiện này để ping máy chủ sau mỗi x giây, khai thác bitcoin hoặc bất cứ điều gì khác.

Tất nhiên, những 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 trong thực tế.

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

Trong khi chờ quá trình đồng bộ hoá trong nền trở thành cơ sở, bạn có thể sử dụng tính năng này làm một điểm cải tiến tăng dần:

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, hãy đăng nội dung từ trang như bạn vẫn làm.

Bạn nên sử dụng tính năng đồng bộ hoá trong 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 sẽ bảo vệ bạn khỏi 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 phát hành tính năng đồng bộ hoá ở chế độ nền cho phiên bản ổn định của Chrome trong nửa đầu năm 2016, đồng thời 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á định kỳ trong nền, 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, điều này sẽ yêu cầu người dùng cấp quyền và trình duyệt sẽ quyết định thời điểm và tần suất kích hoạt các sự kiện này. 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 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 có thể sẽ mất nhiều thời gian hơn để triển khai so với tính năng đồng bộ hoá một lần, nhưng chúng tôi sẽ sớm ra mắt tính năng này.

Từng bước, chúng tôi đang mang những mẫu thành công từ Android và iOS lên web, đồng thời vẫn giữ lại những điểm ưu việt của web!

Giới thiệu tính năng Đồng bộ hóa dưới nền Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.