Installable web app (PWA), with an iPhone hint #51

Closed
opened 2026-10-17 17:29:49 +00:00 by littlefox · 6 comments
Owner

On phones, "installing" a web app is how people keep things that aren't in an app store.

What:

  • A web app manifest: name, icons (including maskable), theme colour, display: standalone.
  • A service worker that caches the app shell (HTML, wasm, CSS) so it starts fast; never caches LysKOM data.
  • Android/Chromium: offer the browser's install prompt from the You tab.
  • iOS has no install prompt: on iPhone/iPad Safari show a one-time hint ("tap Share, then Add to Home Screen"), dismissible and never shown again.

Notes (iOS): home-screen web apps have their own storage (safe from Safari's 7-day eviction) and are the only way to get web push later. Apple can change this with an update, so test on a real iPhone before the release.

Done when:

  • Lighthouse's installability check passes.
  • An e2e spec checks the manifest and service worker, and that the iPhone hint shows once in WebKit with an iPhone user agent.
  • Tested by hand on a real Android phone and a real iPhone (needs the user, or someone with one).

From docs/ROADMAP.md, 0.2 "Feels like an app".

On phones, "installing" a web app is how people keep things that aren't in an app store. What: - A web app manifest: name, icons (including maskable), theme colour, `display: standalone`. - A service worker that caches the app shell (HTML, wasm, CSS) so it starts fast; never caches LysKOM data. - Android/Chromium: offer the browser's install prompt from the You tab. - iOS has no install prompt: on iPhone/iPad Safari show a one-time hint ("tap Share, then Add to Home Screen"), dismissible and never shown again. Notes (iOS): home-screen web apps have their own storage (safe from Safari's 7-day eviction) and are the only way to get web push later. Apple can change this with an update, so test on a real iPhone before the release. Done when: - Lighthouse's installability check passes. - An e2e spec checks the manifest and service worker, and that the iPhone hint shows once in WebKit with an iPhone user agent. - Tested by hand on a real Android phone and a real iPhone (needs the user, or someone with one). From docs/ROADMAP.md, 0.2 "Feels like an app".
Author
Owner

Decided (D-031): the installable web app is the way to phones. User: "I like the installable web-app so let's go with that route. I have an android phone but I can always get a friend to mess with the iOS version if needed." Real-device check: the user on Android; iOS through a friend of the user, before the release.

Decided (D-031): the installable web app is the way to phones. User: "I like the installable web-app so let's go with that route. I have an android phone but I can always get a friend to mess with the iOS version if needed." Real-device check: the user on Android; iOS through a friend of the user, before the release.
Author
Owner

The real-device checks depend on #71 (a test server with HTTPS, which the user is arranging). Until then: localhost, and Android over USB with Chrome's port forwarding.

The real-device checks depend on #71 (a test server with HTTPS, which the user is arranging). Until then: localhost, and Android over USB with Chrome's port forwarding.
Author
Owner

Built and merged in #88: manifest, icons, service worker (app shell, opens offline), install button where the browser offers one, one-time iPhone 'Lägg till på hemskärmen' hint. pwa.spec.ts covers it in Chromium and WebKit. Left: trying it on a real Android phone (the user) and a real iPhone (a friend), which needs HTTPS: #71.

Built and merged in #88: manifest, icons, service worker (app shell, opens offline), install button where the browser offers one, one-time iPhone 'Lägg till på hemskärmen' hint. pwa.spec.ts covers it in Chromium and WebKit. Left: trying it on a real Android phone (the user) and a real iPhone (a friend), which needs HTTPS: #71.
Author
Owner

Ready for the real-phone check, against the HTTPS mode (#98): trust http://192.168.0.11:8080/neokom-ca.crt once, then install from https://192.168.0.11:8443/ (docs/DOCKER.md, 'HTTPS: NeoKOM as an app on your phone').

Ready for the real-phone check, against the HTTPS mode (#98): trust http://192.168.0.11:8080/neokom-ca.crt once, then install from https://192.168.0.11:8443/ (docs/DOCKER.md, 'HTTPS: NeoKOM as an app on your phone').
Author
Owner

Real Android check done: the user trusted the container's CA, installed NeoKOM from https://192.168.0.11:8443/ and it works. One snag: Chrome showed ERR_CERT_AUTHORITY_INVALID until it was force-stopped after the certificate was installed; that goes into docs/DOCKER.md. Left: the real-iPhone check (a friend of the user), same HTTPS route.

Real Android check done: the user trusted the container's CA, installed NeoKOM from https://192.168.0.11:8443/ and it works. One snag: Chrome showed ERR_CERT_AUTHORITY_INVALID until it was force-stopped after the certificate was installed; that goes into docs/DOCKER.md. Left: the real-iPhone check (a friend of the user), same HTTPS route.
Author
Owner

Closing (D-039, user: "move the iPhone check out and cut 0.2.0"). Built in #88, works on the user's Android phone over the Docker HTTPS mode (#98). The real-iPhone check moves to #113, outside 0.2.

Closing (D-039, user: "move the iPhone check out and cut 0.2.0"). Built in #88, works on the user's Android phone over the Docker HTTPS mode (#98). The real-iPhone check moves to #113, outside 0.2.
Sign in to join this conversation.
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
littlefox/neokom#51
No description provided.