Background Fetch

Background Fetch is a concept in web development that supports persistent downloads even if the browser is closed or the user navigates away from the page. This feature is ideal for large files or long-running downloads, as it allows web applications to continue downloading content in the background, ensuring that the download completes without requiring the user to keep the browser open.

后台获取是在Web开发中的一个概念，它支持即使浏览器关闭或用户离开页面，下载仍然可以持续进行。这个特性对于大文件或长时间运行的下载非常理想，因为它允许Web应用程序在后台继续下载内容，确保下载完成，而无需用户保持浏览器打开。

Here’s how Background Fetch works in theory:

以下是后台获取在理论上的工作原理：

1. Initiating Background Fetch: The web application initiates a background fetch request, specifying the files to be downloaded and any relevant parameters, such as download priority.

   启动后台获取: Web应用程序启动后台获取请求，指定要下载的文件以及任何相关参数，例如下载优先级。

2. Persistent Download: The browser continues to download the specified files in the background, even if the user closes the browser or navigates away from the page.

   持久下载: 即使用户关闭浏览器或离开页面，浏览器仍会在后台继续下载指定的文件。

3. Notification of Completion: Once the download is complete, the browser can notify the user through a notification, or the web application can handle the completed download when the user returns to the page.

   完成通知: 下载完成后，浏览器可以通过通知来通知用户，或者当用户返回页面时，Web应用程序可以处理已完成的下载。

Here’s an example scenario of how Background Fetch might be implemented:

以下是后台获取可能实现的一个示例场景：

1. User initiates the download of a large video file from a web application.
2. The browser begins downloading the file in the background.
3. The user closes the browser or navigates to another page.
4. The browser continues the download, and upon completion, a notification is displayed to the user.

1. 用户从Web应用程序启动大型视频文件的下载。
2. 浏览器开始在后台下载文件。
3. 用户关闭浏览器或导航到其他页面。
4. 浏览器继续下载，下载完成后，会向用户显示通知。

The comparison of Background Fetch with other download methods is shown in the table below:

后台获取与其他下载方法的比较如下表所示：

Background Fetch is very useful for ensuring that large or critical downloads complete successfully, even if the user closes the browser or loses connection temporarily.

后台获取在确保大型或重要下载顺利完成方面非常有用，即使用户关闭浏览器或暂时失去连接。

以下是关于后台获取的5个面试问题及其答案

1. What is Background Fetch, and how does it benefit web applications?

什么是后台获取，它对Web应用程序有何好处？

Background Fetch is a feature that allows web applications to continue downloading files in the background, even if the browser is closed or the user navigates away, ensuring that downloads complete successfully.

后台获取是一个功能，它允许Web应用程序在后台继续下载文件，即使浏览器关闭或用户离开页面，从而确保下载成功完成。

2. How does Background Fetch differ from the Fetch API?

后台获取与Fetch API有何不同？

Background Fetch allows downloads to continue even if the browser is closed, whereas the Fetch API requires the browser and page to remain active during the download.

后台获取允许下载在浏览器关闭的情况下继续进行，而Fetch API要求浏览器和页面在下载期间保持活跃。

3. In what scenarios would you use Background Fetch?

在什么场景下会使用后台获取？

Background Fetch is ideal for downloading large files, such as videos or software updates, where the user may close the browser or navigate away during the download.

后台获取非常适合下载大文件，如视频或软件更新，在下载期间用户可能会关闭浏览器或导航离开。

4. How does the browser notify the user when a Background Fetch is complete?

当后台获取完成时，浏览器如何通知用户？

The browser can notify the user through a notification or by updating the web application when the user returns to the page.

浏览器可以通过通知用户，或者在用户返回页面时更新Web应用程序。

5. Can you explain the process of initiating a Background Fetch in a web application?

你能解释如何在Web应用程序中启动后台获取吗？

const bgFetch = await registration.backgroundFetch.fetch('my-fetch', ['/large-file.mp4'], {
  title: 'Downloading large file',
  icons: [{ src: '/icon.png', sizes: '192x192', type: 'image/png' }],
  downloadTotal: 60 * 1024 * 1024, // Expected size in bytes
});

const bgFetch = await registration.backgroundFetch.fetch('my-fetch', ['/large-file.mp4'], {
  title: 'Downloading large file',
  icons: [{ src: '/icon.png', sizes: '192x192', type: 'image/png' }],
  downloadTotal: 60 * 1024 * 1024, // Expected size in bytes
});

Recommended Resources:

1. MDN Web Docs: Background Fetch
2. Google Developers: Background Fetch API