Skip to content

michaelwasserman/iwa-windowing-example

Repository files navigation

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.

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.

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.

About

A basic IWA windowing example

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published