Đồ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 Internet, chúng ta sẽ không biết mèo không thích hoa, thằn lằn không thích bong bóng hoặc Eric Bidelman của chúng ta là một anh hùng chơi golf mini vào cuối những năm 90.
Nhưng đôi khi, chỉ đô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ư:
- Điện thoại đã lấy ra khỏi túi.
- Đạt được mục tiêu nhỏ.
- Đưa điện thoại trở lại túi.
- 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. Ai cũng từng trải qua. Bạn đang nhìn chằm chằm vào một màn hình trắng hoặc một vòng quay và bạn 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 đợi thêm 10 giây để đề phòng. Sau 10 giây đó thì sao? 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, nên việc bỏ ngang sẽ là một sự lãng phí. 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 cho thấy Emojoy, một bản minh hoạ trò chuyện chỉ bằng 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 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ì tin nhắn sẽ được gửi ở chế độ nền sau 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 này bằng cách làm theo các bước dưới đây:
- Mở Emojoy.
- 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).
- Nhập tin nhắn.
- 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).
- Kết nối mạng.
- Tin nhắn gửi ở chế độ nền!
Việc có thể gửi ở chế độ nền như vậy cũng giúp cải thiện hiệu suấ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, tính năng này sử dụng trình chạy dịch vụ làm mục tiêu sự kiện, cho phép tính năng này 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! Trong đoạn mã trên, doSomeStuff() sẽ trả về một lời hứa cho biết kết quả thành công/không thành công của bất kỳ việc gì mà nó đang cố gắng thực hiện. Nếu lời hứa này được thực hiện, 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 tự thử nghiệm. Đảm bảo bạn đang sử dụng Chrome 49 trở lên rồi làm như sau:
- Chuyển đến một bài viết bất kỳ, có thể là Chrome.
- Chuyển sang chế độ ngoại tuyến (bằng cách sử dụng chế độ trên máy bay hoặc sử dụng dịch vụ của một nhà cung cấp dịch vụ di động tệ như tôi).
- Nhấp vào đường liên kết đến một 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 chút thời gian để 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, 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 có thể đăng ký và kích hoạt tính nă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ể 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ụ. Nhưng tính năng tăng cường dần dần sẽ giúp í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 việ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 đó lúc 7:00, vì vậy, quá trình đồng bộ hoá sẽ diễn ra hằng ngày lúc 6:50. Ý tưởng này hơi xa vời 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ừ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!