WebviewJS on Windows: WebView2, Taskbar and Win32 APIs

import { getWebviewVersion } from '@webviewjs/webview';

console.log(getWebviewVersion()); // e.g. "128.0.2739.42"

import { Application } from '@webviewjs/webview';

const app = new Application();

app.whenReady().then(() => {
  const win = app.createBrowserWindow({
    decorations: false,
    windowsUndecoratedShadow: true,
    windowsClassName: 'MyAppWindow',
    windowsSkipTaskbar: false,
  });

  win.createWebview({ url: 'app://localhost/index.html' });
});

// Enable or disable user input for the window (grays out the window when disabled)
win.setEnable(false);
win.setEnable(true);

// Replace the taskbar button icon at runtime
// For raw pixels, provide width and height (or width alone for a square icon).
// Without dimensions, pass encoded image bytes instead.
win.setTaskbarIcon(rgbaBuffer, 32, 32);

// Remove the custom taskbar icon and restore the default window icon
win.removeTaskbarIcon();

// Toggle DWM drop shadow on a borderless window
win.setUndecoratedShadow(true);

// Retrieve the native HWND handle as a bigint
// Safe to call from any thread (unlike getNativeHandle())
const hwnd = win.getNativeHandleAnyThread();
console.log(hwnd); // e.g. 133143624n

import { ProgressBarState } from '@webviewjs/webview';

// Show a determinate progress ring at 42 %
win.setProgressBar({ state: ProgressBarState.Normal, progress: 42 });

// Show an indeterminate spinner
win.setProgressBar({ state: ProgressBarState.Indeterminate });

// Signal an error state (red bar)
win.setProgressBar({ state: ProgressBarState.Error, progress: 100 });

// Remove the progress indicator
win.setProgressBar({ state: ProgressBarState.None });

// Register your protocol before creating the webview
win.registerProtocol('app', async (request) => {
  // serve files from ./dist
  const filePath = join(process.cwd(), 'dist', new URL(request.url).pathname);
  return new Response(await readFile(filePath), {
    headers: { 'Content-Type': 'text/html; charset=utf-8' },
  });
});

// Load from the custom protocol — IPC works correctly
win.createWebview({ url: 'app://localhost/index.html' });

const win = app.createBrowserWindow({
  title: 'My App',
  menu: {
    items: [
      {
        label: 'File',
        submenu: {
          items: [
            { id: 'new',  label: 'New',  accelerator: 'Ctrl+N' },
            { id: 'open', label: 'Open', accelerator: 'Ctrl+O' },
            { role: 'separator' },
            { id: 'quit', label: 'Exit', accelerator: 'Alt+F4' },
          ],
        },
      },
    ],
  },
});

app.on('custom-menu-click', ({ customMenuEvent }) => {
  if (customMenuEvent.id === 'quit') app.exit();
});

const dpr = win.scaleFactor();
const { width, height } = win.getInnerSize(/* logical = */ true);