Đồng bộ hoá dữ liệu của ứng dụng web của bạn trong nền để có trải nghiệm giống ứng dụng hơn
Bạn đã bao giờ gặp phải bất kỳ tình huống nào sau đây chưa?
- Đi tàu hoặc tàu điện ngầm khi kết nối không ổn định hoặc không có kết nối
- Đã bị nhà mạng hạn chế sau khi xem quá nhiều video
- Sống ở một quốc gia mà băng thông gặp khó khăn trong việc đáp ứng nhu cầu
Nếu có, chắc hẳn bạn đã cảm thấy thất vọng khi hoàn thành một số việc trên web và tự hỏi tại sao các ứng dụng dành riêng cho nền tảng lại thường hoạt động tốt hơn trong những trường hợp như vậy. Các ứng dụng dành riêng cho nền tảng có thể tìm nạp trước nội dung mới như tin bài hoặc thông tin thời tiết. Ngay cả khi không có mạng trong tàu điện ngầm, bạn vẫn có thể đọc tin tức.
Tính năng Đồng bộ hoá nền định kỳ cho phép các ứng dụng web đồng bộ hoá dữ liệu ở chế độ nền theo định kỳ, đưa các ứng dụng web đến gần hơn với hành vi của ứng dụng dành riêng cho nền tảng.
Thử ngay
Bạn có thể thử đồng bộ hoá định kỳ ở chế độ nền với ứng dụng minh hoạ trực tiếp. Trước khi sử dụng, hãy đảm bảo rằng:
- Bạn đang sử dụng Chrome 80 trở lên.
- Bạn phải cài đặt ứng dụng web trước khi bật tính năng đồng bộ hoá định kỳ ở chế độ nền.
Khái niệm và cách sử dụng
Tính năng đồng bộ hoá định kỳ ở chế độ nền cho phép bạn hiển thị nội dung mới khi chạy một trang dựa trên trình chạy dịch vụ hoặc ứng dụng web tiến bộ được khởi chạy. Trình phân tích cú pháp thực hiện việc này bằng cách tải dữ liệu xuống ở chế độ nền khi bạn không dùng ứng dụng hoặc trang. Nhờ vậy, nội dung của ứng dụng không được làm mới sau khi khởi chạy trong lúc người dùng xem. Hơn nữa, thuộc tính này ngăn ứng dụng hiển thị danh sách nội dung trước khi làm mới.
Nếu không có tính năng đồng bộ hoá định kỳ ở chế độ nền, các ứng dụng web phải dùng các phương thức thay thế để tải dữ liệu xuống. Một ví dụ phổ biến là sử dụng thông báo đẩy để đánh thức một trình chạy dịch vụ. Người dùng bị gián đoạn bởi một thông báo, chẳng hạn như "đã có dữ liệu mới". Việc cập nhật dữ liệu về cơ bản là tác dụng phụ. Bạn vẫn có thể sử dụng thông báo đẩy cho các nội dung cập nhật thực sự quan trọng, chẳng hạn như tin nổi bật quan trọng.
Đồng bộ hoá định kỳ ở chế độ nền dễ bị nhầm lẫn với hoạt động đồng bộ hoá ở chế độ nền. Mặc dù có tên tương tự nhau, nhưng trường hợp sử dụng của chúng lại khác nhau. Ngoài ra, tính năng đồng bộ hoá trong nền thường được dùng để gửi lại dữ liệu đến máy chủ khi yêu cầu trước đó không thành công.
Đảm bảo mức độ tương tác của người dùng phù hợp
Nếu thực hiện không đúng cách, việc đồng bộ hoá nền định kỳ có thể làm lãng phí tài nguyên của người dùng. Trước khi phát hành bản phát hành, Chrome sẽ trải qua một khoảng thời gian dùng thử để đảm bảo tính năng này là đúng. Phần này giải thích một số quyết định thiết kế mà Chrome đã đưa ra để giúp tính năng này hữu ích nhất có thể.
Quyết định thiết kế đầu tiên mà Chrome đưa ra là ứng dụng web chỉ có thể sử dụng tính năng đồng bộ hoá nền định kỳ sau khi người dùng cài đặt ứng dụng đó trên thiết bị của họ và đã khởi chạy ứng dụng đó dưới dạng một ứng dụng riêng biệt. Tính năng đồng bộ hoá định kỳ ở chế độ nền không hoạt động khi có thẻ thông thường trong Chrome.
Hơn nữa, vì Chrome không muốn các ứng dụng web không dùng đến hoặc hiếm khi được dùng để tiêu thụ pin hoặc dữ liệu một cách vô cớ, nên Chrome đã thiết kế tính năng đồng bộ hoá định kỳ trong nền sao cho nhà phát triển phải thực hiện được việc đó bằng cách mang lại giá trị cho người dùng. Cụ thể, Chrome đang sử dụng điểm tương tác trang web (about://site-engagement/) để xác định xem tính năng đồng bộ hoá trong nền định kỳ có thể xảy ra hay không và tần suất đồng bộ hoá định kỳ cho một ứng dụng web nhất định. Nói cách khác, sự kiện periodicsync sẽ không được kích hoạt trừ phi điểm số tương tác lớn hơn 0 và giá trị của sự kiện này ảnh hưởng đến tần suất kích hoạt sự kiện periodicsync. Điều này đảm bảo rằng các ứng dụng duy nhất đồng bộ hoá ở chế độ nền là những ứng dụng bạn đang sử dụng.
Tính năng đồng bộ hoá định kỳ ở chế độ nền có một số điểm tương đồng với các API và phương pháp hiện có trên các nền tảng phổ biến. Ví dụ: tính năng đồng bộ hoá một lần trong nền cũng như thông báo đẩy cho phép logic của ứng dụng web tồn tại lâu hơn một chút (thông qua trình chạy dịch vụ) sau khi một người đã đóng trang. Trên hầu hết các nền tảng, mọi người thường cài đặt những ứng dụng định kỳ truy cập mạng ở chế độ nền để mang lại trải nghiệm người dùng tốt hơn cho các bản cập nhật quan trọng, tìm nạp trước nội dung, đồng bộ hoá dữ liệu, v.v. Tương tự, quá trình đồng bộ hoá nền định kỳ cũng kéo dài thời gian hoạt động của logic của ứng dụng web để chạy trong khoảng thời gian bình thường (có thể kéo dài vài phút mỗi lần).
Nếu trình duyệt cho phép việc này xảy ra thường xuyên và không có hạn chế, thì điều này có thể dẫn đến một số vấn đề về quyền riêng tư. Dưới đây là cách Chrome giải quyết rủi ro này trong quá trình đồng bộ hoá định kỳ ở chế độ nền:
- Hoạt động đồng bộ hoá trong nền chỉ diễn ra trên mạng mà thiết bị đã kết nối trước đó. Chrome khuyên bạn chỉ nên kết nối với mạng do các bên đáng tin cậy vận hành.
- Tương tự như mọi hoạt động giao tiếp trên Internet, tính năng đồng bộ hoá nền định kỳ sẽ tiết lộ địa chỉ IP của ứng dụng, máy chủ đang trò chuyện với ứng dụng và tên của máy chủ. Để giảm mức chịu tiếng ồn này xuống mức ước tính nếu ứng dụng chỉ được đồng bộ hoá khi chạy ở nền trước, trình duyệt sẽ giới hạn tần suất đồng bộ hoá nền của ứng dụng cho phù hợp với tần suất một người dùng ứng dụng đó. Nếu người dùng ngừng tương tác thường xuyên với ứng dụng, thì tính năng đồng bộ hoá định kỳ ở chế độ nền sẽ ngừng kích hoạt. Đây là một điểm cải tiến ròng so với hiện trạng trong các ứng dụng dành riêng cho nền tảng.
Khi nào có thể sử dụng?
Quy tắc sử dụng sẽ khác nhau tuỳ theo trình duyệt. Tóm lại, Chrome đặt các yêu cầu sau vào tính năng đồng bộ hoá định kỳ ở chế độ nền:
- Một chỉ số mức độ tương tác cụ thể của người dùng.
- Sự hiện diện của một mạng đã sử dụng trước đây.
Nhà phát triển không kiểm soát thời gian đồng bộ hoá. Tần suất đồng bộ hoá sẽ tương ứng với tần suất dùng ứng dụng. (Xin lưu ý rằng các ứng dụng dành riêng cho nền tảng hiện không làm việc này.) Nó cũng xem xét trạng thái nguồn và trạng thái kết nối của thiết bị.
Nên sử dụng khi nào?
Khi trình chạy dịch vụ của bạn đánh thức để xử lý sự kiện periodicsync, bạn có cơ hội để yêu cầu dữ liệu, nhưng không có nghĩa vụ để yêu cầu. Khi xử lý sự kiện, bạn nên xem xét điều kiện mạng và bộ nhớ có sẵn, đồng thời tải xuống các lượng dữ liệu khác nhau để phản hồi. Bạn có thể sử dụng các tài nguyên trợ giúp sau:
Quyền
Sau khi cài đặt trình chạy dịch vụ, hãy sử dụng Permissions API (API Quyền) để truy vấn periodic-background-sync. Bạn có thể thực hiện việc này từ một cửa sổ hoặc ngữ cảnh trình chạy dịch vụ.
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
Đăng ký đồng bộ hoá định kỳ
Như đã nêu, việc đồng bộ hoá nền định kỳ đòi hỏi một trình chạy dịch vụ. Truy xuất PeriodicSyncManager bằng ServiceWorkerRegistration.periodicSync rồi gọi register() trên đó. Việc đăng ký yêu cầu cả thẻ và khoảng thời gian đồng bộ hoá tối thiểu (minInterval). Thẻ này xác định hoạt động đồng bộ hoá đã đăng ký để có thể đăng ký nhiều lượt đồng bộ hoá. Trong ví dụ bên dưới, tên thẻ là 'content-sync' và minInterval là một ngày.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
Xác minh một đơn đăng ký
Gọi periodicSync.getTags() để truy xuất một mảng thẻ đăng ký. Ví dụ bên dưới sử dụng tên thẻ để xác nhận rằng tính năng cập nhật bộ nhớ đệm đang hoạt động nhằm tránh cập nhật lại.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
Bạn cũng có thể sử dụng getTags() để hiển thị danh sách các lượt đăng ký đang hoạt động trên trang cài đặt của ứng dụng web để người dùng có thể bật hoặc tắt các loại bản cập nhật cụ thể.
Phản hồi sự kiện đồng bộ hoá định kỳ ở chế độ nền
Để phản hồi một sự kiện đồng bộ hoá nền định kỳ, hãy thêm một trình xử lý sự kiện periodicsync vào trình chạy dịch vụ. Đối tượng event được truyền đến sẽ chứa tham số tag khớp với giá trị dùng trong quá trình đăng ký. Ví dụ: nếu tính năng đồng bộ hoá định kỳ ở chế độ nền được đăng ký với tên 'content-sync', thì event.tag sẽ là 'content-sync'.
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
Huỷ đăng ký đồng bộ hoá
Để kết thúc một quá trình đồng bộ hoá đã đăng ký, hãy gọi periodicSync.unregister() bằng tên của quá trình đồng bộ hoá mà bạn muốn huỷ đăng ký.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Giao diện
Dưới đây là tóm tắt ngắn gọn về các giao diện do API Timing Background Sync API cung cấp.
PeriodicSyncEvent. Đã chuyển đến trình xử lý sự kiệnServiceWorkerGlobalScope.onperiodicsynctại thời điểm trình duyệt chọn.PeriodicSyncManager. Đăng ký và huỷ đăng ký hoạt động đồng bộ hoá định kỳ và cung cấp thẻ cho các lượt đồng bộ hoá đã đăng ký. Truy xuất một thực thể của lớp này từ thuộc tính ServiceWorkerSubscription.periodicSync.ServiceWorkerGlobalScope.onperiodicsync. Đăng ký một trình xử lý để nhậnPeriodicSyncEvent.ServiceWorkerRegistration.periodicSync. Trả về một tham chiếu đếnPeriodicSyncManager.
Ví dụ:
Cập nhật nội dung
Ví dụ sau đây sử dụng tính năng đồng bộ hoá nền định kỳ để tải xuống và lưu vào bộ nhớ đệm các bài viết cập nhật cho trang web tin tức hoặc blog. Hãy chú ý tên thẻ cho biết loại đồng bộ hoá này là ('update-articles'). Lệnh gọi đến updateArticles() được gói trong event.waitUntil() để trình chạy dịch vụ không kết thúc trước khi bài viết được tải xuống và lưu trữ.
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
Thêm tính năng đồng bộ hoá định kỳ ở chế độ nền vào một ứng dụng web hiện có
Bạn cần áp dụng nhóm thay đổi này để thêm tính năng đồng bộ hoá định kỳ ở chế độ nền vào một PWA hiện có. Ví dụ này bao gồm một số câu lệnh ghi nhật ký hữu ích mô tả trạng thái đồng bộ hoá định kỳ ở chế độ nền trong ứng dụng web.
Gỡ lỗi
Bạn có thể gặp khó khăn khi xem và xem toàn bộ tính năng đồng bộ hoá định kỳ ở chế độ nền trong khi kiểm thử cục bộ. Thông tin về các lượt đăng ký đang hoạt động, khoảng thời gian đồng bộ hoá gần đúng và nhật ký của các sự kiện đồng bộ hoá trước đây cung cấp bối cảnh có giá trị khi gỡ lỗi hành vi của ứng dụng web. Rất may là bạn có thể tìm thấy tất cả thông tin đó thông qua một tính năng thử nghiệm trong Công cụ của Chrome cho nhà phát triển.
Ghi lại hoạt động trên máy
Phần Đồng bộ hoá nền định kỳ của Công cụ cho nhà phát triển được sắp xếp xoay quanh các sự kiện chính trong vòng đời đồng bộ hoá định kỳ ở chế độ nền: đăng ký đồng bộ hoá, thực hiện đồng bộ hoá nền và huỷ đăng ký. Để lấy thông tin về những sự kiện này, hãy nhấp vào Start recording(Bắt đầu ghi).
Trong khi ghi, các mục nhập sẽ xuất hiện trong Công cụ cho nhà phát triển tương ứng với các sự kiện, với ngữ cảnh và siêu dữ liệu được ghi lại cho từng sự kiện.
Sau khi bật tính năng ghi một lần, tính năng này sẽ duy trì trạng thái bật trong tối đa 3 ngày, cho phép Công cụ cho nhà phát triển thu thập thông tin gỡ lỗi cục bộ về quá trình đồng bộ hoá trong nền có thể diễn ra, thậm chí nhiều giờ trong tương lai.
Mô phỏng sự kiện
Mặc dù việc ghi lại hoạt động trong nền có thể hữu ích, nhưng đôi khi bạn sẽ muốn kiểm thử trình xử lý periodicsync ngay lập tức mà không cần chờ một sự kiện kích hoạt theo tần suất thông thường.
Bạn có thể thực hiện việc này thông qua mục Service Worker (Trình chạy dịch vụ) trong Bảng điều khiển ứng dụng trong Công cụ của Chrome cho nhà phát triển. Trường Đồng bộ hoá định kỳ cho phép bạn cung cấp một thẻ để sự kiện sử dụng và kích hoạt thẻ đó bao nhiêu lần tuỳ thích.
Sử dụng giao diện Công cụ cho nhà phát triển
Kể từ Chrome 81, bạn sẽ thấy phần Định kỳ đồng bộ hoá nền trong bảng điều khiển Ứng dụng cho nhà phát triển.
