i want to write a button where user clicked will automatically download a video from a URL.

I have researched on someway, here is my implementation

 const startDownload = (
    url: string | undefined,
    filename = 'Tiktok_livestream.mp4',
  ) => {
    if (!download?.visible || clickedDownloadRef.current || !url) {
      console.log('here', download, clickedDownloadRef.current, url);
      return;
    }
    clickedDownloadRef.current = true;
    fetch(url)
      .then(response => response.blob())
      .then(blob => {
        console.log('finish downloading blob');
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = filename;
        link.click();
      })
      .catch(console.error);

    console.log('download');
  };

So the idea is we use fetch to download the data in to blob. Then save it.

The problem of this method is it doesnt have good UX for big files. Because the user only see the downloaded file widget of chrome after the fetch is done ( which take long time for big files). compared to a native video downloading where it will show when user start the download, and user can also see the progress. So i wonder is there any otherway that will trigger the chrome widget right after user click the button, and continously show the progress

The widget im talking about is the native one usually automatically showed when chrome is downloading something