Skip to content

The app window fits the display, a note points at the browser's install control, and the docs run it locally - #6

Merged
bdbarnett merged 6 commits into
mainfrom
window-install-docs
Oct 8, 2026
Merged

bdbarnett merged 6 commits into
mainfrom
window-install-docs

Conversation

@bdbarnett

Copy link
Copy Markdown
Contributor

Three changes from the roadmap (2026-10-07): the installed app's window fits the display, the Install button gives way to a note that points at the browser's own install control, and the docs only explain running it locally.

The app window fits the display

Installed and opened in its own window, the page is just the canvas, and pwa.js resizes the window to the display board_config asks for plus the window's frame and title bar (outer − inner). It fits once when PSDisplay writes the canvas size, and again only if that size changes. It never reacts to window resizes, so a window you resized stays put, and a maximized window is left alone. A display bigger than the screen is capped at the screen and the canvas scales down.

  • Chrome / Edge desktop: this is the case it's for. They allow resizeTo() in an installed app's window and refuse it in a tab (web.dev, Window management).
  • Tab, any browser: the window is never touched.
  • Safari (Dock apps), Firefox, phones: the call is made only in an app window and does nothing where it's refused. Phones are full screen and the canvas scales.

The canvas in a tab now shows at the display's own size too. It used to be capped at 320 px wide, shrinking only when the page is narrower.

The Install button is gone; a note points at the browser's control

The button, its CSS and its beforeinstallprompt/prompt() plumbing are removed. The page no longer calls preventDefault(), so Chrome on Android keeps its own install banner. A small note near the top right, closed with ×, says how this browser installs:

Browser The note
Chrome / Edge desktop Points up at the address bar's install icon, only after beforeinstallprompt fires (that's when the icon is there)
Chrome on Android Points at the ⋮ menu: Install app
Safari on iPhone / iPad Share (under ⋯ on iOS 26) → Add to Home Screen; at the bottom on iPhone, where Share lives
Safari 17+ on macOS File › Add to Dock
Other Android browsers Browser menu → Install / Add to Home screen
Firefox desktop, Safari ≤ 16 on macOS Nothing

It never shows in the installed app (display-mode standalone/minimal-ui/window-controls-overlay, or iOS navigator.standalone), it hides on appinstalled, and closing it is remembered in localStorage (wrapped in try/catch).

What it's modelled on: the platform detection and the Apple wording follow @khmyznikov/pwa-install, the component PWABuilder points to: its iPad-reports-as-Mac touch check, Safari ≥ 17 for Add to Dock, the Android-without-BeforeInstallPromptEvent fallback, and the standalone check. The behaviour follows web.dev's Patterns for promoting PWA installation: show it only after beforeinstallprompt, keep it out of the user's path, make it dismissible, and remember the dismissal. No dependency: it's about 60 lines in pwa.js.

Docs: local http.server only

README, docs/pwa-guide.md, docs/newcomers.md and docs/README.md no longer mention GitHub Pages or deploying. They give ./scripts/vendor_pyscript.sh then python3 -m http.server 8000, open http://localhost:8000, and explain why it must be localhost or https (the service worker). They also cover how to keep the cache from hiding edits: Ctrl+Shift+R, DevTools' Bypass for network, a new VERSION in sw.js, or Clear site data.

.github/workflows/deploy.yml is removed. It existed only to publish copies of the template to Pages, and it skipped this repo. Nothing else needed it: tests.yml vendors PyScript itself, and the local run uses the vendor script. sw.js loses the deploy-time SHA stamp, so VERSION is now a plain string you change.

What I ran

Served with python3 -m http.server and driven with Playwright from the examples venv. Chromium ran headful under Xvfb.

  • Tab (Chromium): paints (palette pixel white), no install button. Chromium fired a real beforeinstallprompt on localhost and the note appeared. Closing it stored the flag, and after a reload it stayed gone. The window size never changed, and a direct resizeTo() in the tab was refused by the browser.
  • Installed-app window (Chromium --app=, display-mode: standalone): started at 1000×900, became 320×480 once Python made the display, and showed only the canvas, with no note even when beforeinstallprompt was dispatched. Setting the canvas to 480×320 refit it to 480×320. A later resize to 800×700 was left alone.
  • Frame arithmetic (stubbed Windows-like 16×39 frame): resizeTo(336, 519). Maximized: no call. A 1600×1200 display on a 1366×728 screen was clamped to 1366×728. The same size written twice made one call.
  • Per browser: iPhone and iPad (WebKit) show the Share note, iPhone at the bottom. An iPhone with navigator.standalone shows nothing. macOS Safari 17 shows Add to Dock, Safari 16 nothing. Firefox desktop shows nothing. Firefox Android shows the menu note. Chrome Android shows the ⋮ note.
  • Stale cache: an ordinary reload served the old main.py, Ctrl+Shift+R (ignoreCache) served the edit, and bumping VERSION showed the edit on the second reload. The docs say exactly that.
  • python3 -m unittest discover -s tests -v: 6 OK, including a new test that keeps the button and prompt()/preventDefault() out.

Not checked

  • I couldn't see the real Chrome/Edge address bar, so the arrow sits 150 px from the window's right edge by estimate. To check it on Windows, run the two commands above in WSL, open http://localhost:8000 in Chrome and in Edge, and see whether the arrow lands on the install icon. If it doesn't, change --arrow-right in style.css.
  • I haven't checked a real installed window with a Windows title bar. Xvfb has no window manager, so outer equalled inner there. To check, click the icon, install, and see whether the app window opens at 320×480 of canvas with no scrollbars. The frame maths was only tested with stubs.
  • Browser zoom other than 100 % in the app window would fit slightly off, because outerWidth doesn't scale with zoom.

…nstall control

An installed app now opens as just the canvas, and pwa.js resizes its window
to the display board_config asks for plus the window's frame: once when the
display reports its size, again only if that size changes. Chrome and Edge
allow resizeTo() in an installed app's window and refuse it in a tab, so a tab
is never touched; a maximized window or one the user resized stays as it is.
The canvas now shows at the display's own size in a tab too (it was capped at
320 px wide), shrinking only when the page is narrower.

The Install app button is gone, with the beforeinstallprompt plumbing that
only served it. In its place a small dismissible note near the top right
points at the browser's own install control: up at the address-bar install
icon in Chrome and Edge (only once the browser fires beforeinstallprompt),
at the menu in Chrome on Android, and in words for Safari on iOS/iPadOS
(Share, Add to Home Screen) and macOS 17+ (File, Add to Dock) and for other
Android browsers. Firefox on the desktop gets nothing. It never shows in the
installed app, and closing it is remembered in localStorage.
README, the PWA guide, the newcomer's guide and the docs index no longer
mention GitHub Pages or deploying. They say how to run it with
python3 -m http.server, why it has to be http://localhost (or https) for the
service worker, and how to keep the service worker's cache from hiding edits:
a hard reload, DevTools' Bypass for network, or a new VERSION in sw.js.

deploy.yml existed only to publish a copy of the template to Pages (it
skipped this repository), so it is removed. tests.yml vendors PyScript on its
own and the local run uses scripts/vendor_pyscript.sh, so nothing else
needed it. sw.js loses the deploy-time version stamp: VERSION is a plain
string you change to replace the cache.
@bdbarnett

Copy link
Copy Markdown
Contributor Author

Merged main in (the v0.7.0 pin from #9, which boarddev.env_set needs). Ran in Chromium with Playwright: the status reads "Running displaydev in Pyodide", the canvas is 500x500, the eight palette blocks draw in their colours, picking red and clicking paints a red dot, and the console has no errors. Tests: 6 OK.

@bdbarnett
bdbarnett merged commit d2dda4a into main Oct 8, 2026
1 check passed
@bdbarnett
bdbarnett deleted the window-install-docs branch October 8, 2026 09:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant