Transparent Browser for our own web-app and PWA [Using static HTML,CSS and JavaScript][like user can see desktop wallpaper through our web-app/PWA]

Question

I am an beginner frontend developer and designer, I'm currently working on an webapplication (chat) using socket.

Languages I'm and my friend using : Scala,HTML,CSS,JavaScript.

I'm working on the HTML and CSS and JavaScript. he working in Scala.

I need to create a app with the transparent browser/background like we can see desktop wallpaper through our application or website.

I heard that, we can use Electron Framework to make this thing way more easier.But I kinda stick with the static js.

So guys,kindly help me with this.

Is it possible to create a web application or browser-based Progressive Web App (PWA) that offers a transparent interface, allowing users to see their desktop wallpaper through the application?

Answer 1

You cannot control the transparency of a web browser window, so if this application is in an actual browser (as opposed to Electron) then this is not possible.

With Electron however it is possible and quite simple:

const { BrowserWindow } = require('electron');

const window = new BrowserWindow({
  width: 800, 
  height: 600,
  transparent:true,  // <-- This bit
});