Đồ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ỉ đô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 đang ở ngoà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ị hỏng do kết nối kém. Tất cả chúng ta đều ở đó. 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 vẫn chờ thêm 10 giây phòng trường hợp. 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 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" 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 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 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 sẽ được gửi trong 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 theo dõi sự kiện đó và làm bất cứ việc gì 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 đồ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ý đồng bộ hoá "hộp thư xoá" 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 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 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ữ 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 đó.
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 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 chuyển sang 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 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á 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 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 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á đị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 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.
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!