Giới thiệu về Tìm nạp trong nền

Jake Archibald

Vào năm 2015, chúng tôi đã ra mắt tính năng Đồng bộ hoá trong nền. Tính năng này cho phép worker dịch vụ hoãn công việc cho đến khi người dùng có kết nối. Điều này có nghĩa là người dùng có thể nhập tin nhắn, nhấn nút gửi và rời khỏi trang web mà vẫn biết rằng tin nhắn sẽ được gửi ngay hoặc khi họ có kết nối.

Đây là một tính năng hữu ích, nhưng yêu cầu worker dịch vụ phải hoạt động trong suốt thời gian tìm nạp. Đó không phải là vấn đề đối với những công việc nhỏ như gửi tin nhắn, nhưng nếu tác vụ mất quá nhiều thời gian, trình duyệt sẽ huỷ service worker, nếu không, đó là một rủi ro đối với quyền riêng tư và pin của người dùng.

Vậy nếu bạn cần tải xuống nội dung có thể mất nhiều thời gian, chẳng hạn như phim, podcast hoặc các cấp độ của một trò chơi thì sao? Đó là mục đích của tính năng Tìm nạp ở chế độ nền.

Background Fetch (Tìm nạp trong nền) được cung cấp theo mặc định kể từ Chrome 74.

Sau đây là một bản minh hoạ nhanh dài 2 phút cho thấy trạng thái truyền thống của mọi thứ so với việc sử dụng tính năng Tìm nạp ở chế độ nền:

Cách hoạt động

Tính năng tìm nạp ở chế độ nền hoạt động như sau:

1. Bạn yêu cầu trình duyệt thực hiện một nhóm tìm nạp ở chế độ nền.
2. Trình duyệt tìm nạp những thứ đó và hiển thị tiến trình cho người dùng.
3. Sau khi quá trình tìm nạp hoàn tất hoặc không thành công, trình duyệt sẽ mở trình chạy dịch vụ và kích hoạt một sự kiện để cho bạn biết điều gì đã xảy ra. Đây là nơi bạn quyết định cách xử lý các câu trả lời (nếu có).

Nếu người dùng đóng các trang trên trang web của bạn sau bước 1, thì không sao cả, quá trình tải xuống sẽ tiếp tục. Vì quá trình tìm nạp rất dễ thấy và dễ huỷ bỏ, nên không có vấn đề về quyền riêng tư đối với một tác vụ đồng bộ hoá trong nền quá dài. Vì service worker không chạy liên tục, nên không có lo ngại rằng service worker có thể lạm dụng hệ thống, chẳng hạn như khai thác bitcoin ở chế độ nền.

Trên một số nền tảng (chẳng hạn như Android), trình duyệt có thể đóng sau bước 1, vì trình duyệt có thể chuyển việc tìm nạp cho hệ điều hành.

Nếu người dùng bắt đầu tải xuống khi không có mạng hoặc chuyển sang chế độ không có mạng trong quá trình tải xuống, thì quá trình tìm nạp trong nền sẽ bị tạm dừng và tiếp tục sau đó.

API

Phát hiện tính năng

Giống như mọi tính năng mới, bạn cần phát hiện xem trình duyệt có hỗ trợ tính năng đó hay không. Đối với Background Fetch, bạn chỉ cần làm như sau:

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

Bắt đầu tìm nạp ở chế độ nền

API chính nằm ngoài quy trình đăng ký service worker, vì vậy, trước tiên, hãy đảm bảo bạn đã đăng ký một service worker. Sau đó:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3', 'ep-5-artwork.jpg'], {
    title: 'Episode 5: Interesting things.',
    icons: [{
      sizes: '300x300',
      src: '/ep-5-icon.png',
      type: 'image/png',
    }],
    downloadTotal: 60 * 1024 * 1024,
  });
});

backgroundFetch.fetch nhận 3 đối số:

backgroundFetch.fetch trả về một lời hứa được giải quyết bằng BackgroundFetchRegistration. Tôi sẽ trình bày chi tiết về vấn đề đó sau. Lệnh hứa từ chối nếu người dùng đã chọn không tải xuống hoặc một trong các tham số được cung cấp không hợp lệ.

Việc cung cấp nhiều yêu cầu cho một lần tìm nạp trong nền cho phép bạn kết hợp những thứ về mặt logic là một thứ duy nhất đối với người dùng. Ví dụ: một bộ phim có thể được chia thành hàng nghìn tài nguyên (thường là với MPEG-DASH) và đi kèm với các tài nguyên bổ sung như hình ảnh. Một cấp độ của trò chơi có thể trải rộng trên nhiều tài nguyên JavaScript, hình ảnh và âm thanh. Nhưng đối với người dùng, đó chỉ là "bộ phim" hoặc "cấp độ".

Nhận một hoạt động tìm nạp ở chế độ nền hiện có

Bạn có thể tìm nạp một nền hiện có như sau:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

…bằng cách truyền id của hoạt động tìm nạp trong nền mà bạn muốn. get sẽ trả về undefined nếu không có hoạt động tìm nạp dữ liệu ở chế độ nền nào đang hoạt động có mã nhận dạng đó.

Một hoạt động tìm nạp ở chế độ nền được coi là "đang hoạt động" từ thời điểm được đăng ký cho đến khi thành công, thất bại hoặc bị huỷ.

Bạn có thể nhận được danh sách tất cả các hoạt động tìm nạp ở chế độ nền đang hoạt động bằng cách sử dụng getIds:

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

Đăng ký tìm nạp ở chế độ nền

BackgroundFetchRegistration (bgFetch trong các ví dụ trên) có những thuộc tính sau:

Theo dõi tiến trình

Bạn có thể thực hiện việc này thông qua sự kiện progress. Hãy nhớ rằng downloadTotal là bất kỳ giá trị nào bạn đã cung cấp hoặc 0 nếu bạn không cung cấp giá trị.

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

Nhận yêu cầu và phản hồi

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

record là một BackgroundFetchRecord và có dạng như sau:

Sự kiện trình chạy dịch vụ

Các đối tượng sự kiện có những thuộc tính sau:

Phản ứng với thành công/thất bại

Chúng ta đã thấy sự kiện progress, nhưng sự kiện này chỉ hữu ích khi người dùng mở một trang trên trang web của bạn. Lợi ích chính của tính năng tìm nạp trong nền là mọi thứ vẫn hoạt động sau khi người dùng rời khỏi trang hoặc thậm chí đóng trình duyệt.

Nếu quá trình tìm nạp trong nền hoàn tất thành công, trình chạy dịch vụ của bạn sẽ nhận được sự kiện backgroundfetchsuccess và event.registration sẽ là hoạt động đăng ký tìm nạp trong nền.

Sau sự kiện này, bạn sẽ không truy cập được vào các yêu cầu và phản hồi đã tìm nạp nữa. Vì vậy, nếu muốn giữ lại, hãy di chuyển chúng đến một nơi nào đó như API bộ nhớ đệm.

Giống như hầu hết các sự kiện của worker dịch vụ, hãy sử dụng event.waitUntil để worker dịch vụ biết thời điểm sự kiện hoàn tất.

Ví dụ: trong service worker của bạn:

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

Lỗi có thể chỉ là một lỗi 404 duy nhất, có thể không quan trọng đối với bạn, vì vậy, bạn vẫn nên sao chép một số phản hồi vào bộ nhớ đệm như trên.

Phản hồi khi nhấp

Người dùng có thể nhấp vào giao diện người dùng hiển thị tiến trình và kết quả tải xuống. Sự kiện backgroundfetchclick trong trình chạy dịch vụ cho phép bạn phản ứng với điều này. Như trên, event.registration sẽ là chế độ đăng ký tìm nạp trong nền.

Việc thường làm với sự kiện này là mở một cửa sổ:

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

Tài nguyên khác

• Thông tin giải thích
• Quy cách kỹ thuật
• mục trên chromestatus.com

Đính chính: Phiên bản trước của bài viết này đã đề cập không chính xác đến Background Fetch (Tìm nạp trong nền) là "tiêu chuẩn web". API hiện không nằm trong danh sách các tiêu chuẩn, bạn có thể tìm thấy quy cách trong WICG dưới dạng Báo cáo nháp của Nhóm cộng đồng.