7 tháng 9, 2025Tiếng Việt

Mở khóa các bản tải xuống linh hoạt, có thể phục hồi trong ứng dụng web của bạn. Hướng dẫn toàn diện này đề cập đến API Background Fetch, Service Worker và cách triển khai thực tế để truyền tệp lớn liền mạch, ngay cả khi bị gián đoạn mạng.

Làm chủ Background Fetch ở Frontend: Xây dựng các bản tải xuống linh hoạt và có thể phục hồi

Trong thế giới ngày càng kết nối của chúng ta, web không còn chỉ là nơi dành cho các tài liệu tĩnh. Nó đã trở thành một nền tảng cho các ứng dụng tương tác, phong phú, cung cấp mọi thứ từ nội dung video độ nét cao đến phần mềm doanh nghiệp phức tạp và các trò chơi nhập vai. Sự phát triển này mang đến một thách thức lớn mà các nhà phát triển trên toàn cầu phải đối mặt: việc truyền tải các tệp lớn một cách đáng tin cậy qua các mạng lưới thường không hề đáng tin cậy. Dù đó là một người dùng trên chuyến tàu đi làm ở Seoul, một sinh viên ở vùng nông thôn Nam Mỹ, hay một chuyên gia sử dụng kết nối Wi-Fi chập chờn của khách sạn ở Dubai, việc mất kết nối có thể đồng nghĩa với việc tải xuống thất bại, người dùng bực bội và trải nghiệm bị gián đoạn. Đây chính là lúc API Background Fetch nổi lên như một giải pháp thay đổi cuộc chơi.

Các phương thức truyền thống như `fetch()` hoặc `XMLHttpRequest` rất mạnh mẽ, nhưng chúng vốn gắn liền với vòng đời của một trang web. Nếu người dùng đóng tab hoặc điều hướng sang trang khác, quá trình tải xuống sẽ bị chấm dứt. Không có cơ chế tích hợp sẵn nào để nó tồn tại sau phiên làm việc của trang. API Background Fetch thay đổi hoàn toàn mô hình này. Nó cho phép một ứng dụng web giao phó các tác vụ tải xuống (và tải lên) lớn cho chính trình duyệt, sau đó trình duyệt sẽ quản lý việc truyền tải trong nền, độc lập với bất kỳ tab trình duyệt nào. Điều này có nghĩa là quá trình tải xuống có thể tiếp tục ngay cả khi người dùng đóng trang, và quan trọng hơn, chúng có thể tự động tạm dừng và tiếp tục khi kết nối mạng thay đổi. Đây là chìa khóa để xây dựng trải nghiệm tải xuống thực sự linh hoạt, giống như ứng dụng gốc trên web.

API Background Fetch là gì? Một góc nhìn toàn cầu

Về cơ bản, API Background Fetch là một tiêu chuẩn web hiện đại được thiết kế để ủy thác các yêu cầu mạng lớn cho engine của trình duyệt. Nó cho phép các nhà phát triển khởi tạo các quá trình tải xuống hoặc tải lên có thể tồn tại vượt ra ngoài vòng đời của cửa sổ hiển thị của ứng dụng. Đây không chỉ là một sự tiện lợi nhỏ; đó là một công nghệ nền tảng cho một web mạnh mẽ và có năng lực hơn.

Hãy xem xét tác động của nó từ góc độ toàn cầu. Ở nhiều nơi trên thế giới, Internet tốc độ cao và ổn định là một điều xa xỉ, không phải là điều hiển nhiên. Dữ liệu di động có thể đắt đỏ và bị giới hạn dung lượng. Để một ứng dụng thực sự mang tính toàn cầu, nó phải xem xét đến các điều kiện mạng đa dạng này. Background Fetch là một công nghệ tạo ra sự công bằng. Nó cho phép một người dùng ở khu vực có kết nối không ổn định bắt đầu tải xuống một video giáo dục hoặc một bản cập nhật phần mềm quan trọng, tin tưởng rằng nó sẽ hoàn thành trong nền khi kết nối của họ cho phép, và không lãng phí dữ liệu quý giá để tải lại các tệp bị lỗi.

Các lợi ích chính của Background Fetch

Linh hoạt và Khả năng phục hồi: Đây là tính năng nổi bật nhất. Trình quản lý tải xuống cơ bản của trình duyệt xử lý các gián đoạn mạng một cách mượt mà. Nếu kết nối bị mất, quá trình tải xuống sẽ được tạm dừng. Khi kết nối được khôi phục, nó sẽ tự động tiếp tục từ nơi đã dừng lại. Điều này xảy ra mà không cần bất kỳ logic JavaScript phức tạp nào để xử lý header `Range` của HTTP.
Bền bỉ ngoại tuyến: Vì quá trình tải xuống được quản lý bởi tiến trình của trình duyệt và được xử lý bởi một Service Worker, nó không bị ràng buộc vào một tab đang mở. Người dùng có thể bắt đầu tải xuống, gập laptop, đi làm về, mở lại và thấy rằng quá trình tải xuống đã hoàn tất hoặc đã có tiến triển.
Hiệu quả tài nguyên: Trình duyệt là nơi tốt nhất để tối ưu hóa việc sử dụng tài nguyên. Nó có thể lên lịch truyền tải để tận dụng kết nối Wi-Fi, tiết kiệm dữ liệu di động, và quản lý các tiến trình để tối ưu hóa thời lượng pin, một mối quan tâm hàng đầu đối với người dùng di động ở khắp mọi nơi.
Trải nghiệm người dùng tích hợp: Trình duyệt có thể cung cấp một giao diện người dùng gốc, ở cấp hệ thống cho các quá trình tải xuống đang diễn ra. Người dùng xem và quản lý các bản tải xuống từ web này ở cùng một nơi họ quản lý các bản tải xuống từ các ứng dụng gốc, tạo ra một trải nghiệm liền mạch và quen thuộc. Điều này bao gồm các thông báo về tiến trình, hoàn thành và thất bại.

Các thành phần cốt lõi: Service Worker và BackgroundFetchManager

Để hiểu về Background Fetch, trước tiên bạn phải quen thuộc với hai thành phần chính của nó. Chúng hoạt động song song: một bên khởi tạo yêu cầu từ trang web, và bên kia quản lý kết quả trong nền.

Người hùng thầm lặng: Service Worker

Một Service Worker là một loại Web Worker, về cơ bản là một kịch bản JavaScript mà trình duyệt của bạn chạy trong nền, hoàn toàn tách biệt với bất kỳ trang web nào. Nó hoạt động như một proxy mạng có thể lập trình, chặn và xử lý các yêu cầu mạng, quản lý bộ nhớ đệm (cache), và cho phép thông báo đẩy. Vì nó chạy độc lập, nó có thể thực hiện các tác vụ ngay cả khi trang web của bạn không được mở trong một tab trình duyệt. Đối với Background Fetch, Service Worker là môi trường bền bỉ lắng nghe sự thành công hay thất bại cuối cùng của quá trình tải xuống, xử lý các tệp kết quả, và cập nhật giao diện người dùng hoặc lưu vào bộ nhớ đệm các tài sản để sử dụng ngoại tuyến.

Nhạc trưởng: BackgroundFetchManager

`BackgroundFetchManager` là giao diện, có thể truy cập từ JavaScript của trang web chính của bạn, mà bạn sử dụng để khởi tạo và cấu hình một background fetch. Bạn truy cập nó thông qua đối tượng đăng ký Service Worker: `navigator.serviceWorker.ready.then(swReg => swReg.backgroundFetch)`. Phương thức chính của nó là `fetch()`, nhận vào một ID, một danh sách các tệp cần tải xuống, và một bộ tùy chọn. Phương thức này giống như phát súng khởi đầu; một khi bạn gọi nó, trình duyệt sẽ tiếp quản, và Service Worker của bạn sẽ chờ ở vạch đích.

Hướng dẫn triển khai thực tế từng bước

Hãy cùng đi qua quy trình triển khai một bản tải xuống có thể phục hồi cho một tệp video lớn. Ví dụ này có thể áp dụng phổ biến, dù là cho một nền tảng truyền thông ở Hoa Kỳ, một trang web e-learning ở Ấn Độ, hay một cổng đào tạo doanh nghiệp ở Đức.

Bước 1: Kiểm tra hỗ trợ của trình duyệt

Trước khi làm bất cứ điều gì khác, bạn phải đảm bảo trình duyệt của người dùng hỗ trợ API Background Fetch. Thực tiễn này, được gọi là nâng cấp lũy tiến (progressive enhancement), đảm bảo trải nghiệm chức năng cho mọi người, ngay cả khi họ không có được các tính năng tiên tiến nhất.

Trong kịch bản ứng dụng chính của bạn, bạn sẽ kiểm tra sự hiện diện của `BackgroundFetchManager`:

if ('BackgroundFetchManager' in self) { // API được hỗ trợ, chúng ta có thể hiển thị nút tải xuống nâng cao } else { // API không được hỗ trợ, cung cấp một phương án dự phòng (ví dụ: một liên kết tiêu chuẩn) }

Bước 2: Đăng ký một Service Worker

Background Fetch phụ thuộc cơ bản vào một Service Worker. Nếu bạn chưa có một cái cho Ứng dụng Web Tiến bộ (PWA) của mình, bạn sẽ cần tạo và đăng ký một cái. Tạo một tệp có tên `service-worker.js` trong thư mục gốc của dự án. Sau đó, đăng ký nó từ tệp JavaScript chính của bạn:

async function registerServiceWorker() { if ('serviceWorker' in navigator) { try { const registration = await navigator.serviceWorker.register('/service-worker.js'); console.log('Đã đăng ký Service Worker thành công:', registration); } catch (error) { console.error('Đăng ký Service Worker thất bại:', error); } } } registerServiceWorker();

Bước 3: Khởi tạo một Background Fetch từ Frontend

Bây giờ, hãy tạo hàm bắt đầu quá trình tải xuống khi người dùng nhấp vào một nút. Hàm này sẽ lấy đăng ký Service Worker đang hoạt động và sau đó gọi `backgroundFetch.fetch()`.

Hãy phân tích các tham số của `swReg.backgroundFetch.fetch()`:

ID (`'course-video-download-01'`): Một chuỗi định danh duy nhất cho tác vụ tải xuống cụ thể này. Bạn sẽ sử dụng ID này để tham chiếu đến tác vụ sau này.
Requests (`[videoUrl]`): Một mảng các URL cần fetch. Bạn có thể tải xuống nhiều tệp trong một tác vụ được nhóm duy nhất.
Options (`{...}`): Một đối tượng để cấu hình việc tải xuống. `title` và `icons` được trình duyệt sử dụng để tạo thông báo giao diện người dùng gốc. `downloadTotal` là tổng kích thước dự kiến tính bằng byte của tất cả các tệp cộng lại; cung cấp thông số này là rất quan trọng để trình duyệt hiển thị một thanh tiến trình chính xác.

Bước 4: Xử lý sự kiện trong Service Worker

Một khi quá trình tải xuống được giao cho trình duyệt, công việc của mã frontend của bạn tạm thời đã xong. Phần logic còn lại nằm trong `service-worker.js`, tệp này sẽ được trình duyệt đánh thức khi tác vụ hoàn thành hoặc thất bại.

Bạn cần lắng nghe hai sự kiện chính: `backgroundfetchsuccess` và `backgroundfetchfail`.

// Trong service-worker.js self.addEventListener('backgroundfetchsuccess', (event) => { const bgFetch = event.registration; event.waitUntil(async function () { console.log(`Background fetch '${bgFetch.id}' đã hoàn thành thành công.`); // Mở cache nơi chúng ta sẽ lưu trữ các tệp đã tải xuống const cache = await caches.open('downloaded-assets-v1'); // Lấy tất cả các bản ghi tệp đã tải xuống const records = await bgFetch.matchAll(); // Đối với mỗi bản ghi, lưu trữ phản hồi trong cache const promises = records.map(async (record) => { const response = record.response.clone(); await cache.put(record.request, response); }); await Promise.all(promises); // Tùy chọn: Cập nhật tiêu đề giao diện người dùng trong thông báo tải xuống await event.updateUI({ title: 'Tải xuống hoàn tất và sẵn sàng!' }); }()); }); self.addEventListener('backgroundfetchfail', (event) => { const bgFetch = event.registration; console.error(`Background fetch '${bgFetch.id}' đã thất bại.`); // Tùy chọn: Cập nhật giao diện người dùng để phản ánh sự thất bại event.updateUI({ title: 'Tải xuống thất bại. Vui lòng thử lại.' }); });

Trong trình xử lý thành công, chúng ta mở Cache Storage, truy xuất tất cả các tệp đã tải xuống bằng `bgFetch.matchAll()`, và sau đó đưa từng tệp vào cache. Điều này làm cho video có thể phát ngoại tuyến bởi ứng dụng web của bạn.

Bước 5: Theo dõi tiến trình và tương tác người dùng

Một trải nghiệm người dùng tuyệt vời bao gồm việc cung cấp phản hồi. Khi người dùng nhấp vào thông báo tải xuống do trình duyệt cung cấp, chúng ta nên đưa họ đến một trang có liên quan trong ứng dụng của mình. Chúng ta xử lý điều này bằng sự kiện `backgroundfetchclick` trong Service Worker.

// Trong service-worker.js self.addEventListener('backgroundfetchclick', (event) => { const bgFetch = event.registration; if (bgFetch.id === 'course-video-download-01') { event.waitUntil( clients.openWindow('/downloads') ); } });

Đoạn mã này yêu cầu trình duyệt mở trang `/downloads` của trang web của bạn khi người dùng nhấp vào thông báo cho tác vụ tải xuống cụ thể này. Trên trang đó, bạn có thể hiển thị tiến trình tải xuống hoặc danh sách các bản tải xuống đã hoàn tất.

Sự kỳ diệu của việc phục hồi: Nó thực sự hoạt động như thế nào?

Khía cạnh mạnh mẽ nhất và có lẽ bị hiểu lầm nhiều nhất của Background Fetch là khả năng tự động phục hồi. Làm thế nào nó hoạt động mà bạn không cần phải viết bất kỳ mã đặc biệt nào cho nó?

Câu trả lời là bạn đã ủy thác trách nhiệm cho một quy trình cấp hệ thống, được tối ưu hóa cao: trình quản lý tải xuống của chính trình duyệt. Khi bạn khởi tạo một background fetch, bạn không trực tiếp quản lý các byte qua mạng. Trình duyệt mới là người làm điều đó.

Đây là chuỗi các sự kiện trong một lần gián đoạn mạng:

Người dùng đang tải xuống một tệp, và thiết bị của họ mất kết nối mạng (ví dụ: họ đi vào một đường hầm).
Trình quản lý tải xuống của trình duyệt phát hiện lỗi mạng và tạm dừng việc truyền tải một cách mượt mà. Nó theo dõi số byte đã được nhận thành công.
Thiết bị của người dùng sau đó có lại kết nối mạng.
Trình duyệt tự động cố gắng tiếp tục tải xuống. Nó gửi một yêu cầu HTTP mới đến máy chủ cho cùng một tệp, nhưng lần này nó bao gồm một header `Range`, về cơ bản là nói với máy chủ, "Tôi đã có 'X' byte đầu tiên, vui lòng gửi cho tôi phần còn lại, bắt đầu từ byte 'X+1'."
Một máy chủ được cấu hình đúng sẽ phản hồi với trạng thái `206 Partial Content` và bắt đầu truyền phần còn lại của tệp.
Trình duyệt nối dữ liệu mới này vào tệp đã được tải xuống một phần.

Toàn bộ quá trình này là trong suốt đối với mã JavaScript của bạn. Service Worker của bạn chỉ được thông báo ở cuối cùng, khi tệp đã được tải xuống hoàn toàn và ghép lại thành công, hoặc nếu quá trình thất bại hoàn toàn (ví dụ: tệp không còn trên máy chủ). Sự trừu tượng hóa này vô cùng mạnh mẽ, giải phóng các nhà phát triển khỏi việc xây dựng logic phục hồi tải xuống phức tạp và dễ hỏng.

Các khái niệm nâng cao và thực tiễn tốt nhất cho đối tượng toàn cầu

Cung cấp `downloadTotal` chính xác

Tùy chọn `downloadTotal` không chỉ là một thứ hay ho nên có. Nếu không có nó, trình duyệt chỉ có thể hiển thị một chỉ báo tiến trình không xác định (ví dụ: một biểu tượng xoay). Với nó, trình duyệt có thể hiển thị một thanh tiến trình chính xác và tính toán thời gian còn lại ước tính. Điều này cải thiện đáng kể trải nghiệm người dùng. Để có được giá trị này, bạn có thể cần thực hiện một yêu cầu `HEAD` đến URL của tệp trước đó để kiểm tra header `Content-Length`, hoặc API của bạn có thể cung cấp kích thước tệp như một phần của siêu dữ liệu.

Quản lý nhiều tệp trong một lần Fetch

API này tỏa sáng khi nhóm các tài sản liên quan. Hãy tưởng tượng một người dùng tải xuống một bộ sưu tập ảnh, một gói phần mềm cùng với tài liệu của nó, hoặc một màn chơi game với tất cả các texture và tệp âm thanh. Bạn có thể truyền một mảng các URL vào `backgroundFetch.fetch()`. Điều này được trình duyệt coi là một tác vụ nguyên tử duy nhất, với một thông báo và một thanh tiến trình cho toàn bộ gói. Trong trình xử lý `backgroundfetchsuccess` của bạn, `bgFetch.matchAll()` sẽ trả về một mảng các bản ghi, mà bạn có thể xử lý riêng lẻ.

Xử lý lỗi và các kịch bản thất bại

Một quá trình tải xuống có thể thất bại vì nhiều lý do: máy chủ trả về lỗi 404, người dùng hết dung lượng đĩa, hoặc người dùng hủy tải xuống thủ công từ giao diện người dùng của trình duyệt. Trình xử lý sự kiện `backgroundfetchfail` là lưới an toàn của bạn. Bạn có thể sử dụng nó để dọn dẹp bất kỳ dữ liệu một phần nào, thông báo cho người dùng trong ứng dụng của bạn, và có thể cung cấp một nút thử lại. Hiểu rằng thất bại là một khả năng là chìa khóa để xây dựng một hệ thống mạnh mẽ.

Lưu trữ tài sản đã tải xuống với Cache API

Nơi phổ biến và hiệu quả nhất để lưu trữ các tài sản web đã tải xuống là Cache API. Đó là một cơ chế lưu trữ được thiết kế đặc biệt cho các đối tượng `Request` và `Response`. Bằng cách đặt các tệp đã tải xuống của bạn vào bộ nhớ đệm, sau này bạn có thể phục vụ chúng trực tiếp từ Service Worker khi người dùng cố gắng truy cập chúng, làm cho ứng dụng của bạn thực sự có khả năng hoạt động ngoại tuyến.

Các trường hợp sử dụng trong các ngành công nghiệp khác nhau

Các ứng dụng của Background Fetch rất rộng lớn và trải dài trên nhiều ngành công nghiệp toàn cầu:

Truyền thông & Giải trí: Các dịch vụ phát trực tuyến dựa trên web có thể cung cấp chế độ ngoại tuyến, cho phép người dùng ở bất kỳ quốc gia nào tải xuống phim hoặc nhạc cho các chuyến bay hoặc đi lại, giống như các ứng dụng gốc tương ứng.
Giáo dục & eLearning: Một trường đại học ở châu Phi có thể cung cấp một cổng web cho sinh viên tải xuống các bài giảng video lớn và tài liệu khóa học tương tác, đảm bảo rằng ngay cả những người có internet tại nhà kém cũng có thể tiếp cận giáo dục.
Doanh nghiệp & Dịch vụ hiện trường: Một công ty sản xuất toàn cầu có thể trang bị cho các kỹ sư hiện trường của mình một PWA cho phép họ tải xuống các sơ đồ 3D khổng lồ và sách hướng dẫn kỹ thuật cho máy móc trước khi đến một địa điểm xa không có truy cập internet.
Du lịch & Lữ hành: Một ứng dụng du lịch có thể cho phép người dùng tải xuống bản đồ ngoại tuyến, hướng dẫn thành phố, và thông tin vé cho điểm đến của họ, giúp họ tiết kiệm chi phí chuyển vùng dữ liệu quốc tế đắt đỏ.

Tương thích trình duyệt và triển vọng tương lai

Tại thời điểm viết bài này, API Background Fetch chủ yếu được hỗ trợ trong các trình duyệt dựa trên Chromium như Google Chrome và Microsoft Edge. Điều quan trọng là phải kiểm tra các tài nguyên như CanIUse.com hoặc MDN Web Docs để biết thông tin tương thích mới nhất. Mặc dù chưa được áp dụng phổ biến, sự hiện diện của nó trong các trình duyệt lớn đánh dấu một bước tiến quan trọng. Khi nền tảng web tiếp tục phát triển, các API như thế này đang thu hẹp khoảng cách về khả năng giữa ứng dụng web và ứng dụng gốc, mở đường cho một thế hệ PWA mạnh mẽ, linh hoạt và có thể truy cập toàn cầu mới.

Kết luận: Xây dựng một Web linh hoạt hơn cho mọi người

API Background Fetch không chỉ là một công cụ để tải tệp. Đó là một tuyên bố về loại web mà chúng ta muốn xây dựng: một web linh hoạt, lấy người dùng làm trung tâm, và hoạt động cho tất cả mọi người, bất kể thiết bị hay chất lượng kết nối mạng của họ. Bằng cách giao phó các lần truyền tải lớn cho trình duyệt, chúng ta giải thoát người dùng khỏi sự lo lắng khi theo dõi thanh tiến trình, chúng ta tiết kiệm dữ liệu và pin của họ, và chúng ta mang lại một trải nghiệm mạnh mẽ và đáng tin cậy.

Khi bạn lên kế hoạch cho dự án web tiếp theo của mình liên quan đến việc truyền tải tệp lớn, hãy nhìn xa hơn phương thức `fetch`. Hãy xem xét bối cảnh toàn cầu của người dùng và tận dụng sức mạnh của Background Fetch để xây dựng một ứng dụng thực sự hiện đại, ưu tiên ngoại tuyến. Tương lai của web là bền bỉ và linh hoạt, và giờ đây, các bản tải xuống của bạn cũng có thể như vậy.