Issues on new background tab in Safari

[toooni]

Describe the bug
We've experienced an issue with Safari when using Cmd+Click on a link (Tab opens in background). The created tab doesn't run any JS when switching to it (wait a few seconds beforehand). This seems to be reproducable on the Playground page with the Iframe site.
In the console (on our website) I've got this error for each of the link tags with rel="modulepreload":

The resource xy.js was preloaded using link preload but not used within a few seconds from the window's load event

To Reproduce
Steps to reproduce the behavior:

1. Open the playground in Safari (https://basics.github.io/nuxt-booster/playground/)
2. Click on the menu
3. Click on Iframe while holding cmd (2x times)
4. Wait a few seconds
5. Switch to the tab

Screenshots
https://github.com/user-attachments/assets/d88513f1-3c6c-411e-b213-27b87a3c8683

Desktop:

• MacOS 15.2, Safari 18.2

[ThornWalli]

Hello @toooni,

try out the setting:

{
  booster: {
    detection: {
      battery: false
    }
  }
}

I suspect that the video check is stuck, but I immediately noticed improvements in safari, even in dev mode.

[toooni]

Hi @ThornWalli
I've just tried turning off the battery detection. It works now! 🥇

Btw. I am in no specific battery mode. I've got a plugged in M4 MacBook.

[ThornWalli]

I think this point is causing problems, video is started, then nothing happens. Possibly combine with document.hidden, or rethink the function.

nuxt-booster/src/runtime/utils/entry.js

Lines 95 to 108 in a75b86b

	export const canVideoPlay = async blob => {
	const objectUrl = URL.createObjectURL(blob);
	try {
	const video = document.createElement('video');
	video.muted = true;
	video.playsinline = true;
	video.src = objectUrl;
	await video.play();
	URL.revokeObjectURL(objectUrl);
	} catch (error) {
	URL.revokeObjectURL(objectUrl);
	throw error;
	}
	};

[toooni]

@ThornWalli But shouldn't this then result in an error in the console? I don't see an error related to this code.

[ThornWalli]

In this case, the await video.play(); does not continue and hangs in Safari.

Suspect the inactive tab.

About the function: This checks with a muted video can be played, in case of energy saving mode this is not possible and gives an error.

[toooni]

Oh. Now I see. You are absolutely right. This is the cause of the problem.
I tried to write to the console what the content of video is right before video.play() to check if there's a chance to see if play() can safely be called. But when I do that, the call doesn't hang. Just a console.log(video) above await video.play(); "fixes" the issue. I do not have videos on the page and atm I did not go too much into it where that video blob comes from. Do you have an idea how a fix should be approached for this issue?

[ThornWalli]

@toooni You can take a look at #1173

I added a timeout to the video, in Safari the video call seems to stop at the second tab. If there is no error because of no play, the timeout should activate.

Is ready to be tested via npm i nuxt-booster@next ;)

And I moved the check on document.visibility to the front, it was deeply obstructed.