Can electron webview transform mouse event to touch event?

Question

I want to simulate a mobile device in desktop environment. I can't find a argument to transform mouse event to touch event.

How can I approach this job? Any hint will be great. Thank you so much.

Answer 1

I think I figured it out. Dev environment:

• node 7.4.0
• Chromium 54.0.2840.101
• Electron 1.5.1

    const app = electron.app 
    const BrowserWindow = electron.BrowserWindow

    let mainWindow;
    function createWindow() {

      mainWindow = new BrowserWindow({
        width: 1024,
        height: 768,
        frame: false,
        x: -1920,
        y: 0,
        autoHideMenuBar: true,
        icon: 'assets/icons/win/app-win-icon.ico'
      });

      try {
        // works with 1.1 too
        mainWindow.webContents.debugger.attach('1.2')
      } catch (err) {
        console.log('Debugger attach failed: ', err)
      }

      const isDebuggerAttached = mainWindow.webContents.debugger.isAttached()
      console.log('debugger attached? ', isDebuggerAttached)

      mainWindow.webContents.debugger.on('detach', (event, reason) => {
        console.log('Debugger detached due to: ', reason)
      });

      // This is where the magic happens!
      mainWindow.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
        enabled: true,
        configuration: 'mobile',
      });

      mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true,
        show: false,
        backgroundColor: '#8e24aa ',
      }));

      // Show the mainwindow when it is loaded and ready to show
      mainWindow.once('ready-to-show', () => {
          mainWindow.show()
      })
    }

    // Listen for app to be ready
    app.on('ready', createWindow);

Answer 2

Take a look at this Electron github issue or this Atom Discussion for ideas on how to get the touch working with Electron.

As far as how to approach it, I would look through the mouse events and touch events and just wire up a function that combines the Electron api and the relevant web api for mouse/touch.

Answer 3

Looking at the web-contents API, the only thing you can do is to open the dev tools with:

// win being a BrowserWindow object
win.webContents.openDevTools();

Then you will have to manually click on the responsive tools (the smartphone icon), and you will get into the mode you want.

But I am afraid there is no way to do it programatically. Mostly because it is considered as a development tool, and not a browser feature, so you will have the toolbar at the top and all these things. Not really something you want on Production.

Answer 4

You can try to use Microsoft Windows Simulator. You need to install Visual Studio 2019 with Universal Windows Platform development then run the simulator through:

C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\16.0\Microsoft.Windows.Simulator.exe

I tested my electron app that also needs to run well both on touchscreen devices and devices without touch screen using this and it works really well to simulate touchscreen devices.

Do not forget to switch to touchscreen input on the right side of the panel, otherwise, the default input will simulate a mouse pointer.