Launch a transparent browser to improve the experience of web applications and PWA [support static HTML, CSS and JavaScript] [allow users to view desktop wallpapers in our web applications/PWA]

Question

I am a junior front-end developer and designer, currently developing a network application (chat) using socket.

The languages ​​my friends and I use are: Scala, HTML, CSS, JavaScript.

I'm working with HTML, CSS and JavaScript. He's using Scala.

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

I heard that we can use Electron framework to make this process easier. But I'm kinda stuck on using static js.

So guys, please help me.

Is it possible to create a browser-based Progressive Web App (PWA) that provides a transparent interface that allows users to see their desktop wallpaper through the app?

Answer 1

You cannot control the transparency of the web browser window, so if this application were in an actual browser (not Electron) this would not be possible.

However, it is possible in Electron, and very simple:

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

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