Trải nghiệm ngoại tuyến phong phú hơn nhờ API Đồng bộ hoá định kỳ trong nền

Đồng bộ hoá dữ liệu của ứng dụng web ở chế độ nền để có trải nghiệm giống ứng dụng hơn

Jeff Posnick

Joe Medley

Bạn đã từng gặp phải trường hợp nào sau đây chưa?

• Đi tàu hoặc tàu điện ngầm mà không có kết nối hoặc kết nối không ổn định
• Nhà mạng đã hạn chế tốc độ truy cập của bạn sau khi bạn xem quá nhiều video
• Sống ở một quốc gia có băng thông gặp khó khăn trong việc đáp ứng nhu cầu

Nếu có, chắc chắn bạn đã cảm thấy khó chịu khi thực hiện 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 thường hoạt động hiệu quả hơn trong những trường hợp này. Các ứng dụng dành riêng cho nền tảng có thể tìm nạp nội dung mới như bài tin tức hoặc thông tin thời tiết trước. 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á trong nền định kỳ cho phép các ứng dụng web đồng bộ hoá dữ liệu định kỳ ở chế độ nền, đưa các ứng dụng web đến gần hơn với hành vi của một ứng dụng dành riêng cho nền tảng.

Dùng thử

Bạn có thể thử tính năng đồng bộ hoá định kỳ ở chế độ nền bằng ứ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 dùng Chrome 80 trở lên.
• Bạn 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 khởi chạy một ứng dụng web tiến bộ hoặc trang dựa trên trình thực thi dịch vụ. Ứng dụng này thực hiện việc này bằng cách tải dữ liệu xuống ở chế độ nền khi ứng dụng hoặc trang không được sử dụng. Điều này giúp ngăn nội dung của ứng dụng làm mới sau khi khởi chạy trong khi đang xem. Hơn nữa, chế độ này ngăn ứng dụng hiển thị vòng quay nội dung trước khi làm mới.

Nếu không có tính năng đồng bộ hoá trong nền định kỳ, các ứng dụng web phải sử 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 worker dịch vụ. Người dùng bị gián đoạn bởi một thông báo như "có dữ liệu mới". Về cơ bản, việc cập nhật dữ liệu là một hiệu ứ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.

Bạn dễ nhầm lẫn tính năng đồng bộ hoá định kỳ ở chế độ nền với tính năng đồng bộ hoá ở chế độ nền. Mặc dù có tên tương tự nhau, nhưng các trường hợp sử dụng thì khác nhau. Ngoài ra, tính năng đồng bộ hoá ở chế độ 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.

Tăng mức độ tương tác của người dùng

Nếu thực hiện không đúng cách, tính năng đồng bộ hoá định kỳ ở chế độ nền có thể lãng phí tài nguyên của người dùng. Trước khi phát hành, Chrome đã trải qua một khoảng thời gian thử nghiệm để đảm bảo tính chính xác. Phần này giải thích một số quyết định thiết kế mà Chrome đưa ra để làm cho 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á trong 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à 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 trong bối cảnh của một 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 ít dùng đến tiêu tốn pin hoặc dữ liệu một cách vô ích, nên Chrome đã thiết kế tính năng đồng bộ hoá trong nền định kỳ để các nhà phát triển phải kiếm được quyền này 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 của trang web (about://site-engagement/) để xác định xem có thể đồng bộ hoá trong nền định kỳ cho một ứng dụng web nhất định hay không và tần suất đồng bộ hoá. Nói cách khác, sự kiện periodicsync sẽ không được kích hoạt trừ khi điểm tương tác lớn hơn 0 và giá trị của điểm tương tác ả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 chỉ những ứng dụng mà bạn đang sử dụng mới đồng bộ hoá ở chế độ nền.

Tính năng đồng bộ hoá định kỳ trong 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 ở chế độ nền cũng như thông báo đẩy cho phép logic của ứng dụng web hoạt động lâu hơn một chút (thông qua worker dịch vụ) sau khi người dùng đóng trang. Trên hầu hết các nền tảng, người dùng thường cài đặt các ứng dụng định kỳ truy cập mạng ở chế độ nền để mang lại trải nghiệm tốt hơn cho người dùng đối với các bản cập nhật quan trọng, tải trước nội dung, đồng bộ hoá dữ liệu, v.v. Tương tự, tính năng đồng bộ hoá định kỳ ở chế độ nền cũng kéo dài thời gian hoạt động của logic ứng dụng web để chạy theo các khoảng thời gian đều đặn, mỗi lần có thể kéo dài vài phút.

Nếu trình duyệt cho phép điều này xảy ra thường xuyên và không có quy định 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 đối với tính năng đồng bộ hoá định kỳ ở chế độ nền:

• Hoạt động đồng bộ hoá ở chế độ nền chỉ xảy ra trên mạng mà thiết bị đã kết nối trước đó. Chrome đề xuất bạn chỉ kết nối với các mạng do các bên đáng tin cậy vận hành.
• Giống như tất cả các hoạt động giao tiếp qua Internet, tính năng đồng bộ hoá trong nền định kỳ sẽ cho biết địa chỉ IP của ứng dụng, máy chủ mà ứng dụng đang giao tiếp và tên của máy chủ. Để giảm mức độ hiển thị này xuống gần bằng mức độ hiển thị nếu ứng dụng chỉ đồng bộ hoá khi ở nền trước, trình duyệt sẽ giới hạn tần suất đồng bộ hoá ở chế độ nền của ứng dụng cho phù hợp với tần suất người dùng sử dụng ứng dụng đó. Nếu người dùng ngừng thường xuyên tương tác 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õ 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 tính năng này?

Quy tắc sử dụng sẽ khác nhau tuỳ theo trình duyệt. Tóm lại, Chrome đưa ra các yêu cầu sau đây về quá trình đồng bộ hoá định kỳ ở chế độ nền:

• Một điểm số tương tác cụ thể của người dùng.
• Có mạng đã sử dụng trước đó.

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ẽ phù hợp với tần suất sử dụng ứng dụng. (Lưu ý rằng các ứng dụng dành riêng cho nền tảng hiện không thực hiện việc này.) Trình cung cấp này cũng tính đến trạng thái kết nối và nguồn của thiết bị.

Khi nào nên sử dụng công cụ này?

Khi worker dịch vụ của bạn thức dậy để 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ụ phải làm như vậy. Khi xử lý sự kiện, bạn nên cân nhắc các điều kiện mạng và bộ nhớ có sẵn, đồng thời tải nhiều lượng dữ liệu xuống để phản hồi. Bạn có thể sử dụng các tài nguyên sau đây để được trợ giúp:

• Network Information API
• Phát hiện chế độ tiết kiệm dữ liệu
• Ước tính dung lượng lưu trữ còn trống

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 worker 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, tính năng đồng bộ hoá định kỳ ở chế độ nền yêu cầu một worker dịch vụ. Truy xuất PeriodicSyncManager bằng ServiceWorkerRegistration.periodicSync và 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 quá trình đồng bộ hoá đã đăng ký để có thể đăng ký nhiều quá trình đồ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 việc đăng ký

Gọi periodicSync.getTags() để truy xuất một mảng thẻ đăng ký. Ví dụ dưới đây sử dụng tên thẻ để xác nhận rằng quá trình cập nhật bộ nhớ đệm đang hoạt động để 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 trong 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á ở chế độ 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ụ của bạn. Đối tượng event được truyền vào sẽ chứa tham số tag khớp với giá trị được sử dụng trong quá trình đăng ký. Ví dụ: nếu một quá trình đồng bộ hoá nền định kỳ đượ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.
});

Đang huỷ đăng ký quá trình đồng bộ hoá

Để kết thúc một quá trình đồng bộ hoá đã đăng ký, hãy gọi periodicSync.unregister() với 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à thông tin nhanh về các giao diện do API Đồng bộ hoá định kỳ trong nền cung cấp.

• PeriodicSyncEvent. Được truyền đến trình xử lý sự kiện ServiceWorkerGlobalScope.onperiodicsync tại thời điểm do trình duyệt chọn.
• PeriodicSyncManager. Đăng ký và huỷ đăng ký tính năng đồng bộ hoá định kỳ và cung cấp thẻ cho các hoạt động đồng bộ hoá đã đăng ký. Truy xuất một thực thể của lớp này từ thuộc tính ServiceWorkerRegistration.periodicSync.
• ServiceWorkerGlobalScope.onperiodicsync. Đăng ký một trình xử lý để nhận PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync. Trả về một tệp tham chiếu đến PeriodicSyncManager.

Ví dụ:

Cập nhật nội dung

Ví dụ sau đây sử dụng tính năng đồng bộ hoá trong nền định kỳ để tải xuống và lưu các bài viết mới nhất vào bộ nhớ đệm cho một trang web tin tức hoặc blog. Hãy lưu ý 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 chấm dứt trước khi các 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ó

Nhóm thay đổi này là cần thiết để 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á nền định kỳ trong ứng dụng web.

Gỡ lỗi

Bạn có thể gặp khó khăn khi xem toàn bộ quá trình đồ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ị trong khi gỡ lỗi hành vi của ứng dụng web. May mắn là bạn có thể tìm thấy tất cả cá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 tại địa phương

Phần Đồng bộ hoá định kỳ ở chế độ nền của DevTools được sắp xếp xung 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á ở chế độ nền và huỷ đăng ký. Để thu thập thông tin về các sự kiện này, hãy nhấp vào Bắt đầu ghi.

Trong khi ghi, các mục sẽ xuất hiện trong DevTools 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ẽ vẫn bật trong tối đa 3 ngày, cho phép Công cụ cho nhà phát triển ghi lại thông tin gỡ lỗi cục bộ về các hoạt động đồng bộ hoá ở chế độ nền có thể diễn ra, thậm chí là sau nhiều giờ.

Mô phỏng sự kiện

Mặc dù việc ghi lại hoạt động ở chế độ 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 đợi một sự kiện kích hoạt theo tần suất bình thường.

Bạn có thể thực hiện việc này thông qua phần 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 thẻ để sử dụng cho sự kiện và kích hoạt sự kiện đó bao nhiêu lần tuỳ thích.

Sử dụng giao diện DevTools

Kể từ Chrome 81, bạn sẽ thấy phần Định kỳ đồng bộ hoá trong nền trong bảng điều khiển Application (Ứng dụng) của DevTools.