Đồng bộ hoá ở chế độ 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 ổn định khả năng kết nối. Điều này đảm bảo rằng những gì người dùng muốn gửi sẽ 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 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 golf putt 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. Người dùng mong muốn sẽ mang lại trải nghiệm như:
- Điện thoại ra khỏi túi.
- Đạt được mục tiêu nhỏ.
- Phía sau điện thoạ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 đã đến đó. Bạn nhìn chằm chằm vào màn hình trắng hoặc 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 bị mất dữ liệu. Sau 10 giây đó? Miễn phí.
Nhưng tại sao bây giờ lại từ bỏ? 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 thời điểm này, bạn muốn bỏ cuộc, nhưng bạn biết giây bạn muốn từ bỏ, là giây thứ hai trước khi mọi thứ sẽ tải nếu chỉ 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. Nhưng còn thời điểm 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" đối với một tin nhắn, họ phải nhìn chằm chằm vào một vòng quay cho đến khi tin nhắn đó hoàn tất. Nếu họ cố gắng chuyển sang chỗ khác hoặc đóng thẻ, chúng ta sẽ sử dụng onbeforeunload để cho thấy một thông báo như "Chưa, tôi cần bạn nhìn chằm chằm vào vòng quay này thêm một chút. Rất tiếc". Nếu người dùng không có kết nối mạng, 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à thứ rác rưở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 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á trong nền có trong Chrome từ 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:
- Mở EmoJoy.
- Chuyển sang chế độ ngoại tuyến (bằ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 (không bắt buộc đóng thẻ hoặc trình duyệt).
- Kết nối mạng.
- Tin nhắn sẽ được gửi trong 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 quan tâm nhiều đến việc gửi tin nhắn nên có thể thêm tin nhắn vào dữ liệu đầu ra ngay lập tức.
Cách yêu cầu đồng bộ hoá ở chế độ nền
Theo kiểu web có thể mở rộng thực sự, đây là tính năng cấp thấp giúp bạn được tự do làm những gì bạn 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, điều này xảy ra ngay lập tức nếu người dùng đã có kết nối. Sau đó, bạn nghe sự kiện đó và làm bất cứ việc gì mình muốn việc 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 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() phải 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ì mà ứng dụng đang cố gắng thực hiện. Nếu quá trình này diễn ra thì quá trình đồng bộ hoá đã hoàn tất. Nếu không thành công, 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 thuật toán 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ý đồng bộ hoá bằng cách sử dụng cùng một thẻ với quá trình đồng bộ hoá đang chờ xử lý, thì thẻ đó sẽ kết hợp với quá trình đồng bộ hoá hiện có. Điều đó có nghĩa là bạn có thể đăng ký "hộp thư xoá" đồng bộ hoá 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ó kết nối mạng. Nếu bạn muốn 5 sự kiện đồng bộ hoá riêng biệt, chỉ cần sử dụng các thẻ duy nhất!
Đây là một bản minh hoạ đơn giản có thể thực hiện phần tối thiểu; nó sẽ 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 sử dụng thẻ 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 cài đặt, ảnh tải lên... bất kỳ thứ gì bạn muốn truy cập vào máy chủ ngay cả khi người dùng rời khỏi hoặc đóng thẻ. Trang có thể lưu trữ những đường liên kết này trong một "hộp thư đi" lưu trữ trongindexDB và trình chạy dịch vụ sẽ truy xuất và gửi chúng.
Mặc dù, bạn cũng có thể dùng nó để tìm nạp các bit nhỏ dữ liệu...
Một bản minh hoạ khác!
Đây là bản minh hoạ wikipedia ngoại tuyến mà tôi đã tạo để 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 công cụ này.
Hãy tự mình trải nghiệm. Đảm bảo bạn đang sử dụng Chrome 49 trở lên, 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 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 tải mất một chút thời gian).
- Đồ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!
Bằng cách sử dụng mẫu này, người dùng có thể cho đ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 khi được tìm nạp như mong muốn.
Quyền
Các bản minh hoạ mà tôi trình bày có sử dụng thông báo trên web và cần được cấp quyền, nhưng tính năng đồng bộ hoá ở chế độ 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 đang mở một trang để truy cập vào trang web. Vì vậy, việc yêu cầu người dùng cho phép sẽ là một trải nghiệm không tốt. Thay vào đó, chúng tôi sẽ giới hạn trường hợp 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ý sự kiện đồng bộ hoá khi người dùng đang mở một cửa sổ để truy cập vào 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 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ể được 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
Có thể mất một chút thời gian để tất cả trình duyệt hỗ trợ tính năng đồng bộ hoá ở chế độ nền, đặc biệt là khi Safari và Edge chưa hỗ trợ trình chạy 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 trên trang như hiện nay.
Nên sử dụng tính năng đồng bộ hoá dưới 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 bảo vệ bạn khỏi các thao tác điều hướng và đóng thẻ trong khi gửi dữ liệu.
Tương lai
Chúng tôi hướng đến mục tiêu chuyển tính năng đồng bộ hóa dưới nền sang một phiên bản Chrome ổn định trong nửa đầu năm 2016, đồng thời nghiên cứu một biến thể có tên là "đồ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 người dùng cho phép, đồng thời trình duyệt cũng sẽ xác định 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ộ hoá 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 việc đồng bộ hoá 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 sắp tới.
Chúng tôi từng bước mang những mẫu hình thành công của Android và iOS lên web, trong khi vẫn giữ lại những yếu tố làm cho môi trường web trở nên tuyệt vời!