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 để mang lại trải nghiệm giống ứng dụng hơn

Jeff Posnick
Joe Medley
Joe Medley
GitHub

Bạn đã bao giờ gặp phải tình huống nào sau đây chưa?

  • Đi tàu hoặc tàu điện ngầm không kết nối mạng hoặc kết nối không ổn định
  • Đã bị nhà mạng điều tiết sau khi 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ó, thì chắc chắn bạn sẽ cảm thấy khó chịu khi bị một số việc được thực hiện 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 làm tốt hơn trong các 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ư tin bài hoặc thời tiết thông tin. Ngay cả khi không có mạng trên tàu điện ngầm, bạn vẫn có thể đọc tin tức.

Tính năng Đồng bộ hoá dưới nền định kỳ cho phép các ứng dụng web đồng bộ hoá định kỳ dữ liệu trong nền, đưa các ứng dụng web đến gần hơn với hành vi của một nền tảng cụ thể .

Dùng thử

Bạn có thể thử tính năng đồng bộ hoá ở chế độ nền theo định kỳ thông qua bản minh hoạ trực tiếp ứng dụng. 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 giúp bạn hiển thị nội dung mới khi một ứng dụng web tiến bộ hoặc trang dựa trên trình chạy dịch vụ được khởi chạy. Công cụ này thực hiện việc này bằng cách tải dữ liệu xuống trong trong nền khi không dùng ứng dụng hoặc trang. Việc này ngăn chặn làm mới nội dung sau khi ra mắt trong lúc đang xem. Tốt hơn nữa, 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 định kỳ đồng bộ hoá ở chế độ nền, các ứng dụng web phải dùng những 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 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". Về cơ bản, việc cập nhật dữ liệu chỉ là một tác dụng phụ. Bạn vẫn có thể chọn thông qua thông báo đẩy cho những nội dung cập nhật thực sự quan trọng, chẳng hạn như tin nổi bật.

Tính năng đồng bộ hoá định kỳ ở chế độ nền dễ bị nhầm lẫn với tính năng đồng bộ hoá ở chế độ nền. Mặc dù có tên tương tự, trường hợp sử dụng của chúng khác nhau. Ngoài ra, đồng bộ hoá dưới nền thường được dùng nhất để gửi lại dữ liệu đến máy chủ khi yêu cầu trước đó không thành công.

Có được mức độ tương tác của người dùng phù hợp

Nếu được thực hiện không đúng cách, việc đồng bộ hoá định kỳ ở chế độ nền có thể gây lãng phí của chúng tôi. Trước khi phát hành, Chrome sẽ trải qua giai đoạn dùng thử để giúp đảm bảo rằng thông tin đó đúng. Phần này giải thích một số quyết định về thiết kế của Chrome đã thực hiện để làm cho tính năng này trở nên hữu ích nhất có thể.

Quyết định thiết kế đầu tiên mà Chrome đưa ra là một ứng dụng web chỉ có thể sử dụng đồng bộ hoá trong nền sau khi một người 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. Không dùng được tính năng đồng bộ hoá định kỳ ở chế độ nền bối cảnh là 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 được sử dụng hoặc ít khi được sử dụng một cách vô cớ tiêu thụ pin hoặc dữ liệu, Chrome đã thiết kế tính năng đồng bộ hoá trong nền theo định kỳ sao cho nhà phát triển sẽ phải kiếm được lợi ích đó bằng cách cung cấp giá trị cho người dùng của họ. Cụ thể, Chrome đang sử dụng điểm tương tác trang web (about://site-engagement/) để xác định xem liệu và tần suất đồng bộ hoá trong nền có thể diễn ra định kỳ hay không cho một ứng dụng web nhất định. Nói cách khác, sự kiện periodicsync sẽ hoàn toàn không được kích hoạt trừ phi lượt tương tác điểm số lớn hơn 0 và giá trị của nó ảnh hưởng đến tần suất mà Sự kiện periodicsync sẽ kích hoạt. Điều này đảm bảo rằng các ứng dụng duy nhất đồng bộ hoá trong nền là những nền mà 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à trên các nền tảng phổ biến. Chẳng hạn như đồng bộ hoá nền một lầ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 service worker) sau khi một người đã đóng trang. Trên hầu hết các nền tảng, những người đã cài đặt các ứng dụng truy cập mạng định kỳ trong nền để cung cấp 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ự, định kỳ đồng bộ hoá ở chế độ nền kéo dài thời gian tồn tại của logic của một ứng dụng web để chạy định kỳ cho những gì có thể mất 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ó hạn chế, thì trình duyệt có thể dẫn đến một số vấn đề về quyền riêng tư. Sau đây là cách Chrome giải quyết vấn đề này rủi ro đồng bộ hoá định kỳ ở chế độ nền:

  • Hoạt động đồng bộ hoá ở chế độ nền chỉ diễn ra trên mạng mà thiết bị đã kết nối trước đó. Chrome đề xuất chỉ kết nối với các mạng do các bên đáng tin cậy.
  • Giống như tất cả các hình thức giao tiếp Internet, quá trình đồng bộ hoá định kỳ trong nền sẽ tiết lộ IP địa chỉ của máy khách, máy chủ giao tiếp và tên của máy chủ. Để giảm mức phơi sáng này ở mức gần 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 của một nền của ứng dụng sẽ đồng bộ hóa để phù hợp với tần suất người dùng sử dụng ứng dụng đó. Nếu một người ngừng thường xuyên tương tác với ứng dụng, đồng bộ hoá ở chế độ nền theo định kỳ 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 phiên bản dành riêng cho từng nền tảng của chúng tôi.

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 sẽ đặt 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ủa người dùng cụ thể.
  • Sự hiện diện của 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á. Chiến lược phát hành đĩa đơn 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 làm điều này.) Tính năng này cũng lấy nguồn điện của thiết bị và trạng thái kết nối.

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

Khi trình chạy dịch vụ của bạn thức dậy để xử lý sự kiện periodicsync, bạn sẽ có cơ hội yêu cầu dữ liệu, nhưng không có nghĩa vụ phải thực hiện việc đó. Khi xử lý sự kiện, bạn nên đưa điều kiện mạng và dung lượng lưu trữ còn trống vào và tải các lượng dữ liệu khác nhau xuống. Bạn có thể sử dụng các tài nguyên sau để trợ giúp:

Quyền

Sau khi cài đặt trình chạy dịch vụ, hãy sử dụng quyền Quyền API để truy vấn với giá periodic-background-sync. Bạn có thể thực hiện việc này từ cửa sổ hoặc ngữ cảnh của 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ư đã đề cập, quá trình đồng bộ hoá ở chế độ nền định kỳ cần có một trình chạy dịch vụ. Truy xuất PeriodicSyncManager sử dụng ServiceWorkerRegistration.periodicSync rồi gọi register() trên đó. Để đăng ký, bạn phải có cả thẻ và tối thiểu khoảng thời gian đồng bộ hoá (minInterval). Thẻ này xác định quá trình đồng bộ hoá đã đăng ký để có thể đăng ký nhiều lần đồ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ý. Chiến lược phát hành đĩa đơn ví dụ bên dưới 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 nhằm tránh đang 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ể dùng getTags() để hiển thị danh sách các thông tin đăng ký đang hoạt động trên web để người dùng có thể bật hoặc tắt các loại bản cập nhật.

Phản hồi sự kiện đồng bộ hoá ở chế độ nền theo định kỳ

Để phản hồi một sự kiện đồng bộ hoá ở chế độ nền định kỳ, hãy thêm một sự kiện periodicsync cho trình chạy dịch vụ của bạn. Đối tượng event được truyền vào sẽ chứa một Tham số tag khớp với giá trị dùng trong quá trình đăng ký. Ví dụ: nếu một quá trình đồng bộ hoá ở chế độ nền định kỳ được đăng ký bằng tên 'content-sync', sau đó 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 quá trình đồng bộ hoá đã đăng ký, hãy gọi periodicSync.unregister() bằng tên của đồ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 tóm tắt về các giao diện do Nền tảng định kỳ cung cấp API đồng bộ hoá.

  • PeriodicSyncEvent. Đã truyền đến trình xử lý sự kiện ServiceWorkerGlobalScope.onperiodicsync tại thời gian mà trình duyệt chọn.
  • PeriodicSyncManager. Đăng ký và huỷ đăng ký đồng bộ hoá định kỳ và cung cấp thẻ cho các tài khoản đã đăng ký đồng bộ hoá. Truy xuất một thực thể của lớp này từ ServiceWorkerRegistration.periodicSync` thuộc tính này.
  • ServiceWorkerGlobalScope.onperiodicsync. Đăng ký một trình xử lý để nhận PeriodicSyncEvent.
  • ServiceWorkerRegistration.periodicSync. Trả về 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á định kỳ ở chế độ nền để 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 ('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 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ó

Cần có nhóm thay đổi này để thêm đồng bộ hoá định kỳ ở chế độ nền với 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

Việc xem và xem từ đầu đến cuối quá trình đồng bộ hoá định kỳ ở chế độ nền có thể là một thách thức trong khi kiểm thử cục bộ. Thông tin về các lượt đăng ký đang hoạt động, số liệu đồng bộ hoá gần đúng các khoảng thời gian và nhật ký về 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ả 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á 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ý. Để có được thông tin về các sự kiện này, nhấp vào Start recording(Bắt đầu ghi).

Nút ghi trong Công cụ cho nhà phát triển
Nút ghi trong Công cụ cho nhà phát triển

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 mỗi báo cáo.

Ví dụ về dữ liệu đồng bộ hoá nền định kỳ được ghi lại
Ví dụ về dữ liệu đồng bộ hoá nền định kỳ được ghi lại

Sau khi bật tính năng ghi lại một lần, tính năng này sẽ luôn 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ề đồng bộ hoá trong nền có thể diễn ra, thậm chí là nhiều giờ trong tương lai.

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 tra trình xử lý periodicsync ngay lập tức mà không phải chờ 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 qua phần Service Workers trong bảng điều khiển Application (Ứ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ẻ cho để sử dụng và kích hoạt sự kiện đó bao nhiêu lần tuỳ thích.

'Service Workers' phần bảng điều khiển Ứng dụng hiển thị tính năng "Đồng bộ hoá định kỳ" trường văn bản và nút.

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 Đồng bộ hóa trong nền định kỳ trong phần Bảng điều khiển Ứng dụng của Công cụ cho nhà phát triển.

Bảng điều khiển Ứng dụng hiển thị phần Đồng bộ hoá trong nền định kỳ