Window management

A PWA outside of the browser manages its own window. Learn about the APIs and capabilities for managing a window within the operating system.

Running in your own window, managed by your PWA, has all the advantages and responsibilities of any window in that operating system, such as:

• The ability to move and resize the window in multi-window operating systems, such as Windows or ChromeOS.
• Sharing the screen with other app windows, as in iPadOS split mode or Android split-screen mode.
• Appearing in docks, taskbars, and in the alt-tab menu on desktop, and multi-task window lists on mobile devices.
• The ability to minimize, move the window across screens and desktops, and close it at any time.

Move and resize the window

Your PWA window can be of any size and positioned anywhere on the screen on desktop operating systems. By default, when the user opens the PWA for the first time after installation, the PWA gets a default window size of a percentage of the current screen, with a maximum resolution of 1920x1080 positioned at the top-left corner of the screen.

The user can move and resize the window, and the browser will remember the last preference. The next time the user opens the app, the window will retain the size and position from the previous usage.

There is no way to define your PWA's preferred size and position within the manifest. You can only reposition and resize the window using the JavaScript API. From your code, you can move and resize your own PWA window using the moveTo(x, y) and resizeTo(x, y) functions of the window object.

For example, you can resize and move your PWA window when the PWA loads using:

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

You can query the current screen size and position using the window.screen object; you can detect when the window is resized using the resize event from the window object. There is no event for capturing the window move, so your option is to query the position frequently.

Instead of moving and resizing the window absolutely, you can move relatively and resize using moveBy() and resizeBy().

Browse other sites

If you want to send the user to an external site that is out-of-scope for your PWA, you can do so with a standard <a href> HTML element. Use location.href or open a new window on compatible platforms.

When you visit a URL that is out of the scope of your manifest, the browser engine of your PWA renders an in-app browser within the context of your window.

Some features of the in-app browsers are:

• They appear on top of your content.
• They have a static address bar showing the current origin, the window's title, and a menu. Typically, they're themed with the theme_color of your manifest.
• From the contextual menu, you can open that URL in the browser.
• Users can close the browser or go back.

While the in-app browser is on the screen, your PWA is waiting in the background, as if another window is obscuring it.