Đồng bộ hoá trong nền là một API web mới cho phép bạn trì hoãn các hành động cho đến khi người dùng có kết nối ổn định. Điều này đảm bảo rằng nội dung mà người dùng muốn gửi thực sự được gử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, tắc kè hoa thích bong bóng hay Eric Bidelman của riêng chúng ta là một người hùng đánh golf vào cuối thập niên 90.
Nhưng đôi khi, chúng tôi 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 không bỏ túi.
- Đạt được mục tiêu nhỏ.
- Điện thoại lại nằm trong túi.
- Tiếp tục cuộc sống.
Rất tiếc, trải nghiệm này thường bị hỏng do kết nối kém. Tất cả chúng ta đều đã trải qua. 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à bạn biết rằng bạn nên từ bỏ và tiếp tục cuộc sống của mình, nhưng bạn hãy cho nó thêm 10 giây nữa. Sau 10 giây đó? Miễn phí.
Nhưng tại sao lại bỏ cuộc ngay bây giờ? Bạn đã đầu tư thời gian, nên việc không tốn thời gian mà không tốn thời gian, vậy nên hãy tiếp tục chờ đợi. Tại thời điểm này, bạn muốn bỏ cuộc, nhưng bạn biết rằng lần thứ hai bạn làm vậy là lần thứ hai trước khi mọi thứ sẽ tải nếu chỉ có bạn đợi.
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. Vậy 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 chằm chằm vào vòng quay cho đến khi tin nhắn hoàn tất. Nếu họ tìm cách rời đi hoặc đóng thẻ, thì chúng ta sẽ dùng onbeforeunload để cho thấy một thông báo như "Không, tôi cần bạn nhìn chằm chằm vào vòng quay này thêm nữa. 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ất tiếc, bạn phải quay lại sau và thử lại".
Đây là rác rưởi. Đồng bộ hoá trong nền giúp bạn làm được nhiều việc 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à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 ưu tiên ngoại tuyến. Ứng dụng sử dụng tin nhắn đẩ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ửi tin nhắn khi không có kết nối thì rất may là tin nhắn sẽ được gửi trong nền sau khi họ có kết nối.
Kể từ tháng 3 năm 2016, tính năng Đồng bộ hóa nền có trong Chrome từ phiên bản 49 trở lên. Bạn có thể xem thao tác 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 (sử dụng chế độ trên máy bay hoặc ghé thăm lồng Faraday tại địa phương của bạn).
- Nhập tin nhắn.
- Quay lại màn hình chính (bạn có thể đóng thẻ hoặc trình duyệt nếu muốn).
- Chuyển sang chế độ trực tuyến.
- Gửi tin nhắn ở chế độ nền!
Việc có thể gửi ở chế độ nền như thế này cũng có thể nhận thấy sự cải thiện về hiệu suất. Ứng dụng không cần phải quan tâm nhiều đến việc gửi tin nhắn, vì vậy ứng dụng có thể thêm thông điệp vào kết quả ngay lập tức.
Cách yêu cầu đồng bộ hóa trong nền
Trong kiểu web có thể mở rộng thực sự, đây là 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 kích hoạt một sự kiện khi người dùng có kết nối. Sự kiện này được kích hoạt ngay 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ì cần làm.
Giống như thông báo đẩy, hàm này sử dụng service worker làm mục tiêu sự kiện, cho phép nó hoạt động khi trang không mở. Để bắt đầu, hãy đăng ký đồng bộ hoá trên 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! Ở cách trên, doSomeStuff() sẽ trả về một lời hứa cho biết mức độ thành công/không thành công của bất kỳ hành động nào đang cố gắng thực hiện. Nếu yêu cầu này đáp ứng thì quá trình đồng bộ hoá đã hoàn tất. Nếu không thành công, thì một quá trình đồng bộ hoá khác sẽ được lên lịch để thử lại. Thử đồng bộ hoá 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 đồng bộ hoá ('myFirstSync' trong ví dụ trên) phải là duy nhất cho một lần đồng bộ hoá nhất định. Nếu bạn đăng ký quá trình đồng bộ hoá bằng cách sử dụng chính thẻ đang chờ đồng bộ hoá, thì quá trình đồng bộ hoá này sẽ liên kế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á "hộp thư đi" mỗi khi người dùng gửi thư, nhưng nếu người dùng gửi 5 thư khi không có mạng, bạn sẽ chỉ nhận được một đồng bộ hoá khi họ trực tuyến. Nếu muốn có 5 sự kiện đồng bộ hoá riêng biệt, bạn chỉ cần sử dụng các thẻ duy nhất!
Đây là bản minh hoạ đơn giản thực hiện những công việc tối thiểu; bản 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á trong nền để làm gì?
Tốt nhất là bạn nên dùng trình mô phỏng này để lên lịch gử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, ảnh tải lên, v.v. mà bạn muốn kết nối với máy chủ ngay cả khi người dùng đã rời khỏi hay đóng thẻ. Trang có thể lưu trữ các sự kiện này trong cửa hàng "hộp thư đi" trong indexDB và service worker sẽ truy xuất và gửi chúng.
Mặc dù, bạn cũng có thể sử dụng dữ liệu này để tìm nạp các dữ liệu nhỏ...
Một bản minh hoạ nữa!
Đây là bản minh hoạ wikipedia ngoại tuyến mà tôi đã tạo cho tính năng Tăng tốc tải trang. Tôi đã thêm một số tính năng đồng bộ hoá trong nền vào đó.
Hãy thử tự làm điều này. Đảm bảo bạn đang sử dụng Chrome 49 trở lên, sau đó:
- Chuyển đến bài viết bất kỳ, có thể là bài viết về Chrome.
- Chuyển sang chế độ ngoại tuyến (sử dụng chế độ trên máy bay hoặc tham gia 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ẽ được thông báo rằng trang không tải được (thông báo này cũng sẽ xuất hiện nếu trang vừa tải xong).
- Đồng ý nhận thông báo.
- Hãy đó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!
Nhờ mẫu này, người dùng có thể bỏ điện thoại vào túi và tiếp tục tận hưởng cuộc sống nhờ biết rằng điện thoại sẽ cảnh báo họ khi tìm được thiết bị như mong muốn.
Quyền
Các bản minh hoạ tôi đã trình bày sử dụng thông báo trên web yêu cầu quyền nhưng bản thân tính năng đồng bộ hoá trong nền thì không.
Sự kiện đồng bộ hoá thường hoàn tất trong khi người dùng đang mở một trang để truy cập vào trang web, nên việc yêu cầu sự cho phép của người dùng 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ý sự kiện đồng bộ hoá khi người dùng có một cửa sổ mở ra trang web.
- Thời gian thực thi sự kiện có giới hạn, vì vậy bạn không thể sử dụng chúng để ping máy chủ mỗi x giây, khai thác bitcoin hoặc bất kỳ thứ 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 cách sử dụng trong thực tế.
Cải tiến tăng dần
Sẽ mất một lúc trước khi tất cả các trình duyệt hỗ trợ đồng bộ hoá dưới nền, đặc biệt là khi Safari và Edge chưa hỗ trợ trình chạy dịch vụ. Tuy nhiên, tính năng nâng cao tăng dần sẽ giúp ích trong trường hợp nà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á nền, bạn chỉ cần đăng nội dung trên trang như hiện tại.
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ó kết nối tốt, vì tính năng này giúp 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 cung cấp tính năng đồng bộ hóa nền sang phiên bản Chrome ổn định vào nửa đầu năm 2016, đồng thời hoạt động trên một biến thể có tên "đồng bộ hóa nền định kỳ". Với tính năng đồng bộ hoá định kỳ ở chế độ nền, bạn có thể yêu cầu một sự kiện bị giới hạn 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ẽ cần có sự cho phép của người dùng và trình duyệt cũng phụ thuộc vào thời điểm và tần suất kích hoạt những 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ộ hóa mỗi giờ, nhưng trình duyệt có thể biết rằng bạn chỉ đọc trang web đó lúc 07:00, vì vậy, quá trình đồng bộ hóa sẽ kích hoạt hàng ngày lúc 06: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 nó sắp ra mắt rồi.
Chúng tôi từng chút một đưa những mẫu hình thành công từ Android và iOS lên web, trong khi vẫn giữ lại những điều làm cho web trở nên tuyệt vời!