electron/electron

[Feature Request]: allow frame drawing while unvisible

HyrepBall opened this issue · 3 comments

HyrepBall commented

Preflight Checklist

Problem Description

In the video, Google Meet was used to reproduce the bug to clearly show the behavior of the application window in inactive mode
There was a bug with both BrowserView and WebContentsView

backgroundThrottling: false doesn't solve my problem.

First, I show the behavior of the application at the moment when it is broadcast via Google Meet, and as you can see, the counter has increased to 20, but should have shown the loaded site content at 15 seconds.
Then I showed the behavior of the application in its normal state, and after the required number of seconds the site was displayed correctly.

ВАЖНО! когда я навёл мышь на окно приложения на 20 секунде в этот момент контент отобразился и в гугл миит, т.е. в этот момент

Proposed Solution

Add the ability to render the application when it is minimized/out of focus

Alternatives Considered

or find a way to get around it

Additional Information

const { app, BrowserWindow, WebContentsView } = require("electron");
const path = require("node:path");

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 2000,
    height: 1100,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      backgroundThrottling: false,
    },
  });

  mainWindow.loadFile("index.html");

  // mainWindow.webContents.openDevTools();

  const view1 = new WebContentsView({
    webPreferences: {
      backgroundThrottling: false,
    },
  });
  mainWindow.contentView.addChildView(view1);

  setTimeout(() => {
    view1.webContents.loadURL("https://electronjs.org");
  }, 15000);

  view1.setBounds({ x: 0, y: 0, width: 2000, height: 1100 });
}

app.whenReady().then(() => {
  createWindow();
});

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});
HyrepBall commented
20240508141827.mp4
HyrepBall commented

Here is the code that made it clear that the application was not working correctly
https://discord.com/channels/745037351163527189/1233319793852157984/1237738439844167710

download them into same folder

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>index.html LOADED</h3>
    <h3 id="test"></h3>

    <script>
        setTimeout(()=>{
            console.log("Change location")
            location.href = "./index2.html"
        }, 5000)

        function step(timestamp) {
            
            document.querySelector('#test').textContent =  performance.now()
            
            window.requestAnimationFrame(step);
        }

        window.requestAnimationFrame(step);

    </script>
</body>
</html>

index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>index.html2 LOADED</h3>
    <h3 id="test"></h3>

    <script>
        setTimeout(()=>{
            console.log("Change location")
            location.href = "./index.html"
        }, 5000)

        function step(timestamp) {
            
            document.querySelector('#test').textContent =  performance.now()
            
            window.requestAnimationFrame(step);
        }

        window.requestAnimationFrame(step);
    </script>
</body>
</html>
HyrepBall commented
20240508154638.mp4