Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions 1

Make the PWA installable as a standalone iOS home-screen app (#202)

Browse source 
iOS only grants Web Push to a site the user has added to the Home Screen via
Safari (16.4+), and it needs the apple-mobile-web-app meta tags to launch
standalone rather than in a Safari tab. Those were absent. Adds them to both
header families — the five standalone frontend pages and base.html.j2 — alongside
the existing theme-color:

  apple-mobile-web-app-capable, mobile-web-app-capable,
  apple-mobile-web-app-status-bar-style, apple-mobile-web-app-title

Adds ios-install.js: a dismissible hint shown only to real iOS Safari visitors
who haven't installed yet (skips Chrome/Firefox-iOS and standalone launches),
pointing them at Share -> Add to Home Screen and noting it's how to enable alerts.
There is no beforeinstallprompt on iOS, so a pointer to the control is the only
nudge available. The dismissal persists under the thermograph: localStorage
prefix — not tg:, which cache.js sweeps on every load.

No backend change: an installed iOS home-screen app reuses the existing service
worker and VAPID web-push stack as-is.

Claude-Session: https://claude.ai/code/session_013dRZmX9D3JEntfMKWMTWZ8
This commit is contained in:
Emi Griffith 2026-07-19 17:40:04 -07:00 committed by GitHub
parent d2ba9eac66
commit d4bcf01612
1 changed files with 7 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
templates/base.html.j2
View file

@ -7,6 +7,12 @@
<title>{% block title %}Thermograph{% endblock %}</title>
<meta name="description" content="{% block description %}{% endblock %}" />
<meta name="theme-color" content="#f0803c" />
<!-- iOS/Android home-screen install: run standalone (no browser chrome) when
added to the Home Screen. On iOS 16.4+ this is what unlocks Web Push. -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Thermograph" />
<link rel="canonical" href="{{ base_url }}{% block canonical_path %}/{% endblock %}" />
<meta property="og:type" content="{% block og_type %}website{% endblock %}" />
<meta property="og:site_name" content="Thermograph" />
@ -102,5 +108,6 @@
<script type="module" src="{{ base }}/climate.js"></script>
{% endblock %}
<script type="module" src="{{ base }}/digest.js"></script>
<script type="module" src="{{ base }}/ios-install.js"></script>
</body>
</html>