iwa-windowing-example

IWA Windowing Example

An example of Isolated Web Application (IWA) windowing functionality

How to Run

Build or download the signed web bundle.

Run Chrome M124+ and enable flags:

• chrome://flags/#enable-isolated-web-apps
• chrome://flags/#enable-isolated-web-app-dev-mode
• chrome://flags/#automatic-fullscreen-content-setting
• chrome://flags/#enable-desktop-pwas-borderless

$ chrome --enable-features=IsolatedWebApps,IsolatedWebAppDevMode,AutomaticFullscreenContentSetting,WebAppBorderless

Visit chrome://web-app-internals/ and point “Install IWA from Signed Web Bundle” to iwa-windowing-example.swbn

Visit chrome://apps and launch “IWA Windowing Example”

Note: If reinstall fails, try restarting Chrome.

Optional: Test limited non-IWA functionality

This example is hosted on GitHub HERE. Functionality is limited without IWA installation.

Optional: Self-Host a Dev Mode Proxy

$ git clone https://github.com/michaelwasserman/iwa-windowing-example.git
$ cd iwa-windowing-example/static
$ python3 -m http.server [port]

Visit chrome://web-app-internals/ and point “Install IWA via Dev Mode Proxy” to http://localhost:[port]/

Optional: Self-Build a Signed Web Bundle

$ git clone https://github.com/michaelwasserman/iwa-windowing-example.git
$ cd iwa-windowing-example
$ openssl genpkey -algorithm Ed25519 -out ed25519key.pem
$ npm i
$ npm init
$ npm run build

This builds iwa-windowing-example.swbn to use with chrome://web-app-internals/.

Note: Keep the new ed25519key.pem private key file secure; do not share it in a public repo :) Note: See barebones IWA Bundling Example.

Windowing features, docs, and resources:

Automatic Fullscreen Content Setting (IWA or enterprise only)

Permits Element.requestFullscreen() calls without a user gesture (transient activation). Used to open fullscreen popups, and enter fullscreen on mouse hover or after a 6s delay.

• Requires Chrome M127 (or chrome://flags/#automatic-fullscreen-content-setting on M124-126)
• Permission detection requires Chrome M128 (or chrome://flags/#automatic-fullscreen-permissions-query on early M128 builds)
• Users must grant permission to the IWA in chrome://settings; or enterprise admins must allow the origin by policy:
  • Set “Automatic full screen” to Allow from: IWA -> three-dot menu -> App Info -> Settings -> More Settings and Permissions
  • e.g. chrome://settings/content/siteDetails?site=isolated-app%3A%2F%2Fegggr2nt2of2snscqzoiitustiopkcfm4f6ep4bj5io3xlgm3itqaaac
  • Or allowing the origin via AutomaticFullscreenAllowedForUrls enterprise policy (see quick start guides)
• Explainer, ChromeStatus

Borderless Display Mode (IWA-only)

A Web Application Manifest display_override mode. Used to show app content without any browser-provided window frame.

• Requires Isolated Web App context
• Requires Window Management permission and permisison-policy
• Requires chrome://flags/#enable-desktop-pwas-borderless or --enable-features=WebAppBorderless
• Used in this example when the app is installed as an IWA
• Explainer, ChromeStatus, Borderless mode demo app

TODO: Additional Windowing Controls (IWA-only)

Fullscreen (with a user gesture)

Window Management API (cross-screen popups and fullscreen)

Window-Controls-Overlay (WCO) Display Mode (Installed Web Apps only)

Web Application Manifest display_override mode that lets app content be shown as part of the browser-provided window titlebar.

• Requires installed Web App context (not necessarily an Isolated Web App)
• Used in this example as a fallback when the Borderless Display Mode is not available
  • Note, installed non-isolated web apps may not fallback from borderless to WCO when borderless is enabled
• Spec, ChromeStatus, MDN documentation, WCO Example PWA

Pop-ups And Redirects Content Setting

Permits window.open() calls without a user gesture (transient activation) Used to open a popup on each display of multi-screen device with one gesture.

• Users or enterprise admins can allow by default or for individual origins in chrome://settings

DEPRECATED: Fullscreen popups.

This site is open source. Improve this page.